refactor: update UI component usage to match latest shadcn APIs

app/(app)/pastel/harmony/page.tsx

@@ -4,8 +4,14 @@ import { useState } from 'react';
 import { ColorPicker } from '@/components/pastel/color/ColorPicker';
 import { PaletteGrid } from '@/components/pastel/color/PaletteGrid';
 import { ExportMenu } from '@/components/pastel/tools/ExportMenu';
-import { Button } from '@/components/ui/Button';
-import { Select } from '@/components/ui/Select';
+import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
 import { useGeneratePalette } from '@/lib/pastel/api/queries';
 import { Loader2, Palette } from 'lucide-react';
 import { toast } from 'sonner';
@@ -73,16 +79,20 @@ export default function HarmonyPage() {
               <h2 className="text-sm font-medium mb-4">Harmony Type</h2>
               <div className="space-y-4">
                 <Select
-                  label="Harmony"
                   value={harmonyType}
-                  onChange={(e) => setHarmonyType(e.target.value as HarmonyType)}
+                  onValueChange={(value) => setHarmonyType(value as HarmonyType)}
                 >
-                  <option value="monochromatic">Monochromatic</option>
-                  <option value="analogous">Analogous</option>
-                  <option value="complementary">Complementary</option>
-                  <option value="split-complementary">Split-Complementary</option>
-                  <option value="triadic">Triadic</option>
-                  <option value="tetradic">Tetradic (Square)</option>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select harmony" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="monochromatic">Monochromatic</SelectItem>
+                    <SelectItem value="analogous">Analogous</SelectItem>
+                    <SelectItem value="complementary">Complementary</SelectItem>
+                    <SelectItem value="split-complementary">Split-Complementary</SelectItem>
+                    <SelectItem value="triadic">Triadic</SelectItem>
+                    <SelectItem value="tetradic">Tetradic (Square)</SelectItem>
+                  </SelectContent>
                 </Select>
 
                 <p className="text-sm text-muted-foreground">