Merge branch 'feature/lab-design' into feature/lab-frontend
This commit is contained in:
commit
56c6ba536e
24
.mcp.json
24
.mcp.json
|
|
@ -13,7 +13,10 @@
|
|||
},
|
||||
"brave-search": {
|
||||
"command": "npx",
|
||||
"args": ["-y", "@modelcontextprotocol/server-brave-search"],
|
||||
"args": [
|
||||
"-y",
|
||||
"@modelcontextprotocol/server-brave-search"
|
||||
],
|
||||
"env": {
|
||||
"BRAVE_API_KEY": "BSAcRGGikEzY4B2j3NZ8Qy5NYh9l4HZ"
|
||||
}
|
||||
|
|
@ -36,7 +39,10 @@
|
|||
"perplexity": {
|
||||
"type": "stdio",
|
||||
"command": "npx",
|
||||
"args": ["-y", "perplexity-mcp"],
|
||||
"args": [
|
||||
"-y",
|
||||
"perplexity-mcp"
|
||||
],
|
||||
"env": {
|
||||
"PERPLEXITY_API_KEY": "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",
|
||||
"PERPLEXITY_TIMEOUT_MS": "600000"
|
||||
|
|
@ -44,13 +50,23 @@
|
|||
},
|
||||
"chrome-devtools": {
|
||||
"command": "npx",
|
||||
"args": ["-y", "chrome-devtools-mcp@latest"]
|
||||
"args": [
|
||||
"-y",
|
||||
"chrome-devtools-mcp@latest"
|
||||
]
|
||||
},
|
||||
"browsermcp": {
|
||||
"type": "stdio",
|
||||
"command": "npx",
|
||||
"args": ["-y", "@browsermcp/mcp@latest"],
|
||||
"args": [
|
||||
"-y",
|
||||
"@browsermcp/mcp@latest"
|
||||
],
|
||||
"env": {}
|
||||
},
|
||||
"shadcn": {
|
||||
"command": "npx",
|
||||
"args": ["shadcn@latest", "mcp"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema.json",
|
||||
"style": "new-york",
|
||||
"rsc": true,
|
||||
"tsx": true,
|
||||
"tailwind": {
|
||||
"config": "",
|
||||
"css": "src/app/globals.css",
|
||||
"baseColor": "neutral",
|
||||
"cssVariables": true,
|
||||
"prefix": ""
|
||||
},
|
||||
"iconLibrary": "lucide",
|
||||
"aliases": {
|
||||
"components": "@/components",
|
||||
"utils": "@/lib/utils",
|
||||
"ui": "@/components/ui",
|
||||
"lib": "@/lib",
|
||||
"hooks": "@/hooks"
|
||||
},
|
||||
"registries": {}
|
||||
}
|
||||
|
|
@ -10,17 +10,28 @@
|
|||
"typecheck": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@banatie/database": "workspace:*",
|
||||
"@radix-ui/react-checkbox": "^1.3.3",
|
||||
"@radix-ui/react-collapsible": "^1.1.12",
|
||||
"@radix-ui/react-label": "^2.1.8",
|
||||
"@radix-ui/react-radio-group": "^1.3.8",
|
||||
"@radix-ui/react-select": "^2.2.6",
|
||||
"@radix-ui/react-slot": "^1.2.4",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"lucide-react": "^0.400.0",
|
||||
"next": "15.5.4",
|
||||
"react": "19.1.0",
|
||||
"react-dom": "19.1.0",
|
||||
"next": "15.5.4",
|
||||
"@banatie/database": "workspace:*"
|
||||
"tailwind-merge": "^3.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5",
|
||||
"@tailwindcss/postcss": "^4",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"@tailwindcss/postcss": "^4",
|
||||
"tailwindcss": "^4"
|
||||
"tailwindcss": "^4",
|
||||
"tw-animate-css": "^1.4.0",
|
||||
"typescript": "^5"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,364 @@
|
|||
# Lab Section Design System
|
||||
|
||||
The Lab section is a production-ready UI interface for interacting with the Banatie API service. It provides a clean, work-focused experience for image generation, gallery browsing, alias management, and flow control.
|
||||
|
||||
## File Structure
|
||||
|
||||
```
|
||||
apps/landing/src/
|
||||
├── app/(lab)/
|
||||
│ ├── CLAUDE.md # This design documentation
|
||||
│ ├── layout.tsx # Root lab layout with scroll context
|
||||
│ └── lab/
|
||||
│ ├── layout.tsx # Sub-layout with PageProvider
|
||||
│ ├── page.tsx # Redirect to /lab/generate
|
||||
│ ├── generate/page.tsx # Generation workbench
|
||||
│ ├── images/page.tsx # Image gallery browser
|
||||
│ ├── live/page.tsx # Live generation testing
|
||||
│ └── upload/page.tsx # File upload interface
|
||||
│
|
||||
├── components/layout/lab/
|
||||
│ ├── LabLayout.tsx # Main layout (sidebar + content + footer)
|
||||
│ ├── LabSidebar.tsx # Left filter panel
|
||||
│ └── LabFooter.tsx # Contextual footer with links
|
||||
│
|
||||
├── components/lab/
|
||||
│ ├── GenerateFormPlaceholder.tsx # Generation form component
|
||||
│ └── FilterPlaceholder.tsx # Reusable filter checkbox/radio
|
||||
│
|
||||
└── contexts/
|
||||
└── lab-scroll-context.tsx # Scroll state for header collapse
|
||||
```
|
||||
|
||||
## Design Principles
|
||||
|
||||
1. **Work-focused, not marketing** - Small typography, efficient spacing
|
||||
2. **Clean and functional** - Like Google AI Studio
|
||||
3. **Dual color system** - Zinc for layout, Slate for forms
|
||||
4. **Consistent icons** - Lucide React only, no emojis
|
||||
5. **Responsive** - Works on 768px to 1920px+ screens
|
||||
|
||||
---
|
||||
|
||||
## Color System
|
||||
|
||||
### Layout/Chrome → Zinc (Neutral Gray)
|
||||
Used for sidebar, footer, and layout borders:
|
||||
```css
|
||||
bg-zinc-950 /* Sidebar background */
|
||||
bg-zinc-950/50 /* Footer background, layout wrappers */
|
||||
border-zinc-800 /* Layout borders, dividers */
|
||||
text-zinc-400 /* Sidebar text */
|
||||
text-zinc-500 /* Footer text, muted */
|
||||
```
|
||||
|
||||
### Forms/Cards → Slate (Original Style)
|
||||
Used for cards, inputs, and interactive UI elements:
|
||||
```css
|
||||
bg-slate-900/80 /* Card backgrounds */
|
||||
bg-slate-900/50 /* Empty states, lighter cards */
|
||||
bg-slate-800 /* Input backgrounds, secondary surfaces */
|
||||
border-slate-700 /* Card borders, input borders */
|
||||
text-gray-400 /* Labels, secondary text */
|
||||
text-gray-500 /* Placeholders, hints */
|
||||
```
|
||||
|
||||
### Accent Colors (Purple/Cyan)
|
||||
```css
|
||||
/* Primary gradient */
|
||||
bg-gradient-to-r from-purple-600 to-cyan-600
|
||||
hover:from-purple-500 hover:to-cyan-500
|
||||
shadow-lg shadow-purple-900/30
|
||||
focus:ring-2 focus:ring-purple-500
|
||||
|
||||
/* Single-color accents */
|
||||
text-purple-400 /* Links, interactive text */
|
||||
|
||||
/* Info banners */
|
||||
bg-purple-900/10 border-purple-700/50
|
||||
```
|
||||
|
||||
### Status Colors
|
||||
```css
|
||||
/* Success */ bg-emerald-500/10 border-emerald-500/30 text-emerald-400
|
||||
/* Warning */ bg-amber-500/10 border-amber-500/30 text-amber-400
|
||||
/* Error */ bg-red-500/10 border-red-500/30 text-red-400
|
||||
/* Info */ bg-purple-900/10 border-purple-700/50 text-purple-400
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Typography Scale
|
||||
|
||||
### Headings (Practical Sizes)
|
||||
```tsx
|
||||
// Page Title (only on main pages)
|
||||
text-lg font-semibold text-white
|
||||
|
||||
// Section Title
|
||||
text-base font-semibold text-white
|
||||
|
||||
// Card Title
|
||||
text-sm font-medium text-white
|
||||
```
|
||||
|
||||
### Body Text
|
||||
```tsx
|
||||
// Primary body
|
||||
text-sm text-gray-300
|
||||
|
||||
// Secondary/descriptions
|
||||
text-sm text-gray-400
|
||||
|
||||
// Small text (hints, metadata)
|
||||
text-xs text-gray-500
|
||||
|
||||
// Labels (form fields)
|
||||
text-xs font-medium text-gray-400
|
||||
```
|
||||
|
||||
### Interactive
|
||||
```tsx
|
||||
// Button text
|
||||
text-sm font-semibold
|
||||
|
||||
// Links
|
||||
text-sm text-purple-400 hover:text-purple-300
|
||||
|
||||
// Badge/count
|
||||
text-xs text-gray-600
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Spacing System
|
||||
|
||||
### Padding
|
||||
```tsx
|
||||
// Cards
|
||||
p-4 md:p-5
|
||||
|
||||
// Compact cards
|
||||
p-3
|
||||
|
||||
// Form inputs
|
||||
px-3 py-2
|
||||
|
||||
// Buttons (primary)
|
||||
px-4 py-2.5
|
||||
|
||||
// Buttons (secondary)
|
||||
px-3 py-2
|
||||
```
|
||||
|
||||
### Section Spacing
|
||||
```tsx
|
||||
// Page padding
|
||||
p-4 md:p-6
|
||||
|
||||
// Between sections
|
||||
space-y-4
|
||||
|
||||
// Between cards in grid
|
||||
gap-3 md:gap-4
|
||||
|
||||
// Between form fields
|
||||
gap-2
|
||||
|
||||
// Label to input
|
||||
mb-1.5
|
||||
```
|
||||
|
||||
### Border Radius
|
||||
```tsx
|
||||
rounded-lg /* Standard (inputs, small cards) */
|
||||
rounded-xl /* Medium (cards) */
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Component Patterns
|
||||
|
||||
### Page Header
|
||||
```tsx
|
||||
<header className="pb-3 border-b border-zinc-800">
|
||||
<div className="flex items-center gap-2">
|
||||
<Sparkles className="w-5 h-5 text-purple-400" />
|
||||
<div>
|
||||
<h1 className="text-lg font-semibold text-white">Generate</h1>
|
||||
<p className="text-xs text-gray-400">Create AI images from text prompts</p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
```
|
||||
|
||||
### Form Card (Slate)
|
||||
```tsx
|
||||
<section className="p-4 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-xl">
|
||||
{/* content */}
|
||||
</section>
|
||||
```
|
||||
|
||||
### Form Input (Slate)
|
||||
```tsx
|
||||
<div className="space-y-1.5">
|
||||
<label className="block text-xs font-medium text-gray-400">Field Label</label>
|
||||
<input
|
||||
className="w-full px-3 py-2 text-sm bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||
placeholder="Enter value..."
|
||||
/>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Textarea (Slate)
|
||||
```tsx
|
||||
<textarea
|
||||
className="w-full px-3 py-2.5 text-sm bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent resize-none"
|
||||
rows={4}
|
||||
/>
|
||||
```
|
||||
|
||||
### Primary Button
|
||||
```tsx
|
||||
<button className="px-4 py-2 text-sm rounded-lg bg-gradient-to-r from-purple-600 to-cyan-600 text-white font-semibold hover:from-purple-500 hover:to-cyan-500 transition-all shadow-lg shadow-purple-900/30 focus:ring-2 focus:ring-purple-500 flex items-center gap-1.5">
|
||||
<Sparkles className="w-4 h-4" />
|
||||
Generate
|
||||
</button>
|
||||
```
|
||||
|
||||
### Secondary Button (Slate)
|
||||
```tsx
|
||||
<button className="w-full px-3 py-2 text-sm bg-slate-800 border border-slate-700 rounded-lg text-gray-400 hover:text-white hover:bg-slate-700 transition-colors flex items-center justify-center gap-1.5 focus:ring-2 focus:ring-purple-500">
|
||||
<Settings className="w-4 h-4" />
|
||||
Configure
|
||||
</button>
|
||||
```
|
||||
|
||||
### Empty State (Slate)
|
||||
```tsx
|
||||
<div className="p-6 bg-slate-900/50 backdrop-blur-sm border border-slate-700 rounded-lg text-center">
|
||||
<div className="w-12 h-12 mx-auto mb-3 flex items-center justify-center bg-slate-800 rounded-lg">
|
||||
<ImageOff className="w-6 h-6 text-gray-500" />
|
||||
</div>
|
||||
<h3 className="text-sm font-medium text-white mb-1">No results yet</h3>
|
||||
<p className="text-xs text-gray-400">Generated images will appear here</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Info Banner
|
||||
```tsx
|
||||
<div className="p-3 bg-purple-900/10 border border-purple-700/50 rounded-lg">
|
||||
<div className="flex items-start gap-2">
|
||||
<Info className="w-4 h-4 text-purple-400 mt-0.5 shrink-0" />
|
||||
<p className="text-xs text-gray-300">
|
||||
<span className="font-medium text-white">Lab Mode:</span> Experimental features enabled.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Icon System (Lucide React)
|
||||
|
||||
### Standard Sizes
|
||||
```tsx
|
||||
// Inline with text
|
||||
<Icon className="w-4 h-4" />
|
||||
|
||||
// Small (badges)
|
||||
<Icon className="w-3 h-3" />
|
||||
|
||||
// Medium (empty states)
|
||||
<Icon className="w-6 h-6" />
|
||||
|
||||
// With margin (before text)
|
||||
<Icon className="w-4 h-4 mr-1.5" />
|
||||
```
|
||||
|
||||
### Recommended Icons
|
||||
```tsx
|
||||
// Navigation
|
||||
import { Home, Image, Upload, Zap, Settings } from 'lucide-react';
|
||||
|
||||
// Actions
|
||||
import { Plus, X, Download, Share2, Copy, Trash2, Edit3, MoreVertical } from 'lucide-react';
|
||||
|
||||
// Filters
|
||||
import { Activity, Calendar, Palette, ChevronRight, ChevronDown } from 'lucide-react';
|
||||
|
||||
// Status
|
||||
import { CheckCircle2, AlertCircle, XCircle, Info, Loader2 } from 'lucide-react';
|
||||
|
||||
// Media
|
||||
import { ImageOff, FileImage, Sparkles } from 'lucide-react';
|
||||
|
||||
// Form
|
||||
import { Search, Filter, SlidersHorizontal } from 'lucide-react';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Responsive Breakpoints
|
||||
|
||||
```tsx
|
||||
// Base: < 768px (mobile) - single column, no sidebar
|
||||
// md: >= 768px (tablet) - 2 columns, no sidebar
|
||||
// lg: >= 1024px (desktop) - sidebar visible, 2-3 columns
|
||||
// xl: >= 1280px (large desktop) - optimal spacing, 3 columns
|
||||
```
|
||||
|
||||
### Sidebar Behavior
|
||||
```tsx
|
||||
// Hidden on mobile/tablet, visible lg+
|
||||
hidden lg:block w-64
|
||||
```
|
||||
|
||||
### Content Grid
|
||||
```tsx
|
||||
// Images: 1 col mobile, 2 col tablet, 3 col desktop
|
||||
grid-cols-1 md:grid-cols-2 xl:grid-cols-3
|
||||
|
||||
// Form fields
|
||||
grid-cols-1 md:grid-cols-3
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Do's and Don'ts
|
||||
|
||||
### DO
|
||||
- Use **zinc** for layout (sidebar, footer, layout borders)
|
||||
- Use **slate** for forms (cards, inputs, empty states)
|
||||
- Use text-sm/text-xs for most text
|
||||
- Use Lucide icons exclusively
|
||||
- Keep spacing tight (p-3 to p-5)
|
||||
- Add focus:ring-2 focus:ring-purple-500 to all interactive elements
|
||||
- Use transitions (transition-colors, transition-all)
|
||||
|
||||
### DON'T
|
||||
- Use emojis anywhere in the UI
|
||||
- Use marketing-size headings (text-3xl+)
|
||||
- Use generous spacing (p-8+, py-12+)
|
||||
- Mix zinc and slate inconsistently
|
||||
- Forget aria-label on icon-only buttons
|
||||
|
||||
---
|
||||
|
||||
## Layout Architecture
|
||||
|
||||
The Lab uses a scroll-aware header system:
|
||||
|
||||
1. **LabScrollProvider** wraps the entire section
|
||||
2. **LabLayout** detects scroll > 50px in content area
|
||||
3. When scrolled, header collapses (h-16 → h-0)
|
||||
4. SubsectionNav becomes the top element
|
||||
5. Content height adjusts: `h-[calc(100vh-7rem)]` → `h-[calc(100vh-3rem)]`
|
||||
|
||||
```tsx
|
||||
// Layout hierarchy
|
||||
(lab)/layout.tsx → LabScrollProvider + LabHeader
|
||||
└── lab/layout.tsx → PageProvider (SubsectionNav)
|
||||
└── LabLayout.tsx → ThreeColumnLayout (sidebar + content + footer)
|
||||
└── page.tsx → Actual page content
|
||||
```
|
||||
|
|
@ -1,14 +1,9 @@
|
|||
'use client';
|
||||
|
||||
import { Section } from '@/components/shared/Section';
|
||||
import { GenerateFormPlaceholder } from '@/components/lab/GenerateFormPlaceholder';
|
||||
|
||||
const GeneratePage = () => {
|
||||
return (
|
||||
<Section className="py-12 md:py-16 min-h-screen">
|
||||
<GenerateFormPlaceholder />
|
||||
</Section>
|
||||
);
|
||||
return <GenerateFormPlaceholder />;
|
||||
};
|
||||
|
||||
export default GeneratePage;
|
||||
|
|
|
|||
|
|
@ -1,27 +1,30 @@
|
|||
'use client';
|
||||
|
||||
import { Section } from '@/components/shared/Section';
|
||||
import { Image, ImageOff } from 'lucide-react';
|
||||
|
||||
const ImagesPage = () => {
|
||||
return (
|
||||
<Section className="py-12 md:py-16 min-h-screen">
|
||||
<header className="mb-8 md:mb-12">
|
||||
<h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-3">
|
||||
Image Library
|
||||
</h1>
|
||||
<p className="text-gray-400 text-base md:text-lg">
|
||||
Browse and manage your generated images
|
||||
</p>
|
||||
<div className="p-4 md:p-6 space-y-4">
|
||||
{/* Page Header */}
|
||||
<header className="pb-3 border-b border-slate-800">
|
||||
<div className="flex items-center gap-2">
|
||||
<Image className="w-5 h-5 text-purple-400" />
|
||||
<div>
|
||||
<h1 className="text-lg font-semibold text-white">Images</h1>
|
||||
<p className="text-xs text-gray-400">Browse and manage your generated images</p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="p-8 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-2xl">
|
||||
<div className="text-center py-12">
|
||||
<div className="text-6xl mb-4">🖼️</div>
|
||||
<h2 className="text-2xl font-semibold text-white mb-2">Image Browser</h2>
|
||||
<p className="text-gray-400">Component will be implemented here</p>
|
||||
{/* Empty State Placeholder */}
|
||||
<div className="p-6 bg-slate-900/50 backdrop-blur-sm border border-slate-700 rounded-lg text-center">
|
||||
<div className="w-12 h-12 mx-auto mb-3 flex items-center justify-center bg-slate-800 rounded-lg">
|
||||
<ImageOff className="w-6 h-6 text-gray-500" />
|
||||
</div>
|
||||
<h2 className="text-sm font-medium text-white mb-1">Image Browser</h2>
|
||||
<p className="text-xs text-gray-400">Component will be implemented here</p>
|
||||
</div>
|
||||
</Section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,27 +1,30 @@
|
|||
'use client';
|
||||
|
||||
import { Section } from '@/components/shared/Section';
|
||||
import { Zap, Radio } from 'lucide-react';
|
||||
|
||||
const LivePage = () => {
|
||||
return (
|
||||
<Section className="py-12 md:py-16 min-h-screen">
|
||||
<header className="mb-8 md:mb-12">
|
||||
<h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-3">
|
||||
Live Generation
|
||||
</h1>
|
||||
<p className="text-gray-400 text-base md:text-lg">
|
||||
Real-time testing and experimentation workspace
|
||||
</p>
|
||||
<div className="p-4 md:p-6 space-y-4">
|
||||
{/* Page Header */}
|
||||
<header className="pb-3 border-b border-slate-800">
|
||||
<div className="flex items-center gap-2">
|
||||
<Zap className="w-5 h-5 text-purple-400" />
|
||||
<div>
|
||||
<h1 className="text-lg font-semibold text-white">Live</h1>
|
||||
<p className="text-xs text-gray-400">Real-time testing and experimentation</p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="p-8 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-2xl">
|
||||
<div className="text-center py-12">
|
||||
<div className="text-6xl mb-4">⚡</div>
|
||||
<h2 className="text-2xl font-semibold text-white mb-2">Live Testing Interface</h2>
|
||||
<p className="text-gray-400">Component will be implemented here</p>
|
||||
{/* Live Testing Placeholder */}
|
||||
<div className="p-6 bg-slate-900/50 backdrop-blur-sm border border-slate-700 rounded-lg text-center">
|
||||
<div className="w-12 h-12 mx-auto mb-3 flex items-center justify-center bg-slate-800 rounded-lg">
|
||||
<Radio className="w-6 h-6 text-gray-500" />
|
||||
</div>
|
||||
<h2 className="text-sm font-medium text-white mb-1">Live Testing Interface</h2>
|
||||
<p className="text-xs text-gray-400">Component will be implemented here</p>
|
||||
</div>
|
||||
</Section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,27 +1,30 @@
|
|||
'use client';
|
||||
|
||||
import { Section } from '@/components/shared/Section';
|
||||
import { Upload, UploadCloud } from 'lucide-react';
|
||||
|
||||
const UploadPage = () => {
|
||||
return (
|
||||
<Section className="py-12 md:py-16 min-h-screen">
|
||||
<header className="mb-8 md:mb-12">
|
||||
<h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-3">
|
||||
File Upload
|
||||
</h1>
|
||||
<p className="text-gray-400 text-base md:text-lg">
|
||||
Upload and manage reference images for generation
|
||||
</p>
|
||||
<div className="p-4 md:p-6 space-y-4">
|
||||
{/* Page Header */}
|
||||
<header className="pb-3 border-b border-slate-800">
|
||||
<div className="flex items-center gap-2">
|
||||
<Upload className="w-5 h-5 text-purple-400" />
|
||||
<div>
|
||||
<h1 className="text-lg font-semibold text-white">Upload</h1>
|
||||
<p className="text-xs text-gray-400">Upload and manage reference images</p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="p-8 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-2xl">
|
||||
<div className="text-center py-12">
|
||||
<div className="text-6xl mb-4">📤</div>
|
||||
<h2 className="text-2xl font-semibold text-white mb-2">Upload Interface</h2>
|
||||
<p className="text-gray-400">Component will be implemented here</p>
|
||||
{/* Upload Dropzone Placeholder */}
|
||||
<div className="p-6 bg-slate-900/50 backdrop-blur-sm border border-slate-700 border-dashed rounded-lg text-center">
|
||||
<div className="w-12 h-12 mx-auto mb-3 flex items-center justify-center bg-slate-800 rounded-lg">
|
||||
<UploadCloud className="w-6 h-6 text-gray-500" />
|
||||
</div>
|
||||
<h2 className="text-sm font-medium text-white mb-1">Upload Interface</h2>
|
||||
<p className="text-xs text-gray-400">Drag and drop files or click to browse</p>
|
||||
</div>
|
||||
</Section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,652 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="scroll-smooth">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Banatie - AI Images for Modern Development</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: #0a0a0f;
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 50%, #ec4899 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.gradient-border {
|
||||
background: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 50%, #ec4899 100%);
|
||||
padding: 1px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.gradient-border-inner {
|
||||
background: #0a0a0f;
|
||||
border-radius: 11px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card-gradient {
|
||||
background: linear-gradient(180deg, rgba(139, 92, 246, 0.1) 0%, rgba(6, 182, 212, 0.05) 100%);
|
||||
border: 1px solid rgba(139, 92, 246, 0.2);
|
||||
}
|
||||
|
||||
.cta-gradient {
|
||||
background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(6, 182, 212, 0.2) 100%);
|
||||
border: 1px solid rgba(139, 92, 246, 0.3);
|
||||
}
|
||||
|
||||
.btn-gradient {
|
||||
background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
|
||||
}
|
||||
|
||||
.btn-gradient:hover {
|
||||
background: linear-gradient(135deg, #7c3aed 0%, #0891b2 100%);
|
||||
}
|
||||
|
||||
.badge {
|
||||
background: rgba(139, 92, 246, 0.15);
|
||||
border: 1px solid rgba(139, 92, 246, 0.3);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(6, 182, 212, 0.2) 100%);
|
||||
}
|
||||
|
||||
.screenshot-placeholder {
|
||||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
||||
border: 1px solid rgba(139, 92, 246, 0.3);
|
||||
}
|
||||
|
||||
.step-number {
|
||||
background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
|
||||
}
|
||||
|
||||
.tool-badge {
|
||||
background: rgba(30, 30, 50, 0.8);
|
||||
border: 1px solid rgba(139, 92, 246, 0.2);
|
||||
}
|
||||
|
||||
.powered-badge {
|
||||
background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
|
||||
border: 1px solid rgba(251, 191, 36, 0.3);
|
||||
}
|
||||
|
||||
.unique-feature {
|
||||
background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%);
|
||||
border: 1px solid rgba(6, 182, 212, 0.3);
|
||||
}
|
||||
|
||||
.code-block {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
border: 1px solid rgba(139, 92, 246, 0.2);
|
||||
}
|
||||
|
||||
.api-example {
|
||||
background: linear-gradient(180deg, rgba(139, 92, 246, 0.08) 0%, rgba(6, 182, 212, 0.04) 100%);
|
||||
border: 1px solid rgba(139, 92, 246, 0.15);
|
||||
}
|
||||
|
||||
.shape-your-future {
|
||||
background: linear-gradient(135deg, rgba(236, 72, 153, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
|
||||
border: 1px solid rgba(236, 72, 153, 0.3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-[#0a0a0f] text-white min-h-screen">
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="fixed top-0 left-0 right-0 z-50 bg-[#0a0a0f]/80 backdrop-blur-md border-b border-white/5">
|
||||
<div class="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-cyan-400 via-purple-500 to-pink-500"></div>
|
||||
<span class="text-xl font-bold">Banatie</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<a href="#lab" class="text-gray-400 hover:text-white transition-colors text-sm">Lab</a>
|
||||
<a href="#join" class="text-gray-300 hover:text-white transition-colors">Get Access</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- SECTION 1: HERO -->
|
||||
<section class="pt-32 pb-20 px-6">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<!-- Headline -->
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
|
||||
AI Image Generation<br>
|
||||
<span class="gradient-text">Inside Your Workflow</span>
|
||||
</h1>
|
||||
|
||||
<!-- Subheadline - replaced "No context switching" -->
|
||||
<p class="text-xl text-gray-400 mb-10 max-w-2xl mx-auto">
|
||||
Generate images via API, SDK, CLI, Lab, or live URLs.<br>
|
||||
Production-ready CDN delivery in seconds.
|
||||
</p>
|
||||
|
||||
<!-- Email Form -->
|
||||
<form class="flex flex-col sm:flex-row gap-3 max-w-md mx-auto mb-4">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="your@email.com"
|
||||
class="flex-1 px-4 py-3 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:border-purple-500 transition-colors"
|
||||
>
|
||||
<button type="submit" class="btn-gradient px-6 py-3 rounded-lg font-semibold hover:opacity-90 transition-opacity whitespace-nowrap">
|
||||
Get Early Access
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p class="text-sm text-gray-500 mb-10">Free early access. No credit card required.</p>
|
||||
|
||||
<!-- Badges - Prompt URLs moved to last -->
|
||||
<div class="flex flex-wrap gap-3 justify-center">
|
||||
<span class="badge px-4 py-2 rounded-full text-sm text-purple-300 flex items-center gap-2">
|
||||
<i data-lucide="zap" class="w-4 h-4"></i>
|
||||
API-First
|
||||
</span>
|
||||
<span class="badge px-4 py-2 rounded-full text-sm text-purple-300 flex items-center gap-2">
|
||||
<i data-lucide="globe" class="w-4 h-4"></i>
|
||||
Built-in CDN
|
||||
</span>
|
||||
<span class="badge px-4 py-2 rounded-full text-sm text-purple-300 flex items-center gap-2">
|
||||
<i data-lucide="flask-conical" class="w-4 h-4"></i>
|
||||
Web Lab
|
||||
</span>
|
||||
<span class="badge px-4 py-2 rounded-full text-sm text-purple-300 flex items-center gap-2">
|
||||
<i data-lucide="at-sign" class="w-4 h-4"></i>
|
||||
Style References
|
||||
</span>
|
||||
<span class="badge px-4 py-2 rounded-full text-sm text-cyan-300 flex items-center gap-2 border-cyan-500/30">
|
||||
<i data-lucide="link" class="w-4 h-4"></i>
|
||||
Prompt URLs
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECTION 2: API EXAMPLE - Practical code right after Hero -->
|
||||
<section class="py-16 px-6">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="api-example rounded-2xl p-8">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div class="feature-icon w-10 h-10 rounded-lg flex items-center justify-center">
|
||||
<i data-lucide="terminal" class="w-5 h-5 text-purple-400"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-xl font-bold">One request. Production-ready URL.</h2>
|
||||
<p class="text-gray-400 text-sm">Simple REST API that handles everything</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Code Example - Request -->
|
||||
<div class="code-block rounded-lg p-4 font-mono text-sm overflow-x-auto mb-4">
|
||||
<div class="text-gray-500 mb-2"># Generate an image</div>
|
||||
<span class="text-cyan-400">curl</span> <span class="text-gray-300">-X POST https://api.banatie.app/v1/generate \</span><br>
|
||||
<span class="text-gray-300 ml-4">-H</span> <span class="text-green-400">"Authorization: Bearer $API_KEY"</span> <span class="text-gray-300">\</span><br>
|
||||
<span class="text-gray-300 ml-4">-d</span> <span class="text-green-400">'{"prompt": "modern office interior, natural light"}'</span>
|
||||
</div>
|
||||
|
||||
<!-- Code Example - Response -->
|
||||
<div class="code-block rounded-lg p-4 font-mono text-sm overflow-x-auto">
|
||||
<div class="text-gray-500 mb-2"># Response</div>
|
||||
<span class="text-gray-300">{</span><br>
|
||||
<span class="text-purple-400 ml-4">"url"</span><span class="text-gray-300">:</span> <span class="text-green-400">"https://cdn.banatie.app/img/a7x2k9.png"</span><span class="text-gray-300">,</span><br>
|
||||
<span class="text-purple-400 ml-4">"enhanced_prompt"</span><span class="text-gray-300">:</span> <span class="text-green-400">"A photorealistic modern office..."</span><span class="text-gray-300">,</span><br>
|
||||
<span class="text-purple-400 ml-4">"generation_time"</span><span class="text-gray-300">:</span> <span class="text-yellow-400">12.4</span><br>
|
||||
<span class="text-gray-300">}</span>
|
||||
</div>
|
||||
|
||||
<p class="text-gray-500 text-sm mt-4 text-center">
|
||||
CDN-cached, optimized, ready to use. No download, no upload, no extra steps.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECTION 3: PROBLEM → SOLUTION -->
|
||||
<section class="py-20 px-6">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
|
||||
Why developers choose Banatie
|
||||
</h2>
|
||||
<p class="text-gray-400 text-center mb-16 max-w-2xl mx-auto">
|
||||
Stop fighting your image workflow. Start building.
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<!-- Card 1 -->
|
||||
<div class="card-gradient rounded-xl p-6">
|
||||
<div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
|
||||
<i data-lucide="refresh-cw" class="w-6 h-6 text-cyan-400"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2 text-red-400">Placeholder hell</h3>
|
||||
<p class="text-gray-500 text-sm mb-4">"I'll add images later" never happens</p>
|
||||
<p class="text-gray-300 text-sm">
|
||||
<i data-lucide="check" class="w-4 h-4 inline text-green-400 mr-1"></i>
|
||||
Generate real images as you build
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Card 2 -->
|
||||
<div class="card-gradient rounded-xl p-6">
|
||||
<div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
|
||||
<i data-lucide="arrow-left-right" class="w-6 h-6 text-cyan-400"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2 text-red-400">Context switching</h3>
|
||||
<p class="text-gray-500 text-sm mb-4">Leave IDE, generate elsewhere, come back</p>
|
||||
<p class="text-gray-300 text-sm">
|
||||
<i data-lucide="check" class="w-4 h-4 inline text-green-400 mr-1"></i>
|
||||
Stay in your workflow. API, SDK, MCP
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Card 3 -->
|
||||
<div class="card-gradient rounded-xl p-6">
|
||||
<div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
|
||||
<i data-lucide="package" class="w-6 h-6 text-cyan-400"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2 text-red-400">Asset management</h3>
|
||||
<p class="text-gray-500 text-sm mb-4">Download, optimize, upload, get URL</p>
|
||||
<p class="text-gray-300 text-sm">
|
||||
<i data-lucide="check" class="w-4 h-4 inline text-green-400 mr-1"></i>
|
||||
Production CDN URLs instantly
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Card 4 -->
|
||||
<div class="card-gradient rounded-xl p-6">
|
||||
<div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
|
||||
<i data-lucide="layers" class="w-6 h-6 text-cyan-400"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2 text-red-400">Style drift</h3>
|
||||
<p class="text-gray-500 text-sm mb-4">Every image looks different</p>
|
||||
<p class="text-gray-300 text-sm">
|
||||
<i data-lucide="check" class="w-4 h-4 inline text-green-400 mr-1"></i>
|
||||
Reference images keep style consistent
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECTION 4: PROMPT URLs HIGHLIGHT - Moved after Problem/Solution -->
|
||||
<section class="py-16 px-6">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="unique-feature rounded-2xl p-8">
|
||||
<div class="flex items-start gap-4 mb-6">
|
||||
<div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i data-lucide="sparkles" class="w-6 h-6 text-cyan-400"></i>
|
||||
</div>
|
||||
<div>
|
||||
<span class="inline-block px-3 py-1 bg-cyan-500/20 text-cyan-300 text-xs rounded-full mb-2">Unique</span>
|
||||
<h2 class="text-2xl font-bold mb-2">Prompt URLs — Images via HTML</h2>
|
||||
<p class="text-gray-400">Put a prompt in your <code class="text-cyan-300">img src</code> and get a real image. No API calls. No JavaScript. Just HTML.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Code Example -->
|
||||
<div class="code-block rounded-lg p-4 font-mono text-sm overflow-x-auto">
|
||||
<span class="text-gray-500"><!-- Write this --></span><br>
|
||||
<span class="text-purple-400"><img</span> <span class="text-cyan-300">src</span>=<span class="text-green-400">"https://cdn.banatie.app/gen?p=modern office interior"</span> <span class="text-purple-400">/></span><br><br>
|
||||
<span class="text-gray-500"><!-- Get this: production-ready image, cached, CDN-delivered --></span>
|
||||
</div>
|
||||
|
||||
<p class="text-gray-500 text-sm mt-4">Perfect for static sites, prototypes, and AI coding agents that generate HTML.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECTION 5: HOW IT WORKS -->
|
||||
<section class="py-20 px-6 bg-gradient-to-b from-transparent via-purple-900/5 to-transparent">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
|
||||
Your prompt. Your control. Production-ready.
|
||||
</h2>
|
||||
<p class="text-gray-400 text-center mb-16 max-w-2xl mx-auto">
|
||||
We handle the complexity so you can focus on building.
|
||||
</p>
|
||||
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<!-- Pipeline visualization -->
|
||||
<div class="grid md:grid-cols-4 gap-4 mb-8">
|
||||
<!-- Step 1 -->
|
||||
<div class="text-center p-4">
|
||||
<div class="step-number w-10 h-10 rounded-full flex items-center justify-center mx-auto mb-3 text-sm font-bold">1</div>
|
||||
<p class="text-sm font-medium mb-1">Your Prompt</p>
|
||||
<p class="text-xs text-gray-500">"a cat on windowsill"</p>
|
||||
</div>
|
||||
|
||||
<!-- Step 2 -->
|
||||
<div class="text-center p-4">
|
||||
<div class="step-number w-10 h-10 rounded-full flex items-center justify-center mx-auto mb-3 text-sm font-bold">2</div>
|
||||
<p class="text-sm font-medium mb-1">Smart Enhancement</p>
|
||||
<p class="text-xs text-gray-500">Style + details added</p>
|
||||
</div>
|
||||
|
||||
<!-- Step 3 -->
|
||||
<div class="text-center p-4">
|
||||
<div class="step-number w-10 h-10 rounded-full flex items-center justify-center mx-auto mb-3 text-sm font-bold">3</div>
|
||||
<p class="text-sm font-medium mb-1">AI Generation</p>
|
||||
<p class="text-xs text-gray-500">Gemini creates image</p>
|
||||
</div>
|
||||
|
||||
<!-- Step 4 -->
|
||||
<div class="text-center p-4">
|
||||
<div class="step-number w-10 h-10 rounded-full flex items-center justify-center mx-auto mb-3 text-sm font-bold">4</div>
|
||||
<p class="text-sm font-medium mb-1">CDN Delivery</p>
|
||||
<p class="text-xs text-gray-500">Instant global URL</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- What you control box -->
|
||||
<div class="card-gradient rounded-xl p-6 mt-8">
|
||||
<h3 class="font-semibold text-lg mb-4 flex items-center gap-2">
|
||||
<i data-lucide="settings-2" class="w-5 h-5 text-purple-400"></i>
|
||||
What you control
|
||||
</h3>
|
||||
<div class="grid md:grid-cols-3 gap-4 text-sm">
|
||||
<div class="flex items-start gap-2">
|
||||
<i data-lucide="check" class="w-4 h-4 text-green-400 mt-0.5 flex-shrink-0"></i>
|
||||
<span class="text-gray-300"><strong class="text-white">Style templates</strong> — photorealistic, illustration, minimalist, and more</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<i data-lucide="check" class="w-4 h-4 text-green-400 mt-0.5 flex-shrink-0"></i>
|
||||
<span class="text-gray-300"><strong class="text-white">Reference images</strong> — @aliases maintain visual consistency</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<i data-lucide="check" class="w-4 h-4 text-green-400 mt-0.5 flex-shrink-0"></i>
|
||||
<span class="text-gray-300"><strong class="text-white">Output specs</strong> — aspect ratio, dimensions, format</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Transparency note -->
|
||||
<p class="text-center text-gray-500 text-sm mt-6">
|
||||
<i data-lucide="info" class="w-4 h-4 inline mr-1"></i>
|
||||
Enhanced prompts are visible in API response. You always see what was generated.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECTION 6: KEY FEATURES -->
|
||||
<section class="py-20 px-6">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
|
||||
Built for real development workflows
|
||||
</h2>
|
||||
<p class="text-gray-400 text-center mb-16 max-w-2xl mx-auto">
|
||||
Everything you need to integrate AI images into your projects.
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<!-- Feature 1: Reference Images -->
|
||||
<div class="card-gradient rounded-xl p-6">
|
||||
<div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
|
||||
<i data-lucide="at-sign" class="w-6 h-6 text-pink-400"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Reference Images</h3>
|
||||
<p class="text-gray-400 text-sm">
|
||||
Use @aliases to maintain style consistency across your project. Reference up to 3 images per generation.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 2: Flows -->
|
||||
<div class="card-gradient rounded-xl p-6">
|
||||
<div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
|
||||
<i data-lucide="git-branch" class="w-6 h-6 text-purple-400"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Flows</h3>
|
||||
<p class="text-gray-400 text-sm">
|
||||
Chain generations, iterate on results, build image sequences with @last and @first references.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 3: Style Templates -->
|
||||
<div class="card-gradient rounded-xl p-6">
|
||||
<div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
|
||||
<i data-lucide="palette" class="w-6 h-6 text-yellow-400"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">7 Style Templates</h3>
|
||||
<p class="text-gray-400 text-sm">
|
||||
Same prompt, different styles. Photorealistic, illustration, minimalist, product, comic, sticker, and more.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 4: Instant CDN -->
|
||||
<div class="card-gradient rounded-xl p-6">
|
||||
<div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
|
||||
<i data-lucide="globe" class="w-6 h-6 text-green-400"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Instant CDN Delivery</h3>
|
||||
<p class="text-gray-400 text-sm">
|
||||
Every image gets production-ready URL. No upload, no optimization, no hosting setup needed.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 5: Output Control -->
|
||||
<div class="card-gradient rounded-xl p-6">
|
||||
<div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
|
||||
<i data-lucide="sliders-horizontal" class="w-6 h-6 text-blue-400"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Output Control</h3>
|
||||
<p class="text-gray-400 text-sm">
|
||||
Control aspect ratio, dimensions, and format. From square thumbnails to ultra-wide banners.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 6: Prompt URLs -->
|
||||
<div class="unique-feature rounded-xl p-6">
|
||||
<div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
|
||||
<i data-lucide="link" class="w-6 h-6 text-cyan-400"></i>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<h3 class="font-semibold text-lg">Prompt URLs</h3>
|
||||
<span class="px-2 py-0.5 bg-cyan-500/20 text-cyan-300 text-xs rounded">Unique</span>
|
||||
</div>
|
||||
<p class="text-gray-400 text-sm">
|
||||
Generate images via URL parameters. Put prompt in img src, get real image. Built-in caching.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECTION 7: INTEGRATIONS - Added Lab -->
|
||||
<section id="lab" class="py-20 px-6 bg-gradient-to-b from-transparent via-cyan-900/5 to-transparent">
|
||||
<div class="max-w-6xl mx-auto text-center">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||
Works with your tools
|
||||
</h2>
|
||||
<p class="text-gray-400 mb-12 max-w-2xl mx-auto">
|
||||
Use what fits your workflow. All methods, same capabilities.
|
||||
</p>
|
||||
|
||||
<div class="flex flex-wrap justify-center gap-4 mb-8">
|
||||
<div class="tool-badge px-6 py-3 rounded-lg flex items-center gap-2">
|
||||
<i data-lucide="server" class="w-5 h-5 text-cyan-400"></i>
|
||||
<span>REST API</span>
|
||||
</div>
|
||||
<div class="tool-badge px-6 py-3 rounded-lg flex items-center gap-2">
|
||||
<i data-lucide="code" class="w-5 h-5 text-blue-400"></i>
|
||||
<span>TypeScript SDK</span>
|
||||
</div>
|
||||
<div class="tool-badge px-6 py-3 rounded-lg flex items-center gap-2">
|
||||
<i data-lucide="cpu" class="w-5 h-5 text-purple-400"></i>
|
||||
<span>MCP Server</span>
|
||||
</div>
|
||||
<div class="tool-badge px-6 py-3 rounded-lg flex items-center gap-2">
|
||||
<i data-lucide="terminal" class="w-5 h-5 text-green-400"></i>
|
||||
<span>CLI</span>
|
||||
</div>
|
||||
<div class="tool-badge px-6 py-3 rounded-lg flex items-center gap-2">
|
||||
<i data-lucide="flask-conical" class="w-5 h-5 text-orange-400"></i>
|
||||
<span>Banatie Lab</span>
|
||||
</div>
|
||||
<div class="tool-badge px-6 py-3 rounded-lg flex items-center gap-2 border-cyan-500/30">
|
||||
<i data-lucide="link-2" class="w-5 h-5 text-cyan-400"></i>
|
||||
<span>Prompt URLs</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lab description -->
|
||||
<div class="max-w-2xl mx-auto mt-8 p-4 bg-white/5 rounded-lg">
|
||||
<p class="text-sm text-gray-400">
|
||||
<strong class="text-white">Banatie Lab</strong> — Official web interface for Banatie API. Generate images, build flows, browse your gallery, and explore all capabilities with ready-to-use code snippets.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p class="text-gray-500 text-sm mt-6">
|
||||
Perfect for Claude Code, Cursor, and any AI-powered workflow.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECTION 8: POWERED BY - Focus on Gemini capabilities -->
|
||||
<section class="py-20 px-6">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="powered-badge rounded-2xl p-8">
|
||||
<div class="flex items-center justify-center gap-3 mb-4">
|
||||
<i data-lucide="zap" class="w-8 h-8 text-yellow-400"></i>
|
||||
<h2 class="text-2xl font-bold">Powered by Google Gemini</h2>
|
||||
</div>
|
||||
|
||||
<!-- Model names -->
|
||||
<p class="text-center text-gray-400 mb-6">
|
||||
Currently using <span class="text-white font-medium">Gemini 2.5 Flash Image</span> <span class="text-gray-500">(Nano Banana)</span> — Google's fastest natively multimodal image model.
|
||||
</p>
|
||||
|
||||
<!-- Gemini capabilities -->
|
||||
<div class="grid md:grid-cols-2 gap-4 max-w-2xl mx-auto">
|
||||
<div class="flex items-start gap-3 text-sm">
|
||||
<i data-lucide="check-circle" class="w-5 h-5 text-yellow-400 flex-shrink-0 mt-0.5"></i>
|
||||
<div>
|
||||
<strong class="text-white">Native multimodal</strong>
|
||||
<p class="text-gray-400">Text and image understanding in one model</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3 text-sm">
|
||||
<i data-lucide="check-circle" class="w-5 h-5 text-yellow-400 flex-shrink-0 mt-0.5"></i>
|
||||
<div>
|
||||
<strong class="text-white">High-fidelity text rendering</strong>
|
||||
<p class="text-gray-400">Legible text in images for logos and diagrams</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3 text-sm">
|
||||
<i data-lucide="check-circle" class="w-5 h-5 text-yellow-400 flex-shrink-0 mt-0.5"></i>
|
||||
<div>
|
||||
<strong class="text-white">Conversational editing</strong>
|
||||
<p class="text-gray-400">Refine images through natural language</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3 text-sm">
|
||||
<i data-lucide="check-circle" class="w-5 h-5 text-yellow-400 flex-shrink-0 mt-0.5"></i>
|
||||
<div>
|
||||
<strong class="text-white">Optimized for speed</strong>
|
||||
<p class="text-gray-400">Fast generation without quality compromise</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Future models hint -->
|
||||
<p class="text-center text-gray-500 text-sm mt-6">
|
||||
More models coming — including Gemini 3 Pro Image (Nano Banana Pro) for advanced use cases.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECTION 9: SHAPE THE FUTURE - Replaced "What's next" -->
|
||||
<section class="py-20 px-6">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="shape-your-future rounded-2xl p-8 text-center">
|
||||
<div class="flex items-center justify-center gap-3 mb-4">
|
||||
<i data-lucide="rocket" class="w-8 h-8 text-pink-400"></i>
|
||||
<h2 class="text-2xl font-bold">Shape the future of Banatie</h2>
|
||||
</div>
|
||||
<p class="text-gray-400 mb-6 max-w-xl mx-auto">
|
||||
We're building this for developers like you. Early adopters get direct influence on our roadmap — suggest features, vote on priorities, and help us build exactly what you need.
|
||||
</p>
|
||||
<div class="flex flex-wrap justify-center gap-4 text-sm">
|
||||
<div class="flex items-center gap-2 text-gray-300">
|
||||
<i data-lucide="message-circle" class="w-4 h-4 text-pink-400"></i>
|
||||
<span>Direct feedback channel</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-300">
|
||||
<i data-lucide="vote" class="w-4 h-4 text-pink-400"></i>
|
||||
<span>Feature voting</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-300">
|
||||
<i data-lucide="users" class="w-4 h-4 text-pink-400"></i>
|
||||
<span>Early adopter community</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECTION 10: FINAL CTA -->
|
||||
<section id="join" class="py-20 px-6">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="cta-gradient rounded-2xl p-12 text-center">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||
Be first to try it
|
||||
</h2>
|
||||
<p class="text-gray-300 mb-8 max-w-xl mx-auto">
|
||||
Join developers waiting for early access. We'll notify you when your spot is ready.
|
||||
</p>
|
||||
|
||||
<form class="flex flex-col sm:flex-row gap-3 max-w-md mx-auto">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="your@email.com"
|
||||
class="flex-1 px-4 py-3 bg-white/10 border border-white/20 rounded-lg focus:outline-none focus:border-purple-500 transition-colors"
|
||||
>
|
||||
<button type="submit" class="btn-gradient px-6 py-3 rounded-lg font-semibold hover:opacity-90 transition-opacity whitespace-nowrap">
|
||||
Get Early Access
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECTION 11: FOOTER -->
|
||||
<footer class="py-12 px-6 border-t border-white/5">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<div class="flex flex-col md:flex-row justify-between items-center gap-6">
|
||||
<!-- Logo -->
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-cyan-400 via-purple-500 to-pink-500"></div>
|
||||
<span class="text-xl font-bold">Banatie</span>
|
||||
</div>
|
||||
|
||||
<!-- Links -->
|
||||
<div class="flex flex-wrap justify-center gap-6 text-gray-400">
|
||||
<a href="#" class="hover:text-white transition-colors">Documentation</a>
|
||||
<a href="#" class="hover:text-white transition-colors">API Reference</a>
|
||||
<a href="#" class="hover:text-white transition-colors">Lab</a>
|
||||
<a href="#" class="hover:text-white transition-colors">Pricing</a>
|
||||
<a href="#" class="hover:text-white transition-colors">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 pt-8 border-t border-white/5 text-center text-gray-500 text-sm">
|
||||
<p class="mb-2">Built for builders who create.</p>
|
||||
<p>© 2025 Banatie. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Initialize Lucide Icons -->
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,20 +1,49 @@
|
|||
@import 'tailwindcss';
|
||||
@import "tw-animate-css";
|
||||
|
||||
:root {
|
||||
--background: #0f172a;
|
||||
--foreground: #f8fafc;
|
||||
}
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-ring: var(--ring);
|
||||
--color-input: var(--input);
|
||||
--color-border: var(--border);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-card: var(--card);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family:
|
||||
'Inter',
|
||||
-apple-system,
|
||||
|
|
@ -99,3 +128,81 @@ pre::-webkit-scrollbar-thumb {
|
|||
pre::-webkit-scrollbar-thumb:hover {
|
||||
background: rgb(148, 163, 184); /* slate-400 */
|
||||
}
|
||||
|
||||
/* Dark theme as default (no .dark class needed) */
|
||||
:root {
|
||||
--radius: 0.625rem;
|
||||
--background: oklch(0.145 0 0);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.205 0 0);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.205 0 0);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.922 0 0);
|
||||
--primary-foreground: oklch(0.205 0 0);
|
||||
--secondary: oklch(0.269 0 0);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.269 0 0);
|
||||
--muted-foreground: oklch(0.708 0 0);
|
||||
--accent: oklch(0.269 0 0);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.556 0 0);
|
||||
--chart-1: oklch(0.488 0.243 264.376);
|
||||
--chart-2: oklch(0.696 0.17 162.48);
|
||||
--chart-3: oklch(0.769 0.188 70.08);
|
||||
--chart-4: oklch(0.627 0.265 303.9);
|
||||
--chart-5: oklch(0.645 0.246 16.439);
|
||||
--sidebar: oklch(0.205 0 0);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.269 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.556 0 0);
|
||||
}
|
||||
|
||||
/* Light theme (optional, requires .light class) */
|
||||
.light {
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.145 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.145 0 0);
|
||||
--primary: oklch(0.205 0 0);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.97 0 0);
|
||||
--secondary-foreground: oklch(0.205 0 0);
|
||||
--muted: oklch(0.97 0 0);
|
||||
--muted-foreground: oklch(0.556 0 0);
|
||||
--accent: oklch(0.97 0 0);
|
||||
--accent-foreground: oklch(0.205 0 0);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.922 0 0);
|
||||
--input: oklch(0.922 0 0);
|
||||
--ring: oklch(0.708 0 0);
|
||||
--chart-1: oklch(0.646 0.222 41.116);
|
||||
--chart-2: oklch(0.6 0.118 184.704);
|
||||
--chart-3: oklch(0.398 0.07 227.392);
|
||||
--chart-4: oklch(0.828 0.189 84.429);
|
||||
--chart-5: oklch(0.769 0.188 70.08);
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: oklch(0.205 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.97 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
/* Body background handled by page-specific gradients, not Shadcn variables */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,16 +5,20 @@
|
|||
*
|
||||
* Checkbox/radio button group for sidebar filters.
|
||||
* Supports both single-select (radio) and multi-select (checkbox) modes.
|
||||
* Uses Shadcn UI components with custom slate styling.
|
||||
*
|
||||
* Features:
|
||||
* - Radio buttons for single selection
|
||||
* - Checkboxes for multiple selection
|
||||
* - Radio buttons for single selection (Shadcn RadioGroup)
|
||||
* - Checkboxes for multiple selection (Shadcn Checkbox)
|
||||
* - Option counts (e.g., "All (127)")
|
||||
* - Accessible keyboard navigation
|
||||
* - Focus indicators
|
||||
*/
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
|
||||
import { Label } from '@/components/ui/label';
|
||||
|
||||
type FilterOption = {
|
||||
id: string;
|
||||
|
|
@ -35,37 +39,75 @@ export const FilterPlaceholder = ({
|
|||
}: FilterPlaceholderProps) => {
|
||||
const [selected, setSelected] = useState<string[]>(multiSelect ? [] : [options[0]?.id || '']);
|
||||
|
||||
const handleSelect = (optionId: string) => {
|
||||
if (multiSelect) {
|
||||
setSelected((prev) =>
|
||||
prev.includes(optionId) ? prev.filter((id) => id !== optionId) : [...prev, optionId]
|
||||
);
|
||||
} else {
|
||||
setSelected([optionId]);
|
||||
}
|
||||
const handleCheckboxChange = (optionId: string, checked: boolean) => {
|
||||
setSelected((prev) =>
|
||||
checked ? [...prev, optionId] : prev.filter((id) => id !== optionId)
|
||||
);
|
||||
};
|
||||
|
||||
const handleRadioChange = (value: string) => {
|
||||
setSelected([value]);
|
||||
};
|
||||
|
||||
const isSelected = (optionId: string) => selected.includes(optionId);
|
||||
|
||||
if (multiSelect) {
|
||||
// Checkbox mode for multi-select
|
||||
return (
|
||||
<div className="mt-2 space-y-1" role="group" aria-label={`${groupId} filters`}>
|
||||
{options.map((option) => {
|
||||
const checked = isSelected(option.id);
|
||||
const inputId = `${groupId}-${option.id}`;
|
||||
|
||||
return (
|
||||
<Label
|
||||
key={option.id}
|
||||
htmlFor={inputId}
|
||||
className="flex items-center gap-2 px-2 py-1.5 rounded-md text-sm cursor-pointer transition-colors hover:bg-white/5 group font-normal"
|
||||
>
|
||||
<Checkbox
|
||||
id={inputId}
|
||||
checked={checked}
|
||||
onCheckedChange={(checked) => handleCheckboxChange(option.id, checked === true)}
|
||||
className="border-slate-600 bg-slate-800 data-[state=checked]:bg-purple-600 data-[state=checked]:border-purple-600 data-[state=checked]:text-white focus-visible:ring-purple-500 focus-visible:ring-offset-0"
|
||||
/>
|
||||
<span className={`flex-1 ${checked ? 'text-white font-medium' : 'text-gray-400 group-hover:text-gray-300'}`}>
|
||||
{option.label}
|
||||
</span>
|
||||
{option.count !== undefined && (
|
||||
<span className="text-xs text-gray-600">
|
||||
{option.count}
|
||||
</span>
|
||||
)}
|
||||
</Label>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Radio mode for single-select
|
||||
return (
|
||||
<div className="mt-2 space-y-1" role="group" aria-label={`${groupId} filters`}>
|
||||
<RadioGroup
|
||||
value={selected[0]}
|
||||
onValueChange={handleRadioChange}
|
||||
className="mt-2 space-y-1"
|
||||
aria-label={`${groupId} filters`}
|
||||
>
|
||||
{options.map((option) => {
|
||||
const checked = isSelected(option.id);
|
||||
const inputId = `${groupId}-${option.id}`;
|
||||
|
||||
return (
|
||||
<label
|
||||
<Label
|
||||
key={option.id}
|
||||
htmlFor={inputId}
|
||||
className="flex items-center gap-2 px-2 py-1.5 rounded-md text-sm cursor-pointer transition-colors hover:bg-white/5 group"
|
||||
className="flex items-center gap-2 px-2 py-1.5 rounded-md text-sm cursor-pointer transition-colors hover:bg-white/5 group font-normal"
|
||||
>
|
||||
<input
|
||||
type={multiSelect ? 'checkbox' : 'radio'}
|
||||
<RadioGroupItem
|
||||
id={inputId}
|
||||
name={groupId}
|
||||
checked={checked}
|
||||
onChange={() => handleSelect(option.id)}
|
||||
className="w-4 h-4 bg-slate-800 border-slate-600 text-purple-600 focus:ring-2 focus:ring-purple-500 focus:ring-offset-0 rounded cursor-pointer"
|
||||
value={option.id}
|
||||
className="border-slate-600 bg-slate-800 text-purple-600 data-[state=checked]:border-purple-600 focus-visible:ring-purple-500 focus-visible:ring-offset-0"
|
||||
/>
|
||||
<span className={`flex-1 ${checked ? 'text-white font-medium' : 'text-gray-400 group-hover:text-gray-300'}`}>
|
||||
{option.label}
|
||||
|
|
@ -75,9 +117,9 @@ export const FilterPlaceholder = ({
|
|||
{option.count}
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
</Label>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</RadioGroup>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,26 +3,62 @@
|
|||
/**
|
||||
* Generate Form Placeholder Component
|
||||
*
|
||||
* Main content placeholder for lab generation interface.
|
||||
* Matches the /demo/tti page visual style with form card and results area.
|
||||
* Main content for lab generation interface.
|
||||
* Clean, work-focused design with compact layout.
|
||||
* Uses Shadcn UI components with custom slate styling.
|
||||
*
|
||||
* Features:
|
||||
* - Header with title and description
|
||||
* - Prompt textarea (similar to TTI page)
|
||||
* - Options row with selects and buttons
|
||||
* - Submit button with gradient styling
|
||||
* - Results area placeholder
|
||||
* - Keyboard shortcuts (Ctrl+Enter)
|
||||
* - Compact info banner (dismissible)
|
||||
* - Prompt textarea with keyboard shortcuts (Shadcn Textarea)
|
||||
* - Options grid with Shadcn Select dropdowns
|
||||
* - Results area with empty state
|
||||
* - Lucide icons throughout
|
||||
*
|
||||
* Color scheme: Forms use slate palette (original style)
|
||||
*/
|
||||
|
||||
import { useState, useRef, KeyboardEvent } from 'react';
|
||||
import { useState, KeyboardEvent } from 'react';
|
||||
import {
|
||||
Info,
|
||||
X,
|
||||
Loader2,
|
||||
Settings,
|
||||
ImageOff,
|
||||
Trash2,
|
||||
Sparkles,
|
||||
Wand2,
|
||||
Palette,
|
||||
Image,
|
||||
Layers,
|
||||
} from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
|
||||
// Shared styles for consistent theming
|
||||
const selectTriggerStyles = "w-full bg-slate-800 border-slate-700 text-white focus:ring-purple-500 focus:ring-offset-0 hover:bg-slate-700/50";
|
||||
const selectContentStyles = "bg-slate-800 border-slate-700";
|
||||
const selectItemStyles = "text-white focus:bg-slate-700 focus:text-white";
|
||||
const inputStyles = "bg-slate-800 border-slate-700 text-white placeholder:text-gray-500 focus-visible:ring-purple-500 focus-visible:ring-offset-0";
|
||||
const textareaStyles = "bg-slate-800 border-slate-700 text-white placeholder:text-gray-500 focus-visible:ring-purple-500 focus-visible:ring-offset-0 resize-none";
|
||||
const labelStyles = "text-xs font-medium text-gray-400";
|
||||
const cardStyles = "p-4 bg-slate-900/80 backdrop-blur-sm border-slate-700 rounded-xl gap-0 py-4";
|
||||
|
||||
export const GenerateFormPlaceholder = () => {
|
||||
const [prompt, setPrompt] = useState('');
|
||||
const [aspectRatio, setAspectRatio] = useState('1:1');
|
||||
const [template, setTemplate] = useState('photorealistic');
|
||||
const [generating, setGenerating] = useState(false);
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
const [showBanner, setShowBanner] = useState(true);
|
||||
|
||||
const handleGenerate = () => {
|
||||
if (!prompt.trim()) return;
|
||||
|
|
@ -38,174 +74,373 @@ export const GenerateFormPlaceholder = () => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
{/* Page Header */}
|
||||
<header className="mb-8 md:mb-12">
|
||||
<h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-3">
|
||||
Generate Workbench
|
||||
</h1>
|
||||
<p className="text-gray-400 text-base md:text-lg">
|
||||
Create and experiment with AI-generated images
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{/* Info Banner (Placeholder) */}
|
||||
<div className="mb-6 p-5 bg-purple-900/10 border border-purple-700/50 rounded-2xl">
|
||||
<div className="flex items-center justify-between flex-wrap gap-4">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white mb-1">Lab Environment</h3>
|
||||
<p className="text-sm text-gray-400">
|
||||
This is an experimental interface for testing generation features
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-purple-400">
|
||||
<span className="w-2 h-2 bg-purple-500 rounded-full animate-pulse"></span>
|
||||
<span>Active</span>
|
||||
<div className="p-4 md:p-6 space-y-4">
|
||||
{/* Compact Info Banner */}
|
||||
{showBanner && (
|
||||
<div className="p-3 bg-purple-900/10 border border-purple-700/50 rounded-lg">
|
||||
<div className="flex items-start gap-2">
|
||||
<Info className="w-4 h-4 text-purple-400 mt-0.5 shrink-0" />
|
||||
<div className="flex-1">
|
||||
<p className="text-xs text-gray-300">
|
||||
<span className="font-medium text-white">Lab Mode:</span>{' '}
|
||||
Experimental features enabled. API calls may be rate-limited.
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={() => setShowBanner(false)}
|
||||
className="p-1 h-auto w-auto text-gray-500 hover:text-gray-300 hover:bg-transparent"
|
||||
aria-label="Dismiss"
|
||||
>
|
||||
<X className="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Generation Form Card */}
|
||||
<section
|
||||
className="mb-8 p-6 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-2xl"
|
||||
aria-label="Image Generation Form"
|
||||
>
|
||||
{/* Prompt Textarea */}
|
||||
<div className="mb-4">
|
||||
<label htmlFor="lab-prompt-input" className="block text-lg font-semibold text-white mb-3">
|
||||
Your Prompt
|
||||
</label>
|
||||
<textarea
|
||||
id="lab-prompt-input"
|
||||
ref={textareaRef}
|
||||
value={prompt}
|
||||
onChange={(e) => setPrompt(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder="Describe the image you want to generate..."
|
||||
disabled={generating}
|
||||
rows={5}
|
||||
className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed resize-none"
|
||||
aria-label="Image generation prompt"
|
||||
/>
|
||||
<p className="mt-2 text-xs text-gray-500">
|
||||
Tip: Be specific and descriptive for better results
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Options Row */}
|
||||
<div className="mb-4 grid grid-cols-1 md:grid-cols-3 gap-3">
|
||||
{/* Aspect Ratio */}
|
||||
<Card className={cardStyles} aria-label="Image Generation Form">
|
||||
<CardContent className="p-0 px-4 space-y-3">
|
||||
{/* Prompt Textarea */}
|
||||
<div>
|
||||
<label
|
||||
htmlFor="lab-aspect-ratio"
|
||||
className="block text-xs font-medium text-gray-400 mb-1.5"
|
||||
>
|
||||
Aspect Ratio
|
||||
</label>
|
||||
<select
|
||||
id="lab-aspect-ratio"
|
||||
value={aspectRatio}
|
||||
onChange={(e) => setAspectRatio(e.target.value)}
|
||||
<Label htmlFor="lab-prompt-input" className={labelStyles}>
|
||||
Prompt
|
||||
</Label>
|
||||
<Textarea
|
||||
id="lab-prompt-input"
|
||||
value={prompt}
|
||||
onChange={(e) => setPrompt(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder="Describe the image you want to generate..."
|
||||
disabled={generating}
|
||||
className="w-full px-3 py-2 text-sm bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
rows={4}
|
||||
className={`mt-1.5 ${textareaStyles}`}
|
||||
aria-label="Image generation prompt"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Options Row */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-2">
|
||||
{/* Aspect Ratio */}
|
||||
<div>
|
||||
<Label htmlFor="lab-aspect-ratio" className={labelStyles}>
|
||||
Aspect Ratio
|
||||
</Label>
|
||||
<Select value={aspectRatio} onValueChange={setAspectRatio} disabled={generating}>
|
||||
<SelectTrigger id="lab-aspect-ratio" className={`mt-1.5 ${selectTriggerStyles}`}>
|
||||
<SelectValue placeholder="Select ratio" />
|
||||
</SelectTrigger>
|
||||
<SelectContent className={selectContentStyles}>
|
||||
<SelectItem value="1:1" className={selectItemStyles}>Square (1:1)</SelectItem>
|
||||
<SelectItem value="3:4" className={selectItemStyles}>Portrait (3:4)</SelectItem>
|
||||
<SelectItem value="4:3" className={selectItemStyles}>Landscape (4:3)</SelectItem>
|
||||
<SelectItem value="9:16" className={selectItemStyles}>Vertical (9:16)</SelectItem>
|
||||
<SelectItem value="16:9" className={selectItemStyles}>Widescreen (16:9)</SelectItem>
|
||||
<SelectItem value="21:9" className={selectItemStyles}>Ultrawide (21:9)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Template */}
|
||||
<div>
|
||||
<Label htmlFor="lab-template" className={labelStyles}>
|
||||
Style Template
|
||||
</Label>
|
||||
<Select value={template} onValueChange={setTemplate} disabled={generating}>
|
||||
<SelectTrigger id="lab-template" className={`mt-1.5 ${selectTriggerStyles}`}>
|
||||
<SelectValue placeholder="Select style" />
|
||||
</SelectTrigger>
|
||||
<SelectContent className={selectContentStyles}>
|
||||
<SelectItem value="photorealistic" className={selectItemStyles}>Photorealistic</SelectItem>
|
||||
<SelectItem value="illustration" className={selectItemStyles}>Illustration</SelectItem>
|
||||
<SelectItem value="minimalist" className={selectItemStyles}>Minimalist</SelectItem>
|
||||
<SelectItem value="sticker" className={selectItemStyles}>Sticker</SelectItem>
|
||||
<SelectItem value="product" className={selectItemStyles}>Product</SelectItem>
|
||||
<SelectItem value="comic" className={selectItemStyles}>Comic</SelectItem>
|
||||
<SelectItem value="general" className={selectItemStyles}>General</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Advanced Options Button */}
|
||||
<div>
|
||||
<Label className={labelStyles}>Advanced</Label>
|
||||
<Button
|
||||
variant="outline"
|
||||
disabled={generating}
|
||||
className={`mt-1.5 w-full ${selectTriggerStyles} justify-center`}
|
||||
aria-label="Advanced options"
|
||||
>
|
||||
<Settings className="w-4 h-4" />
|
||||
<span>Configure</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Submit Button Row */}
|
||||
<div className="flex items-center justify-between gap-3 pt-3 border-t border-slate-700/50">
|
||||
<div className="text-xs text-gray-500">
|
||||
{generating ? (
|
||||
<span className="flex items-center gap-1.5 text-purple-400">
|
||||
<Loader2 className="w-3.5 h-3.5 animate-spin" />
|
||||
Generating...
|
||||
</span>
|
||||
) : (
|
||||
<span className="hidden sm:inline">Ctrl+Enter to submit</span>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
onClick={handleGenerate}
|
||||
disabled={generating || !prompt.trim()}
|
||||
className="bg-gradient-to-r from-purple-600 to-cyan-600 text-white font-semibold hover:from-purple-500 hover:to-cyan-500 shadow-lg shadow-purple-900/30"
|
||||
>
|
||||
<option value="1:1">Square (1:1)</option>
|
||||
<option value="3:4">Portrait (3:4)</option>
|
||||
<option value="4:3">Landscape (4:3)</option>
|
||||
<option value="9:16">Vertical (9:16)</option>
|
||||
<option value="16:9">Widescreen (16:9)</option>
|
||||
<option value="21:9">Ultrawide (21:9)</option>
|
||||
</select>
|
||||
<Sparkles className="w-4 h-4" />
|
||||
{generating ? 'Generating...' : 'Generate'}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Template */}
|
||||
<div>
|
||||
<label htmlFor="lab-template" className="block text-xs font-medium text-gray-400 mb-1.5">
|
||||
Style Template
|
||||
</label>
|
||||
<select
|
||||
id="lab-template"
|
||||
value={template}
|
||||
onChange={(e) => setTemplate(e.target.value)}
|
||||
disabled={generating}
|
||||
className="w-full px-3 py-2 text-sm bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<option value="photorealistic">Photorealistic</option>
|
||||
<option value="illustration">Illustration</option>
|
||||
<option value="minimalist">Minimalist</option>
|
||||
<option value="sticker">Sticker</option>
|
||||
<option value="product">Product</option>
|
||||
<option value="comic">Comic</option>
|
||||
<option value="general">General</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Advanced Options Button */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-400 mb-1.5">
|
||||
Advanced Options
|
||||
</label>
|
||||
<button
|
||||
disabled={generating}
|
||||
className="w-full px-3 py-2 text-sm bg-slate-800 border border-slate-700 rounded-lg text-gray-400 hover:text-white hover:bg-slate-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
||||
aria-label="Advanced options"
|
||||
>
|
||||
<span>⚙️</span>
|
||||
<span>Configure</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Submit Button Row */}
|
||||
<div className="flex items-center justify-between gap-4 flex-wrap pt-2 border-t border-slate-700/50">
|
||||
<div className="text-sm text-gray-500">
|
||||
{generating ? (
|
||||
<span className="flex items-center gap-2">
|
||||
<span className="w-2 h-2 bg-purple-500 rounded-full animate-pulse"></span>
|
||||
Generating...
|
||||
</span>
|
||||
) : (
|
||||
'Press Ctrl+Enter to submit'
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
onClick={handleGenerate}
|
||||
disabled={generating || !prompt.trim()}
|
||||
className="px-6 py-2.5 rounded-lg bg-gradient-to-r from-purple-600 to-cyan-600 text-white font-semibold hover:from-purple-500 hover:to-cyan-500 transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-purple-900/30 focus:ring-2 focus:ring-purple-500"
|
||||
>
|
||||
{generating ? 'Generating...' : 'Generate Images'}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Results Area Placeholder */}
|
||||
<section className="space-y-6" aria-label="Generated Results">
|
||||
{/* Results Area */}
|
||||
<section className="space-y-3" aria-label="Generated Results">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-xl md:text-2xl font-bold text-white">Results</h2>
|
||||
<button className="text-sm text-gray-500 hover:text-gray-300 transition-colors">
|
||||
Clear All
|
||||
</button>
|
||||
<h2 className="text-sm font-semibold text-white">Results</h2>
|
||||
<Button variant="ghost" size="sm" className="h-auto py-1 text-xs text-gray-500 hover:text-gray-300 hover:bg-transparent">
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
Clear
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Empty State */}
|
||||
<div className="p-12 bg-slate-900/50 backdrop-blur-sm border border-slate-700 rounded-2xl text-center">
|
||||
<div className="mb-4 text-5xl">🎨</div>
|
||||
<h3 className="text-lg font-semibold text-white mb-2">No results yet</h3>
|
||||
<p className="text-gray-400 text-sm">
|
||||
Generate your first image to see results here
|
||||
</p>
|
||||
</div>
|
||||
{!generating && (
|
||||
<div className="p-6 bg-slate-900/50 backdrop-blur-sm border border-slate-700 rounded-lg text-center">
|
||||
<div className="w-12 h-12 mx-auto mb-3 flex items-center justify-center bg-slate-800 rounded-lg">
|
||||
<ImageOff className="w-6 h-6 text-gray-500" />
|
||||
</div>
|
||||
<h3 className="text-sm font-medium text-white mb-1">No results yet</h3>
|
||||
<p className="text-xs text-gray-400">
|
||||
Generated images will appear here
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Result Cards Placeholder (would appear after generation) */}
|
||||
{/* Loading State */}
|
||||
{generating && (
|
||||
<div className="p-6 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-2xl animate-pulse">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="p-4 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-lg animate-pulse">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
|
||||
<div className="aspect-square bg-slate-800 rounded-lg"></div>
|
||||
<div className="aspect-square bg-slate-800 rounded-lg"></div>
|
||||
<div className="aspect-square bg-slate-800 rounded-lg hidden xl:block"></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* Additional Form Sections for Scroll Testing */}
|
||||
<Card className={cardStyles}>
|
||||
<CardHeader className="p-0 px-4 pb-3">
|
||||
<CardTitle className="flex items-center gap-2 text-sm font-semibold text-white">
|
||||
<Wand2 className="w-4 h-4 text-purple-400" />
|
||||
Style Refinement
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0 px-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<Label className={labelStyles}>Color Palette</Label>
|
||||
<Select defaultValue="vibrant">
|
||||
<SelectTrigger className={`mt-1.5 ${selectTriggerStyles}`}>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent className={selectContentStyles}>
|
||||
<SelectItem value="vibrant" className={selectItemStyles}>Vibrant</SelectItem>
|
||||
<SelectItem value="muted" className={selectItemStyles}>Muted</SelectItem>
|
||||
<SelectItem value="monochrome" className={selectItemStyles}>Monochrome</SelectItem>
|
||||
<SelectItem value="pastel" className={selectItemStyles}>Pastel</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label className={labelStyles}>Lighting</Label>
|
||||
<Select defaultValue="natural">
|
||||
<SelectTrigger className={`mt-1.5 ${selectTriggerStyles}`}>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent className={selectContentStyles}>
|
||||
<SelectItem value="natural" className={selectItemStyles}>Natural</SelectItem>
|
||||
<SelectItem value="studio" className={selectItemStyles}>Studio</SelectItem>
|
||||
<SelectItem value="dramatic" className={selectItemStyles}>Dramatic</SelectItem>
|
||||
<SelectItem value="soft" className={selectItemStyles}>Soft</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label className={labelStyles}>Mood</Label>
|
||||
<Select defaultValue="neutral">
|
||||
<SelectTrigger className={`mt-1.5 ${selectTriggerStyles}`}>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent className={selectContentStyles}>
|
||||
<SelectItem value="neutral" className={selectItemStyles}>Neutral</SelectItem>
|
||||
<SelectItem value="happy" className={selectItemStyles}>Happy</SelectItem>
|
||||
<SelectItem value="mysterious" className={selectItemStyles}>Mysterious</SelectItem>
|
||||
<SelectItem value="energetic" className={selectItemStyles}>Energetic</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label className={labelStyles}>Detail Level</Label>
|
||||
<Select defaultValue="high">
|
||||
<SelectTrigger className={`mt-1.5 ${selectTriggerStyles}`}>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent className={selectContentStyles}>
|
||||
<SelectItem value="high" className={selectItemStyles}>High</SelectItem>
|
||||
<SelectItem value="medium" className={selectItemStyles}>Medium</SelectItem>
|
||||
<SelectItem value="low" className={selectItemStyles}>Low</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className={cardStyles}>
|
||||
<CardHeader className="p-0 px-4 pb-3">
|
||||
<CardTitle className="flex items-center gap-2 text-sm font-semibold text-white">
|
||||
<Palette className="w-4 h-4 text-purple-400" />
|
||||
Color Controls
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0 px-4 space-y-3">
|
||||
<div>
|
||||
<Label className={labelStyles}>Primary Color</Label>
|
||||
<Input type="text" placeholder="#8B5CF6" className={`mt-1.5 ${inputStyles}`} />
|
||||
</div>
|
||||
<div>
|
||||
<Label className={labelStyles}>Secondary Color</Label>
|
||||
<Input type="text" placeholder="#06B6D4" className={`mt-1.5 ${inputStyles}`} />
|
||||
</div>
|
||||
<div>
|
||||
<Label className={labelStyles}>Background Hint</Label>
|
||||
<Input type="text" placeholder="e.g., gradient, solid, transparent" className={`mt-1.5 ${inputStyles}`} />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className={cardStyles}>
|
||||
<CardHeader className="p-0 px-4 pb-3">
|
||||
<CardTitle className="flex items-center gap-2 text-sm font-semibold text-white">
|
||||
<Image className="w-4 h-4 text-purple-400" />
|
||||
Reference Images
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0 px-4">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
{[1, 2, 3, 4].map((i) => (
|
||||
<div key={i} className="aspect-square bg-slate-800 border border-slate-700 border-dashed rounded-lg flex items-center justify-center">
|
||||
<span className="text-xs text-gray-500">Drop image</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="mt-2 text-xs text-gray-500">Upload up to 4 reference images to guide the generation</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className={cardStyles}>
|
||||
<CardHeader className="p-0 px-4 pb-3">
|
||||
<CardTitle className="flex items-center gap-2 text-sm font-semibold text-white">
|
||||
<Layers className="w-4 h-4 text-purple-400" />
|
||||
Advanced Parameters
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0 px-4 space-y-3">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
|
||||
<div>
|
||||
<Label className={labelStyles}>Guidance Scale</Label>
|
||||
<Input type="number" defaultValue={7.5} step={0.5} min={1} max={20} className={`mt-1.5 ${inputStyles}`} />
|
||||
</div>
|
||||
<div>
|
||||
<Label className={labelStyles}>Steps</Label>
|
||||
<Input type="number" defaultValue={30} step={5} min={10} max={100} className={`mt-1.5 ${inputStyles}`} />
|
||||
</div>
|
||||
<div>
|
||||
<Label className={labelStyles}>Seed</Label>
|
||||
<Input type="number" placeholder="Random" className={`mt-1.5 ${inputStyles}`} />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label className={labelStyles}>Negative Prompt</Label>
|
||||
<Textarea rows={2} placeholder="Elements to avoid in the generation..." className={`mt-1.5 ${textareaStyles}`} />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className={cardStyles}>
|
||||
<CardHeader className="p-0 px-4 pb-3">
|
||||
<CardTitle className="flex items-center gap-2 text-sm font-semibold text-white">
|
||||
<Settings className="w-4 h-4 text-purple-400" />
|
||||
Output Settings
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0 px-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<Label className={labelStyles}>Output Format</Label>
|
||||
<Select defaultValue="png">
|
||||
<SelectTrigger className={`mt-1.5 ${selectTriggerStyles}`}>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent className={selectContentStyles}>
|
||||
<SelectItem value="png" className={selectItemStyles}>PNG</SelectItem>
|
||||
<SelectItem value="jpeg" className={selectItemStyles}>JPEG</SelectItem>
|
||||
<SelectItem value="webp" className={selectItemStyles}>WebP</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label className={labelStyles}>Quality</Label>
|
||||
<Select defaultValue="max">
|
||||
<SelectTrigger className={`mt-1.5 ${selectTriggerStyles}`}>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent className={selectContentStyles}>
|
||||
<SelectItem value="max" className={selectItemStyles}>Maximum (100%)</SelectItem>
|
||||
<SelectItem value="high" className={selectItemStyles}>High (90%)</SelectItem>
|
||||
<SelectItem value="medium" className={selectItemStyles}>Medium (80%)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label className={labelStyles}>Number of Images</Label>
|
||||
<Select defaultValue="1">
|
||||
<SelectTrigger className={`mt-1.5 ${selectTriggerStyles}`}>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent className={selectContentStyles}>
|
||||
<SelectItem value="1" className={selectItemStyles}>1</SelectItem>
|
||||
<SelectItem value="2" className={selectItemStyles}>2</SelectItem>
|
||||
<SelectItem value="4" className={selectItemStyles}>4</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label className={labelStyles}>Auto-save to</Label>
|
||||
<Select defaultValue="default">
|
||||
<SelectTrigger className={`mt-1.5 ${selectTriggerStyles}`}>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent className={selectContentStyles}>
|
||||
<SelectItem value="default" className={selectItemStyles}>Default folder</SelectItem>
|
||||
<SelectItem value="favorites" className={selectItemStyles}>Favorites</SelectItem>
|
||||
<SelectItem value="none" className={selectItemStyles}>Don't save</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,10 +5,12 @@
|
|||
*
|
||||
* Simple 1-line footer for lab section with contextual navigation links.
|
||||
* Displays copyright on left and contextual docs/API links on right.
|
||||
* Uses slate color palette (blue-tinted gray).
|
||||
*/
|
||||
|
||||
import { usePathname } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { BookOpen, Code } from 'lucide-react';
|
||||
|
||||
type LinkMapEntry = {
|
||||
docs: string;
|
||||
|
|
@ -32,27 +34,29 @@ export const LabFooter = () => {
|
|||
|
||||
return (
|
||||
<footer
|
||||
className="border-t border-white/10 bg-slate-950/50 backdrop-blur-sm"
|
||||
className="border-t border-slate-800 bg-slate-950/80 backdrop-blur-sm"
|
||||
role="contentinfo"
|
||||
>
|
||||
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 md:gap-0 px-6 py-4 md:h-14">
|
||||
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-3 md:gap-0 px-4 py-3 md:h-12">
|
||||
{/* Left: Copyright */}
|
||||
<p className="text-sm text-gray-500 order-2 md:order-1">
|
||||
<p className="text-xs text-slate-500 order-2 md:order-1">
|
||||
© 2025 Banatie. Built for builders who create.
|
||||
</p>
|
||||
|
||||
{/* Right: Contextual Links */}
|
||||
<nav aria-label="Footer navigation" className="flex items-center gap-6 order-1 md:order-2">
|
||||
<nav aria-label="Footer navigation" className="flex items-center gap-4 order-1 md:order-2">
|
||||
<Link
|
||||
href={links.docs}
|
||||
className="text-sm text-gray-500 hover:text-white transition-colors min-h-[44px] flex items-center"
|
||||
className="text-xs text-slate-500 hover:text-white transition-colors flex items-center gap-1.5"
|
||||
>
|
||||
<BookOpen className="w-3.5 h-3.5" />
|
||||
Documentation
|
||||
</Link>
|
||||
<Link
|
||||
href={links.api}
|
||||
className="text-sm text-gray-500 hover:text-white transition-colors min-h-[44px] flex items-center"
|
||||
className="text-xs text-slate-500 hover:text-white transition-colors flex items-center gap-1.5"
|
||||
>
|
||||
<Code className="w-3.5 h-3.5" />
|
||||
API Reference
|
||||
</Link>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -61,12 +61,12 @@ export const LabLayout = ({ children }: LabLayoutProps) => {
|
|||
return (
|
||||
<ThreeColumnLayout
|
||||
left={
|
||||
<div className={`border-r border-white/10 bg-slate-950/50 backdrop-blur-sm ${containerHeight} overflow-y-auto transition-all duration-300`}>
|
||||
<div className={`border-r border-slate-800 bg-slate-950 ${containerHeight} overflow-y-auto transition-all duration-300`}>
|
||||
<LabSidebar />
|
||||
</div>
|
||||
}
|
||||
center={
|
||||
<div className={`flex flex-col ${containerHeight} transition-all duration-300`}>
|
||||
<div className={`flex flex-col ${containerHeight} bg-[#0f121d] transition-all duration-300`}>
|
||||
<div ref={contentRef} className="flex-1 overflow-y-auto min-h-0">{children}</div>
|
||||
<LabFooter />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,22 +4,26 @@
|
|||
* Lab Sidebar - Filter Panel
|
||||
*
|
||||
* Narrow left sidebar for filtering lab content.
|
||||
* Matches DocsSidebar visual style with collapsible filter sections.
|
||||
* Clean, work-focused design with Lucide icons and slate palette.
|
||||
* Uses Shadcn UI Collapsible for expandable sections.
|
||||
*
|
||||
* Features:
|
||||
* - Multiple filter groups (Status, Date Range, Source Type)
|
||||
* - Collapsible sections
|
||||
* - Checkbox/radio button controls
|
||||
* - Clean, minimal design
|
||||
* - Collapsible sections with Shadcn UI and Lucide icons
|
||||
* - Checkbox/radio button controls (Shadcn components)
|
||||
* - Slate color palette (blue-tinted gray)
|
||||
*/
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useState, type ElementType } from 'react';
|
||||
import { Activity, Calendar, Palette, ChevronRight, RotateCcw, Layers, Sliders, Tag, Folder, Star, Clock } from 'lucide-react';
|
||||
import { FilterPlaceholder } from '@/components/lab/FilterPlaceholder';
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
type FilterGroupProps = {
|
||||
id: string;
|
||||
label: string;
|
||||
icon: string;
|
||||
icon: ElementType;
|
||||
options: Array<{ id: string; label: string; count?: number }>;
|
||||
multiSelect?: boolean;
|
||||
};
|
||||
|
|
@ -28,7 +32,7 @@ const filterGroups: FilterGroupProps[] = [
|
|||
{
|
||||
id: 'status',
|
||||
label: 'Status',
|
||||
icon: '📊',
|
||||
icon: Activity,
|
||||
options: [
|
||||
{ id: 'all', label: 'All', count: 127 },
|
||||
{ id: 'completed', label: 'Completed', count: 98 },
|
||||
|
|
@ -40,7 +44,7 @@ const filterGroups: FilterGroupProps[] = [
|
|||
{
|
||||
id: 'date',
|
||||
label: 'Date Range',
|
||||
icon: '📅',
|
||||
icon: Calendar,
|
||||
options: [
|
||||
{ id: 'today', label: 'Today', count: 12 },
|
||||
{ id: 'week', label: 'Last 7 days', count: 45 },
|
||||
|
|
@ -52,7 +56,7 @@ const filterGroups: FilterGroupProps[] = [
|
|||
{
|
||||
id: 'source',
|
||||
label: 'Source Type',
|
||||
icon: '🎨',
|
||||
icon: Palette,
|
||||
options: [
|
||||
{ id: 'text', label: 'Text-to-Image', count: 78 },
|
||||
{ id: 'upload', label: 'Uploads', count: 34 },
|
||||
|
|
@ -60,6 +64,75 @@ const filterGroups: FilterGroupProps[] = [
|
|||
],
|
||||
multiSelect: true,
|
||||
},
|
||||
{
|
||||
id: 'model',
|
||||
label: 'Model',
|
||||
icon: Layers,
|
||||
options: [
|
||||
{ id: 'gemini-2', label: 'Gemini 2.0', count: 45 },
|
||||
{ id: 'gemini-1.5', label: 'Gemini 1.5', count: 62 },
|
||||
{ id: 'imagen-3', label: 'Imagen 3', count: 20 },
|
||||
],
|
||||
multiSelect: false,
|
||||
},
|
||||
{
|
||||
id: 'quality',
|
||||
label: 'Quality',
|
||||
icon: Sliders,
|
||||
options: [
|
||||
{ id: 'high', label: 'High (1024px)', count: 34 },
|
||||
{ id: 'medium', label: 'Medium (768px)', count: 56 },
|
||||
{ id: 'low', label: 'Low (512px)', count: 37 },
|
||||
],
|
||||
multiSelect: false,
|
||||
},
|
||||
{
|
||||
id: 'tags',
|
||||
label: 'Tags',
|
||||
icon: Tag,
|
||||
options: [
|
||||
{ id: 'portrait', label: 'Portrait', count: 23 },
|
||||
{ id: 'landscape', label: 'Landscape', count: 31 },
|
||||
{ id: 'product', label: 'Product', count: 18 },
|
||||
{ id: 'abstract', label: 'Abstract', count: 12 },
|
||||
{ id: 'architecture', label: 'Architecture', count: 9 },
|
||||
],
|
||||
multiSelect: true,
|
||||
},
|
||||
{
|
||||
id: 'folder',
|
||||
label: 'Folder',
|
||||
icon: Folder,
|
||||
options: [
|
||||
{ id: 'default', label: 'Default', count: 89 },
|
||||
{ id: 'favorites', label: 'Favorites', count: 15 },
|
||||
{ id: 'archive', label: 'Archive', count: 23 },
|
||||
],
|
||||
multiSelect: false,
|
||||
},
|
||||
{
|
||||
id: 'rating',
|
||||
label: 'Rating',
|
||||
icon: Star,
|
||||
options: [
|
||||
{ id: '5star', label: '5 Stars', count: 12 },
|
||||
{ id: '4star', label: '4 Stars', count: 28 },
|
||||
{ id: '3star', label: '3 Stars', count: 45 },
|
||||
{ id: 'unrated', label: 'Unrated', count: 42 },
|
||||
],
|
||||
multiSelect: true,
|
||||
},
|
||||
{
|
||||
id: 'duration',
|
||||
label: 'Generation Time',
|
||||
icon: Clock,
|
||||
options: [
|
||||
{ id: 'fast', label: '< 5 seconds', count: 67 },
|
||||
{ id: 'medium', label: '5-15 seconds', count: 43 },
|
||||
{ id: 'slow', label: '> 15 seconds', count: 17 },
|
||||
],
|
||||
multiSelect: false,
|
||||
},
|
||||
];
|
||||
|
||||
export const LabSidebar = () => {
|
||||
|
|
@ -74,61 +147,64 @@ export const LabSidebar = () => {
|
|||
const isExpanded = (id: string) => expandedSections.includes(id);
|
||||
|
||||
return (
|
||||
<aside className="h-full bg-slate-950 border-r border-white/10" aria-label="Lab filters">
|
||||
<aside className="h-full bg-slate-950 border-r border-slate-800" aria-label="Lab filters">
|
||||
{/* Header */}
|
||||
<div className="p-6 border-b border-slate-800">
|
||||
<h2 className="text-lg font-semibold text-white">Filters</h2>
|
||||
<p className="text-xs text-gray-500 mt-1">Refine your results</p>
|
||||
<div className="p-4 border-b border-slate-800">
|
||||
<h2 className="text-sm font-semibold text-white">Filters</h2>
|
||||
<p className="text-xs text-slate-500 mt-0.5">Refine your results</p>
|
||||
</div>
|
||||
|
||||
{/* Filter Groups */}
|
||||
<div className="p-4 space-y-4">
|
||||
<div className="p-3 space-y-3">
|
||||
{filterGroups.map((group) => {
|
||||
const expanded = isExpanded(group.id);
|
||||
const Icon = group.icon;
|
||||
|
||||
return (
|
||||
<div key={group.id} className="border-b border-slate-800 pb-4 last:border-b-0">
|
||||
<Collapsible
|
||||
key={group.id}
|
||||
open={expanded}
|
||||
onOpenChange={() => toggleSection(group.id)}
|
||||
className="border-b border-slate-800 pb-3 last:border-b-0"
|
||||
>
|
||||
{/* Section Header */}
|
||||
<button
|
||||
onClick={() => toggleSection(group.id)}
|
||||
className="w-full flex items-center justify-between px-2 py-2 rounded-lg text-sm transition-colors text-gray-400 hover:text-white hover:bg-white/5"
|
||||
aria-expanded={expanded}
|
||||
>
|
||||
<span className="flex items-center gap-2">
|
||||
<span className="text-base">{group.icon}</span>
|
||||
<span className="font-medium">{group.label}</span>
|
||||
</span>
|
||||
<svg
|
||||
className={`w-4 h-4 transition-transform ${expanded ? 'rotate-90' : ''}`}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
<CollapsibleTrigger asChild>
|
||||
<button
|
||||
className="w-full flex items-center justify-between px-2 py-1.5 rounded-lg text-sm transition-colors text-slate-400 hover:text-white hover:bg-slate-800/50"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
<span className="flex items-center gap-2">
|
||||
<Icon className="w-4 h-4" />
|
||||
<span className="font-medium">{group.label}</span>
|
||||
</span>
|
||||
<ChevronRight
|
||||
className={`w-4 h-4 transition-transform duration-200 ${expanded ? 'rotate-90' : ''}`}
|
||||
/>
|
||||
</button>
|
||||
</CollapsibleTrigger>
|
||||
|
||||
{/* Filter Options */}
|
||||
{expanded && (
|
||||
<CollapsibleContent>
|
||||
<FilterPlaceholder
|
||||
options={group.options}
|
||||
multiSelect={group.multiSelect}
|
||||
groupId={group.id}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Bottom Actions */}
|
||||
<div className="mt-auto p-4 border-t border-slate-800">
|
||||
<button
|
||||
className="w-full px-3 py-2 text-sm text-gray-500 hover:text-gray-300 transition-colors rounded-lg hover:bg-white/5"
|
||||
<div className="mt-auto p-3 border-t border-slate-800">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full flex items-center justify-center gap-1.5 px-3 py-2 text-sm text-slate-500 hover:text-slate-300 hover:bg-slate-800/50"
|
||||
aria-label="Reset all filters"
|
||||
>
|
||||
<RotateCcw className="w-3.5 h-3.5" />
|
||||
Reset Filters
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,60 @@
|
|||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
||||
destructive:
|
||||
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||
outline:
|
||||
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||
ghost:
|
||||
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
||||
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
||||
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
||||
icon: "size-9",
|
||||
"icon-sm": "size-8",
|
||||
"icon-lg": "size-10",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Button({
|
||||
className,
|
||||
variant,
|
||||
size,
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"button"> &
|
||||
VariantProps<typeof buttonVariants> & {
|
||||
asChild?: boolean
|
||||
}) {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="button"
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Button, buttonVariants }
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Card({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card"
|
||||
className={cn(
|
||||
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-header"
|
||||
className={cn(
|
||||
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-title"
|
||||
className={cn("leading-none font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-action"
|
||||
className={cn(
|
||||
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-content"
|
||||
className={cn("px-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-footer"
|
||||
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardFooter,
|
||||
CardTitle,
|
||||
CardAction,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
|
||||
import { CheckIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Checkbox({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
|
||||
return (
|
||||
<CheckboxPrimitive.Root
|
||||
data-slot="checkbox"
|
||||
className={cn(
|
||||
"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<CheckboxPrimitive.Indicator
|
||||
data-slot="checkbox-indicator"
|
||||
className="grid place-content-center text-current transition-none"
|
||||
>
|
||||
<CheckIcon className="size-3.5" />
|
||||
</CheckboxPrimitive.Indicator>
|
||||
</CheckboxPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
export { Checkbox }
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
"use client"
|
||||
|
||||
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
|
||||
|
||||
function Collapsible({
|
||||
...props
|
||||
}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
|
||||
return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
|
||||
}
|
||||
|
||||
function CollapsibleTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
|
||||
return (
|
||||
<CollapsiblePrimitive.CollapsibleTrigger
|
||||
data-slot="collapsible-trigger"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CollapsibleContent({
|
||||
...props
|
||||
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
|
||||
return (
|
||||
<CollapsiblePrimitive.CollapsibleContent
|
||||
data-slot="collapsible-content"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Collapsible, CollapsibleTrigger, CollapsibleContent }
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
data-slot="input"
|
||||
className={cn(
|
||||
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
||||
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Input }
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as LabelPrimitive from "@radix-ui/react-label"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Label({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
|
||||
return (
|
||||
<LabelPrimitive.Root
|
||||
data-slot="label"
|
||||
className={cn(
|
||||
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Label }
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
|
||||
import { CircleIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function RadioGroup({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
|
||||
return (
|
||||
<RadioGroupPrimitive.Root
|
||||
data-slot="radio-group"
|
||||
className={cn("grid gap-3", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function RadioGroupItem({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
|
||||
return (
|
||||
<RadioGroupPrimitive.Item
|
||||
data-slot="radio-group-item"
|
||||
className={cn(
|
||||
"border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<RadioGroupPrimitive.Indicator
|
||||
data-slot="radio-group-indicator"
|
||||
className="relative flex items-center justify-center"
|
||||
>
|
||||
<CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
|
||||
</RadioGroupPrimitive.Indicator>
|
||||
</RadioGroupPrimitive.Item>
|
||||
)
|
||||
}
|
||||
|
||||
export { RadioGroup, RadioGroupItem }
|
||||
|
|
@ -0,0 +1,187 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as SelectPrimitive from "@radix-ui/react-select"
|
||||
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Select({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
|
||||
return <SelectPrimitive.Root data-slot="select" {...props} />
|
||||
}
|
||||
|
||||
function SelectGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
|
||||
return <SelectPrimitive.Group data-slot="select-group" {...props} />
|
||||
}
|
||||
|
||||
function SelectValue({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
|
||||
return <SelectPrimitive.Value data-slot="select-value" {...props} />
|
||||
}
|
||||
|
||||
function SelectTrigger({
|
||||
className,
|
||||
size = "default",
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
|
||||
size?: "sm" | "default"
|
||||
}) {
|
||||
return (
|
||||
<SelectPrimitive.Trigger
|
||||
data-slot="select-trigger"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<SelectPrimitive.Icon asChild>
|
||||
<ChevronDownIcon className="size-4 opacity-50" />
|
||||
</SelectPrimitive.Icon>
|
||||
</SelectPrimitive.Trigger>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectContent({
|
||||
className,
|
||||
children,
|
||||
position = "popper",
|
||||
align = "center",
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
|
||||
return (
|
||||
<SelectPrimitive.Portal>
|
||||
<SelectPrimitive.Content
|
||||
data-slot="select-content"
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
|
||||
position === "popper" &&
|
||||
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
||||
className
|
||||
)}
|
||||
position={position}
|
||||
align={align}
|
||||
{...props}
|
||||
>
|
||||
<SelectScrollUpButton />
|
||||
<SelectPrimitive.Viewport
|
||||
className={cn(
|
||||
"p-1",
|
||||
position === "popper" &&
|
||||
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</SelectPrimitive.Viewport>
|
||||
<SelectScrollDownButton />
|
||||
</SelectPrimitive.Content>
|
||||
</SelectPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectLabel({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
|
||||
return (
|
||||
<SelectPrimitive.Label
|
||||
data-slot="select-label"
|
||||
className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectItem({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
|
||||
return (
|
||||
<SelectPrimitive.Item
|
||||
data-slot="select-item"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute right-2 flex size-3.5 items-center justify-center">
|
||||
<SelectPrimitive.ItemIndicator>
|
||||
<CheckIcon className="size-4" />
|
||||
</SelectPrimitive.ItemIndicator>
|
||||
</span>
|
||||
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
||||
</SelectPrimitive.Item>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectSeparator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
|
||||
return (
|
||||
<SelectPrimitive.Separator
|
||||
data-slot="select-separator"
|
||||
className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectScrollUpButton({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
|
||||
return (
|
||||
<SelectPrimitive.ScrollUpButton
|
||||
data-slot="select-scroll-up-button"
|
||||
className={cn(
|
||||
"flex cursor-default items-center justify-center py-1",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronUpIcon className="size-4" />
|
||||
</SelectPrimitive.ScrollUpButton>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectScrollDownButton({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
|
||||
return (
|
||||
<SelectPrimitive.ScrollDownButton
|
||||
data-slot="select-scroll-down-button"
|
||||
className={cn(
|
||||
"flex cursor-default items-center justify-center py-1",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronDownIcon className="size-4" />
|
||||
</SelectPrimitive.ScrollDownButton>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectScrollDownButton,
|
||||
SelectScrollUpButton,
|
||||
SelectSeparator,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
|
||||
return (
|
||||
<textarea
|
||||
data-slot="textarea"
|
||||
className={cn(
|
||||
"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Textarea }
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import { clsx, type ClassValue } from "clsx"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
843
pnpm-lock.yaml
843
pnpm-lock.yaml
|
|
@ -196,6 +196,33 @@ importers:
|
|||
'@banatie/database':
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/database
|
||||
'@radix-ui/react-checkbox':
|
||||
specifier: ^1.3.3
|
||||
version: 1.3.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
'@radix-ui/react-collapsible':
|
||||
specifier: ^1.1.12
|
||||
version: 1.1.12(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
'@radix-ui/react-label':
|
||||
specifier: ^2.1.8
|
||||
version: 2.1.8(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
'@radix-ui/react-radio-group':
|
||||
specifier: ^1.3.8
|
||||
version: 1.3.8(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
'@radix-ui/react-select':
|
||||
specifier: ^2.2.6
|
||||
version: 2.2.6(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
'@radix-ui/react-slot':
|
||||
specifier: ^1.2.4
|
||||
version: 1.2.4(@types/react@19.1.16)(react@19.1.0)
|
||||
class-variance-authority:
|
||||
specifier: ^0.7.1
|
||||
version: 0.7.1
|
||||
clsx:
|
||||
specifier: ^2.1.1
|
||||
version: 2.1.1
|
||||
lucide-react:
|
||||
specifier: ^0.400.0
|
||||
version: 0.400.0(react@19.1.0)
|
||||
next:
|
||||
specifier: 15.5.4
|
||||
version: 15.5.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
|
|
@ -205,6 +232,9 @@ importers:
|
|||
react-dom:
|
||||
specifier: 19.1.0
|
||||
version: 19.1.0(react@19.1.0)
|
||||
tailwind-merge:
|
||||
specifier: ^3.4.0
|
||||
version: 3.4.0
|
||||
devDependencies:
|
||||
'@tailwindcss/postcss':
|
||||
specifier: ^4
|
||||
|
|
@ -221,6 +251,9 @@ importers:
|
|||
tailwindcss:
|
||||
specifier: ^4
|
||||
version: 4.1.13
|
||||
tw-animate-css:
|
||||
specifier: ^1.4.0
|
||||
version: 1.4.0
|
||||
typescript:
|
||||
specifier: ^5
|
||||
version: 5.9.2
|
||||
|
|
@ -1410,6 +1443,358 @@ packages:
|
|||
'@polka/url@1.0.0-next.29':
|
||||
resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
|
||||
|
||||
'@radix-ui/number@1.1.1':
|
||||
resolution: {integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==}
|
||||
|
||||
'@radix-ui/primitive@1.1.3':
|
||||
resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==}
|
||||
|
||||
'@radix-ui/react-arrow@1.1.7':
|
||||
resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
'@types/react-dom': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-checkbox@1.3.3':
|
||||
resolution: {integrity: sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
'@types/react-dom': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-collapsible@1.1.12':
|
||||
resolution: {integrity: sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
'@types/react-dom': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-collection@1.1.7':
|
||||
resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
'@types/react-dom': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-compose-refs@1.1.2':
|
||||
resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-context@1.1.2':
|
||||
resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-direction@1.1.1':
|
||||
resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-dismissable-layer@1.1.11':
|
||||
resolution: {integrity: sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
'@types/react-dom': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-focus-guards@1.1.3':
|
||||
resolution: {integrity: sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-focus-scope@1.1.7':
|
||||
resolution: {integrity: sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
'@types/react-dom': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-id@1.1.1':
|
||||
resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-label@2.1.8':
|
||||
resolution: {integrity: sha512-FmXs37I6hSBVDlO4y764TNz1rLgKwjJMQ0EGte6F3Cb3f4bIuHB/iLa/8I9VKkmOy+gNHq8rql3j686ACVV21A==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
'@types/react-dom': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-popper@1.2.8':
|
||||
resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
'@types/react-dom': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-portal@1.1.9':
|
||||
resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
'@types/react-dom': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-presence@1.1.5':
|
||||
resolution: {integrity: sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
'@types/react-dom': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-primitive@2.1.3':
|
||||
resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
'@types/react-dom': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-primitive@2.1.4':
|
||||
resolution: {integrity: sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
'@types/react-dom': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-radio-group@1.3.8':
|
||||
resolution: {integrity: sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
'@types/react-dom': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-roving-focus@1.1.11':
|
||||
resolution: {integrity: sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
'@types/react-dom': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-select@2.2.6':
|
||||
resolution: {integrity: sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
'@types/react-dom': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-slot@1.2.3':
|
||||
resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-slot@1.2.4':
|
||||
resolution: {integrity: sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-use-callback-ref@1.1.1':
|
||||
resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-use-controllable-state@1.2.2':
|
||||
resolution: {integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-use-effect-event@0.0.2':
|
||||
resolution: {integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-use-escape-keydown@1.1.1':
|
||||
resolution: {integrity: sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-use-layout-effect@1.1.1':
|
||||
resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-use-previous@1.1.1':
|
||||
resolution: {integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-use-rect@1.1.1':
|
||||
resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-use-size@1.1.1':
|
||||
resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-visually-hidden@1.2.3':
|
||||
resolution: {integrity: sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
'@types/react-dom': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/rect@1.1.1':
|
||||
resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
|
||||
|
||||
'@react-aria/focus@3.21.1':
|
||||
resolution: {integrity: sha512-hmH1IhHlcQ2lSIxmki1biWzMbGgnhdxJUM0MFfzc71Rv6YAzhlx4kX3GYn4VNcjCeb6cdPv4RZ5vunV4kgMZYQ==}
|
||||
peerDependencies:
|
||||
|
|
@ -2150,6 +2535,10 @@ packages:
|
|||
argparse@2.0.1:
|
||||
resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
|
||||
|
||||
aria-hidden@1.2.6:
|
||||
resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
|
||||
engines: {node: '>=10'}
|
||||
|
||||
aria-query@5.3.2:
|
||||
resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
|
||||
engines: {node: '>= 0.4'}
|
||||
|
|
@ -2383,6 +2772,9 @@ packages:
|
|||
cjs-module-lexer@1.4.3:
|
||||
resolution: {integrity: sha512-9z8TZaGM1pfswYeXrUpzPrkx8UnWYdhJclsiYMm6x/w5+nN+8Tf/LnAgfLGQCm59qAOxU8WwHEq2vNwF6i4j+Q==}
|
||||
|
||||
class-variance-authority@0.7.1:
|
||||
resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
|
||||
|
||||
client-only@0.0.1:
|
||||
resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
|
||||
|
||||
|
|
@ -2610,6 +3002,9 @@ packages:
|
|||
resolution: {integrity: sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==}
|
||||
engines: {node: '>=8'}
|
||||
|
||||
detect-node-es@1.1.0:
|
||||
resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
|
||||
|
||||
dezalgo@1.0.4:
|
||||
resolution: {integrity: sha512-rXSP0bf+5n0Qonsb+SVVfNfIsimO4HEtmnIpPHY8Q1UCzKlQrDMfdobr8nJOOsRgWCyMRqeSBQzmWUMq7zvVig==}
|
||||
|
||||
|
|
@ -3200,6 +3595,10 @@ packages:
|
|||
resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
|
||||
engines: {node: '>= 0.4'}
|
||||
|
||||
get-nonce@1.0.1:
|
||||
resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
|
||||
engines: {node: '>=6'}
|
||||
|
||||
get-package-type@0.1.0:
|
||||
resolution: {integrity: sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==}
|
||||
engines: {node: '>=8.0.0'}
|
||||
|
|
@ -4385,12 +4784,42 @@ packages:
|
|||
react-is@18.3.1:
|
||||
resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
|
||||
|
||||
react-remove-scroll-bar@2.3.8:
|
||||
resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
|
||||
engines: {node: '>=10'}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
|
||||
react-remove-scroll@2.7.2:
|
||||
resolution: {integrity: sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==}
|
||||
engines: {node: '>=10'}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
|
||||
react-smooth@4.0.4:
|
||||
resolution: {integrity: sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==}
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
|
||||
react-style-singleton@2.2.3:
|
||||
resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
|
||||
engines: {node: '>=10'}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
|
||||
react-transition-group@4.4.5:
|
||||
resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
|
||||
peerDependencies:
|
||||
|
|
@ -4809,6 +5238,9 @@ packages:
|
|||
tabbable@6.2.0:
|
||||
resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
|
||||
|
||||
tailwind-merge@3.4.0:
|
||||
resolution: {integrity: sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==}
|
||||
|
||||
tailwindcss@3.4.17:
|
||||
resolution: {integrity: sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==}
|
||||
engines: {node: '>=14.0.0'}
|
||||
|
|
@ -4943,6 +5375,9 @@ packages:
|
|||
engines: {node: '>=18.0.0'}
|
||||
hasBin: true
|
||||
|
||||
tw-animate-css@1.4.0:
|
||||
resolution: {integrity: sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==}
|
||||
|
||||
type-check@0.4.0:
|
||||
resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
|
||||
engines: {node: '>= 0.8.0'}
|
||||
|
|
@ -5029,6 +5464,26 @@ packages:
|
|||
uri-js@4.4.1:
|
||||
resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
|
||||
|
||||
use-callback-ref@1.3.3:
|
||||
resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
|
||||
engines: {node: '>=10'}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
|
||||
use-sidecar@1.1.3:
|
||||
resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
|
||||
engines: {node: '>=10'}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
|
||||
use-sync-external-store@1.5.0:
|
||||
resolution: {integrity: sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==}
|
||||
peerDependencies:
|
||||
|
|
@ -5776,6 +6231,12 @@ snapshots:
|
|||
react: 18.3.1
|
||||
react-dom: 18.3.1(react@18.3.1)
|
||||
|
||||
'@floating-ui/react-dom@2.1.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
|
||||
dependencies:
|
||||
'@floating-ui/dom': 1.7.4
|
||||
react: 19.1.0
|
||||
react-dom: 19.1.0(react@19.1.0)
|
||||
|
||||
'@floating-ui/react@0.26.28(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
|
||||
dependencies:
|
||||
'@floating-ui/react-dom': 2.1.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
|
|
@ -6213,6 +6674,326 @@ snapshots:
|
|||
|
||||
'@polka/url@1.0.0-next.29': {}
|
||||
|
||||
'@radix-ui/number@1.1.1': {}
|
||||
|
||||
'@radix-ui/primitive@1.1.3': {}
|
||||
|
||||
'@radix-ui/react-arrow@1.1.7(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
|
||||
dependencies:
|
||||
'@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
react: 19.1.0
|
||||
react-dom: 19.1.0(react@19.1.0)
|
||||
optionalDependencies:
|
||||
'@types/react': 19.1.16
|
||||
'@types/react-dom': 19.1.9(@types/react@19.1.16)
|
||||
|
||||
'@radix-ui/react-checkbox@1.3.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
|
||||
dependencies:
|
||||
'@radix-ui/primitive': 1.1.3
|
||||
'@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.16)(react@19.1.0)
|
||||
'@radix-ui/react-context': 1.1.2(@types/react@19.1.16)(react@19.1.0)
|
||||
'@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
'@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
'@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.16)(react@19.1.0)
|
||||
'@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.16)(react@19.1.0)
|
||||
'@radix-ui/react-use-size': 1.1.1(@types/react@19.1.16)(react@19.1.0)
|
||||
react: 19.1.0
|
||||
react-dom: 19.1.0(react@19.1.0)
|
||||
optionalDependencies:
|
||||
'@types/react': 19.1.16
|
||||
'@types/react-dom': 19.1.9(@types/react@19.1.16)
|
||||
|
||||
'@radix-ui/react-collapsible@1.1.12(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
|
||||
dependencies:
|
||||
'@radix-ui/primitive': 1.1.3
|
||||
'@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.16)(react@19.1.0)
|
||||
'@radix-ui/react-context': 1.1.2(@types/react@19.1.16)(react@19.1.0)
|
||||
'@radix-ui/react-id': 1.1.1(@types/react@19.1.16)(react@19.1.0)
|
||||
'@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
'@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
'@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.16)(react@19.1.0)
|
||||
'@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.16)(react@19.1.0)
|
||||
react: 19.1.0
|
||||
react-dom: 19.1.0(react@19.1.0)
|
||||
optionalDependencies:
|
||||
'@types/react': 19.1.16
|
||||
'@types/react-dom': 19.1.9(@types/react@19.1.16)
|
||||
|
||||
'@radix-ui/react-collection@1.1.7(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
|
||||
dependencies:
|
||||
'@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.16)(react@19.1.0)
|
||||
'@radix-ui/react-context': 1.1.2(@types/react@19.1.16)(react@19.1.0)
|
||||
'@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
'@radix-ui/react-slot': 1.2.3(@types/react@19.1.16)(react@19.1.0)
|
||||
react: 19.1.0
|
||||
react-dom: 19.1.0(react@19.1.0)
|
||||
optionalDependencies:
|
||||
'@types/react': 19.1.16
|
||||
'@types/react-dom': 19.1.9(@types/react@19.1.16)
|
||||
|
||||
'@radix-ui/react-compose-refs@1.1.2(@types/react@19.1.16)(react@19.1.0)':
|
||||
dependencies:
|
||||
react: 19.1.0
|
||||
optionalDependencies:
|
||||
'@types/react': 19.1.16
|
||||
|
||||
'@radix-ui/react-context@1.1.2(@types/react@19.1.16)(react@19.1.0)':
|
||||
dependencies:
|
||||
react: 19.1.0
|
||||
optionalDependencies:
|
||||
'@types/react': 19.1.16
|
||||
|
||||
'@radix-ui/react-direction@1.1.1(@types/react@19.1.16)(react@19.1.0)':
|
||||
dependencies:
|
||||
react: 19.1.0
|
||||
optionalDependencies:
|
||||
'@types/react': 19.1.16
|
||||
|
||||
'@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
|
||||
dependencies:
|
||||
'@radix-ui/primitive': 1.1.3
|
||||
'@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.16)(react@19.1.0)
|
||||
'@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
'@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.16)(react@19.1.0)
|
||||
'@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.1.16)(react@19.1.0)
|
||||
react: 19.1.0
|
||||
react-dom: 19.1.0(react@19.1.0)
|
||||
optionalDependencies:
|
||||
'@types/react': 19.1.16
|
||||
'@types/react-dom': 19.1.9(@types/react@19.1.16)
|
||||
|
||||
'@radix-ui/react-focus-guards@1.1.3(@types/react@19.1.16)(react@19.1.0)':
|
||||
dependencies:
|
||||
react: 19.1.0
|
||||
optionalDependencies:
|
||||
'@types/react': 19.1.16
|
||||
|
||||
'@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
|
||||
dependencies:
|
||||
'@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.16)(react@19.1.0)
|
||||
'@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
'@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.16)(react@19.1.0)
|
||||
react: 19.1.0
|
||||
react-dom: 19.1.0(react@19.1.0)
|
||||
optionalDependencies:
|
||||
'@types/react': 19.1.16
|
||||
'@types/react-dom': 19.1.9(@types/react@19.1.16)
|
||||
|
||||
'@radix-ui/react-id@1.1.1(@types/react@19.1.16)(react@19.1.0)':
|
||||
dependencies:
|
||||
'@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.16)(react@19.1.0)
|
||||
react: 19.1.0
|
||||
optionalDependencies:
|
||||
'@types/react': 19.1.16
|
||||
|
||||
'@radix-ui/react-label@2.1.8(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
|
||||
dependencies:
|
||||
'@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
react: 19.1.0
|
||||
react-dom: 19.1.0(react@19.1.0)
|
||||
optionalDependencies:
|
||||
'@types/react': 19.1.16
|
||||
'@types/react-dom': 19.1.9(@types/react@19.1.16)
|
||||
|
||||
'@radix-ui/react-popper@1.2.8(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
|
||||
dependencies:
|
||||
'@floating-ui/react-dom': 2.1.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
'@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
'@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.16)(react@19.1.0)
|
||||
'@radix-ui/react-context': 1.1.2(@types/react@19.1.16)(react@19.1.0)
|
||||
'@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
'@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.16)(react@19.1.0)
|
||||
'@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.16)(react@19.1.0)
|
||||
'@radix-ui/react-use-rect': 1.1.1(@types/react@19.1.16)(react@19.1.0)
|
||||
'@radix-ui/react-use-size': 1.1.1(@types/react@19.1.16)(react@19.1.0)
|
||||
'@radix-ui/rect': 1.1.1
|
||||
react: 19.1.0
|
||||
react-dom: 19.1.0(react@19.1.0)
|
||||
optionalDependencies:
|
||||
'@types/react': 19.1.16
|
||||
'@types/react-dom': 19.1.9(@types/react@19.1.16)
|
||||
|
||||
'@radix-ui/react-portal@1.1.9(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
|
||||
dependencies:
|
||||
'@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
'@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.16)(react@19.1.0)
|
||||
react: 19.1.0
|
||||
react-dom: 19.1.0(react@19.1.0)
|
||||
optionalDependencies:
|
||||
'@types/react': 19.1.16
|
||||
'@types/react-dom': 19.1.9(@types/react@19.1.16)
|
||||
|
||||
'@radix-ui/react-presence@1.1.5(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
|
||||
dependencies:
|
||||
'@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.16)(react@19.1.0)
|
||||
'@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.16)(react@19.1.0)
|
||||
react: 19.1.0
|
||||
react-dom: 19.1.0(react@19.1.0)
|
||||
optionalDependencies:
|
||||
'@types/react': 19.1.16
|
||||
'@types/react-dom': 19.1.9(@types/react@19.1.16)
|
||||
|
||||
'@radix-ui/react-primitive@2.1.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
|
||||
dependencies:
|
||||
'@radix-ui/react-slot': 1.2.3(@types/react@19.1.16)(react@19.1.0)
|
||||
react: 19.1.0
|
||||
react-dom: 19.1.0(react@19.1.0)
|
||||
optionalDependencies:
|
||||
'@types/react': 19.1.16
|
||||
'@types/react-dom': 19.1.9(@types/react@19.1.16)
|
||||
|
||||
'@radix-ui/react-primitive@2.1.4(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
|
||||
dependencies:
|
||||
'@radix-ui/react-slot': 1.2.4(@types/react@19.1.16)(react@19.1.0)
|
||||
react: 19.1.0
|
||||
react-dom: 19.1.0(react@19.1.0)
|
||||
optionalDependencies:
|
||||
'@types/react': 19.1.16
|
||||
'@types/react-dom': 19.1.9(@types/react@19.1.16)
|
||||
|
||||
'@radix-ui/react-radio-group@1.3.8(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
|
||||
dependencies:
|
||||
'@radix-ui/primitive': 1.1.3
|
||||
'@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.16)(react@19.1.0)
|
||||
'@radix-ui/react-context': 1.1.2(@types/react@19.1.16)(react@19.1.0)
|
||||
'@radix-ui/react-direction': 1.1.1(@types/react@19.1.16)(react@19.1.0)
|
||||
'@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
'@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
'@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
'@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.16)(react@19.1.0)
|
||||
'@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.16)(react@19.1.0)
|
||||
'@radix-ui/react-use-size': 1.1.1(@types/react@19.1.16)(react@19.1.0)
|
||||
react: 19.1.0
|
||||
react-dom: 19.1.0(react@19.1.0)
|
||||
optionalDependencies:
|
||||
'@types/react': 19.1.16
|
||||
'@types/react-dom': 19.1.9(@types/react@19.1.16)
|
||||
|
||||
'@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
|
||||
dependencies:
|
||||
'@radix-ui/primitive': 1.1.3
|
||||
'@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
'@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.16)(react@19.1.0)
|
||||
'@radix-ui/react-context': 1.1.2(@types/react@19.1.16)(react@19.1.0)
|
||||
'@radix-ui/react-direction': 1.1.1(@types/react@19.1.16)(react@19.1.0)
|
||||
'@radix-ui/react-id': 1.1.1(@types/react@19.1.16)(react@19.1.0)
|
||||
'@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
'@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.16)(react@19.1.0)
|
||||
'@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.16)(react@19.1.0)
|
||||
react: 19.1.0
|
||||
react-dom: 19.1.0(react@19.1.0)
|
||||
optionalDependencies:
|
||||
'@types/react': 19.1.16
|
||||
'@types/react-dom': 19.1.9(@types/react@19.1.16)
|
||||
|
||||
'@radix-ui/react-select@2.2.6(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
|
||||
dependencies:
|
||||
'@radix-ui/number': 1.1.1
|
||||
'@radix-ui/primitive': 1.1.3
|
||||
'@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
'@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.16)(react@19.1.0)
|
||||
'@radix-ui/react-context': 1.1.2(@types/react@19.1.16)(react@19.1.0)
|
||||
'@radix-ui/react-direction': 1.1.1(@types/react@19.1.16)(react@19.1.0)
|
||||
'@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
'@radix-ui/react-focus-guards': 1.1.3(@types/react@19.1.16)(react@19.1.0)
|
||||
'@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
'@radix-ui/react-id': 1.1.1(@types/react@19.1.16)(react@19.1.0)
|
||||
'@radix-ui/react-popper': 1.2.8(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
'@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
'@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
'@radix-ui/react-slot': 1.2.3(@types/react@19.1.16)(react@19.1.0)
|
||||
'@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.16)(react@19.1.0)
|
||||
'@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.16)(react@19.1.0)
|
||||
'@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.16)(react@19.1.0)
|
||||
'@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.16)(react@19.1.0)
|
||||
'@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
aria-hidden: 1.2.6
|
||||
react: 19.1.0
|
||||
react-dom: 19.1.0(react@19.1.0)
|
||||
react-remove-scroll: 2.7.2(@types/react@19.1.16)(react@19.1.0)
|
||||
optionalDependencies:
|
||||
'@types/react': 19.1.16
|
||||
'@types/react-dom': 19.1.9(@types/react@19.1.16)
|
||||
|
||||
'@radix-ui/react-slot@1.2.3(@types/react@19.1.16)(react@19.1.0)':
|
||||
dependencies:
|
||||
'@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.16)(react@19.1.0)
|
||||
react: 19.1.0
|
||||
optionalDependencies:
|
||||
'@types/react': 19.1.16
|
||||
|
||||
'@radix-ui/react-slot@1.2.4(@types/react@19.1.16)(react@19.1.0)':
|
||||
dependencies:
|
||||
'@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.16)(react@19.1.0)
|
||||
react: 19.1.0
|
||||
optionalDependencies:
|
||||
'@types/react': 19.1.16
|
||||
|
||||
'@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.1.16)(react@19.1.0)':
|
||||
dependencies:
|
||||
react: 19.1.0
|
||||
optionalDependencies:
|
||||
'@types/react': 19.1.16
|
||||
|
||||
'@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.1.16)(react@19.1.0)':
|
||||
dependencies:
|
||||
'@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.1.16)(react@19.1.0)
|
||||
'@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.16)(react@19.1.0)
|
||||
react: 19.1.0
|
||||
optionalDependencies:
|
||||
'@types/react': 19.1.16
|
||||
|
||||
'@radix-ui/react-use-effect-event@0.0.2(@types/react@19.1.16)(react@19.1.0)':
|
||||
dependencies:
|
||||
'@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.16)(react@19.1.0)
|
||||
react: 19.1.0
|
||||
optionalDependencies:
|
||||
'@types/react': 19.1.16
|
||||
|
||||
'@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.1.16)(react@19.1.0)':
|
||||
dependencies:
|
||||
'@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.16)(react@19.1.0)
|
||||
react: 19.1.0
|
||||
optionalDependencies:
|
||||
'@types/react': 19.1.16
|
||||
|
||||
'@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.1.16)(react@19.1.0)':
|
||||
dependencies:
|
||||
react: 19.1.0
|
||||
optionalDependencies:
|
||||
'@types/react': 19.1.16
|
||||
|
||||
'@radix-ui/react-use-previous@1.1.1(@types/react@19.1.16)(react@19.1.0)':
|
||||
dependencies:
|
||||
react: 19.1.0
|
||||
optionalDependencies:
|
||||
'@types/react': 19.1.16
|
||||
|
||||
'@radix-ui/react-use-rect@1.1.1(@types/react@19.1.16)(react@19.1.0)':
|
||||
dependencies:
|
||||
'@radix-ui/rect': 1.1.1
|
||||
react: 19.1.0
|
||||
optionalDependencies:
|
||||
'@types/react': 19.1.16
|
||||
|
||||
'@radix-ui/react-use-size@1.1.1(@types/react@19.1.16)(react@19.1.0)':
|
||||
dependencies:
|
||||
'@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.16)(react@19.1.0)
|
||||
react: 19.1.0
|
||||
optionalDependencies:
|
||||
'@types/react': 19.1.16
|
||||
|
||||
'@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
|
||||
dependencies:
|
||||
'@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
react: 19.1.0
|
||||
react-dom: 19.1.0(react@19.1.0)
|
||||
optionalDependencies:
|
||||
'@types/react': 19.1.16
|
||||
'@types/react-dom': 19.1.9(@types/react@19.1.16)
|
||||
|
||||
'@radix-ui/rect@1.1.1': {}
|
||||
|
||||
'@react-aria/focus@3.21.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
|
||||
dependencies:
|
||||
'@react-aria/interactions': 3.25.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
|
|
@ -7006,6 +7787,10 @@ snapshots:
|
|||
|
||||
argparse@2.0.1: {}
|
||||
|
||||
aria-hidden@1.2.6:
|
||||
dependencies:
|
||||
tslib: 2.8.1
|
||||
|
||||
aria-query@5.3.2: {}
|
||||
|
||||
array-buffer-byte-length@1.0.2:
|
||||
|
|
@ -7295,6 +8080,10 @@ snapshots:
|
|||
|
||||
cjs-module-lexer@1.4.3: {}
|
||||
|
||||
class-variance-authority@0.7.1:
|
||||
dependencies:
|
||||
clsx: 2.1.1
|
||||
|
||||
client-only@0.0.1: {}
|
||||
|
||||
cliui@8.0.1:
|
||||
|
|
@ -7497,6 +8286,8 @@ snapshots:
|
|||
|
||||
detect-newline@3.1.0: {}
|
||||
|
||||
detect-node-es@1.1.0: {}
|
||||
|
||||
dezalgo@1.0.4:
|
||||
dependencies:
|
||||
asap: 2.0.6
|
||||
|
|
@ -8288,6 +9079,8 @@ snapshots:
|
|||
hasown: 2.0.2
|
||||
math-intrinsics: 1.1.0
|
||||
|
||||
get-nonce@1.0.1: {}
|
||||
|
||||
get-package-type@0.1.0: {}
|
||||
|
||||
get-proto@1.0.1:
|
||||
|
|
@ -9192,6 +9985,10 @@ snapshots:
|
|||
dependencies:
|
||||
react: 18.3.1
|
||||
|
||||
lucide-react@0.400.0(react@19.1.0):
|
||||
dependencies:
|
||||
react: 19.1.0
|
||||
|
||||
magic-string@0.30.19:
|
||||
dependencies:
|
||||
'@jridgewell/sourcemap-codec': 1.5.5
|
||||
|
|
@ -9655,6 +10452,25 @@ snapshots:
|
|||
|
||||
react-is@18.3.1: {}
|
||||
|
||||
react-remove-scroll-bar@2.3.8(@types/react@19.1.16)(react@19.1.0):
|
||||
dependencies:
|
||||
react: 19.1.0
|
||||
react-style-singleton: 2.2.3(@types/react@19.1.16)(react@19.1.0)
|
||||
tslib: 2.8.1
|
||||
optionalDependencies:
|
||||
'@types/react': 19.1.16
|
||||
|
||||
react-remove-scroll@2.7.2(@types/react@19.1.16)(react@19.1.0):
|
||||
dependencies:
|
||||
react: 19.1.0
|
||||
react-remove-scroll-bar: 2.3.8(@types/react@19.1.16)(react@19.1.0)
|
||||
react-style-singleton: 2.2.3(@types/react@19.1.16)(react@19.1.0)
|
||||
tslib: 2.8.1
|
||||
use-callback-ref: 1.3.3(@types/react@19.1.16)(react@19.1.0)
|
||||
use-sidecar: 1.1.3(@types/react@19.1.16)(react@19.1.0)
|
||||
optionalDependencies:
|
||||
'@types/react': 19.1.16
|
||||
|
||||
react-smooth@4.0.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
|
||||
dependencies:
|
||||
fast-equals: 5.3.2
|
||||
|
|
@ -9663,6 +10479,14 @@ snapshots:
|
|||
react-dom: 18.3.1(react@18.3.1)
|
||||
react-transition-group: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
|
||||
react-style-singleton@2.2.3(@types/react@19.1.16)(react@19.1.0):
|
||||
dependencies:
|
||||
get-nonce: 1.0.1
|
||||
react: 19.1.0
|
||||
tslib: 2.8.1
|
||||
optionalDependencies:
|
||||
'@types/react': 19.1.16
|
||||
|
||||
react-transition-group@4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
|
||||
dependencies:
|
||||
'@babel/runtime': 7.28.4
|
||||
|
|
@ -10189,6 +11013,8 @@ snapshots:
|
|||
|
||||
tabbable@6.2.0: {}
|
||||
|
||||
tailwind-merge@3.4.0: {}
|
||||
|
||||
tailwindcss@3.4.17:
|
||||
dependencies:
|
||||
'@alloc/quick-lru': 5.2.0
|
||||
|
|
@ -10325,6 +11151,8 @@ snapshots:
|
|||
optionalDependencies:
|
||||
fsevents: 2.3.3
|
||||
|
||||
tw-animate-css@1.4.0: {}
|
||||
|
||||
type-check@0.4.0:
|
||||
dependencies:
|
||||
prelude-ls: 1.2.1
|
||||
|
|
@ -10437,6 +11265,21 @@ snapshots:
|
|||
dependencies:
|
||||
punycode: 2.3.1
|
||||
|
||||
use-callback-ref@1.3.3(@types/react@19.1.16)(react@19.1.0):
|
||||
dependencies:
|
||||
react: 19.1.0
|
||||
tslib: 2.8.1
|
||||
optionalDependencies:
|
||||
'@types/react': 19.1.16
|
||||
|
||||
use-sidecar@1.1.3(@types/react@19.1.16)(react@19.1.0):
|
||||
dependencies:
|
||||
detect-node-es: 1.1.0
|
||||
react: 19.1.0
|
||||
tslib: 2.8.1
|
||||
optionalDependencies:
|
||||
'@types/react': 19.1.16
|
||||
|
||||
use-sync-external-store@1.5.0(react@18.3.1):
|
||||
dependencies:
|
||||
react: 18.3.1
|
||||
|
|
|
|||
Loading…
Reference in New Issue