Files
pastel-ui/components/ui/select.tsx

40 lines
1.0 KiB
TypeScript
Raw Normal View History

feat: implement palette generation features Add complete palette generation system with multiple methods: **New Components:** - ColorSwatch component - Individual color display - Click to copy to clipboard - Hover effects with copy icon - Configurable sizes (sm, md, lg) - Optional color label display - Check icon on successful copy - PaletteGrid component - Grid display for color palettes - Responsive grid layout (3-6 columns) - Click handler for color selection - Empty state message - Flexible and reusable - Select component - Dropdown selector - Consistent styling with other inputs - Optional label support - Keyboard accessible - Focus ring styling **Palette Pages:** 1. Gradient Creator (/palettes/gradient) - Multiple color stop editor (add/remove) - Configurable step count (2-1000) - Color space selection (RGB, HSL, Lab, LCH, OkLab, OkLCH) - Live gradient preview bar - Full palette grid display - Interactive color pickers for each stop - Real-time generation 2. Distinct Colors (/palettes/distinct) - Count selector (2-100 colors) - Distance metric selection (CIE76, CIEDE2000) - Simulated annealing algorithm - Statistics display: - Minimum distance - Average distance - Generation time - Loading state with progress message - Quality metrics for generated palette 3. Palettes Dashboard (/palettes) - Overview of all palette generators - Feature cards with icons - "Coming Soon" badge for harmony palettes - Quick navigation to each generator - Feature highlights for each method **Features:** - All palette generators integrated with Pastel API - Toast notifications for success/error - Loading states during generation - Copy colors to clipboard - Responsive layouts - Empty states - Error handling **API Integration:** - useGenerateGradient mutation - useGenerateDistinct mutation - Proper error handling and loading states - Result caching with React Query Build successful! 3 new palette pages rendering. Next: Harmony palettes, accessibility tools, and named colors. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-07 11:38:20 +01:00
'use client';
import * as React from 'react';
import { cn } from '@/lib/utils/cn';
export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
label?: string;
}
const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
({ className, label, children, ...props }, ref) => {
return (
<div className="space-y-2">
{label && (
<label htmlFor={props.id} className="text-sm font-medium">
{label}
</label>
)}
<select
className={cn(
'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2',
'text-sm ring-offset-background',
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
'disabled:cursor-not-allowed disabled:opacity-50',
className
)}
ref={ref}
{...props}
>
{children}
</select>
</div>
);
}
);
Select.displayName = 'Select';
export { Select };