refactor: update UI component usage to match latest shadcn APIs

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

@@ -2,8 +2,14 @@
 
 import { useState, useMemo } from 'react';
 import { ColorSwatch } from '@/components/pastel/color/ColorSwatch';
-import { Input } from '@/components/ui/Input';
-import { Select } from '@/components/ui/Select';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
 import { useNamedColors } from '@/lib/pastel/api/queries';
 import { Loader2 } from 'lucide-react';
 import { parse_color } from '@valknarthing/pastel-wasm';
@@ -57,9 +63,14 @@ export default function NamedColorsPage() {
             />
           </div>
           <div className="w-full sm:w-48">
-            <Select value={sortBy} onChange={(e) => setSortBy(e.target.value as 'name' | 'hue')}>
-              <option value="name">Sort by Name</option>
-              <option value="hue">Sort by Hue</option>
+            <Select value={sortBy} onValueChange={(value) => setSortBy(value as 'name' | 'hue')}>
+              <SelectTrigger>
+                <SelectValue placeholder="Sort by..." />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="name">Sort by Name</SelectItem>
+                <SelectItem value="hue">Sort by Hue</SelectItem>
+              </SelectContent>
             </Select>
           </div>
         </div>