refactor: update UI component usage to match latest shadcn APIs

components/pastel/color/ColorInfo.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { ColorInfo as ColorInfoType } from '@/lib/pastel/api/types';
-import { Button } from '@/components/ui/Button';
+import { Button } from '@/components/ui/button';
 import { Copy } from 'lucide-react';
 import { toast } from 'sonner';
 import { cn } from '@/lib/utils/cn';

components/pastel/color/ColorPicker.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { HexColorPicker } from 'react-colorful';
-import { Input } from '@/components/ui/Input';
+import { Input } from '@/components/ui/input';
 import { cn } from '@/lib/utils/cn';
 
 interface ColorPickerProps {

components/pastel/layout/ThemeToggle.tsx

@@ -2,7 +2,7 @@
 
 import { Moon, Sun } from 'lucide-react';
 import { useTheme } from '@/components/providers/ThemeProvider';
-import { Button } from '@/components/ui/Button';
+import { Button } from '@/components/ui/button';
 
 export function ThemeToggle() {
   const { theme, setTheme, resolvedTheme } = useTheme();

components/pastel/tools/ExportMenu.tsx

@@ -1,7 +1,13 @@
 'use client';
 
-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 { useState } from 'react';
 import { Download, Copy, Check } from 'lucide-react';
 import { toast } from 'sonner';
@@ -84,13 +90,18 @@ export function ExportMenu({ colors, className }: ExportMenuProps) {
           <h3 className="text-sm font-medium mb-2">Export Palette</h3>
           <Select
             value={format}
-            onChange={(e) => setFormat(e.target.value as ExportFormat)}
+            onValueChange={(value) => setFormat(value as ExportFormat)}
           >
-            <option value="css">CSS Variables</option>
-            <option value="scss">SCSS Variables</option>
-            <option value="tailwind">Tailwind Config</option>
-            <option value="json">JSON</option>
-            <option value="javascript">JavaScript Array</option>
+            <SelectTrigger>
+              <SelectValue placeholder="Select format" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="css">CSS Variables</SelectItem>
+              <SelectItem value="scss">SCSS Variables</SelectItem>
+              <SelectItem value="tailwind">Tailwind Config</SelectItem>
+              <SelectItem value="json">JSON</SelectItem>
+              <SelectItem value="javascript">JavaScript Array</SelectItem>
+            </SelectContent>
           </Select>
         </div>
 

components/pastel/tools/ManipulationPanel.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { useState } from 'react';
-import { Slider } from '@/components/ui/Slider';
-import { Button } from '@/components/ui/Button';
+import { Slider } from '@/components/ui/slider';
+import { Button } from '@/components/ui/button';
 import {
   useLighten,
   useDarken,
@@ -131,15 +131,16 @@ export function ManipulationPanel({ color, onColorChange }: ManipulationPanelPro
     <div className="space-y-6">
       {/* Lighten */}
       <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <label className="text-sm font-medium">Lighten</label>
+          <span className="text-xs text-muted-foreground">{(lightenAmount * 100).toFixed(0)}%</span>
+        </div>
         <Slider
-          label="Lighten"
           min={0}
           max={1}
           step={0.05}
-          value={lightenAmount}
-          onChange={(e) => setLightenAmount(parseFloat(e.target.value))}
-          suffix="%"
-          showValue
+          value={[lightenAmount]}
+          onValueChange={(vals) => setLightenAmount(vals[0])}
         />
         <Button onClick={handleLighten} disabled={isLoading} className="w-full">
           Apply Lighten
@@ -148,15 +149,16 @@ export function ManipulationPanel({ color, onColorChange }: ManipulationPanelPro
 
       {/* Darken */}
       <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <label className="text-sm font-medium">Darken</label>
+          <span className="text-xs text-muted-foreground">{(darkenAmount * 100).toFixed(0)}%</span>
+        </div>
         <Slider
-          label="Darken"
           min={0}
           max={1}
           step={0.05}
-          value={darkenAmount}
-          onChange={(e) => setDarkenAmount(parseFloat(e.target.value))}
-          suffix="%"
-          showValue
+          value={[darkenAmount]}
+          onValueChange={(vals) => setDarkenAmount(vals[0])}
         />
         <Button onClick={handleDarken} disabled={isLoading} className="w-full">
           Apply Darken
@@ -165,15 +167,16 @@ export function ManipulationPanel({ color, onColorChange }: ManipulationPanelPro
 
       {/* Saturate */}
       <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <label className="text-sm font-medium">Saturate</label>
+          <span className="text-xs text-muted-foreground">{(saturateAmount * 100).toFixed(0)}%</span>
+        </div>
         <Slider
-          label="Saturate"
           min={0}
           max={1}
           step={0.05}
-          value={saturateAmount}
-          onChange={(e) => setSaturateAmount(parseFloat(e.target.value))}
-          suffix="%"
-          showValue
+          value={[saturateAmount]}
+          onValueChange={(vals) => setSaturateAmount(vals[0])}
         />
         <Button onClick={handleSaturate} disabled={isLoading} className="w-full">
           Apply Saturate
@@ -182,15 +185,16 @@ export function ManipulationPanel({ color, onColorChange }: ManipulationPanelPro
 
       {/* Desaturate */}
       <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <label className="text-sm font-medium">Desaturate</label>
+          <span className="text-xs text-muted-foreground">{(desaturateAmount * 100).toFixed(0)}%</span>
+        </div>
         <Slider
-          label="Desaturate"
           min={0}
           max={1}
           step={0.05}
-          value={desaturateAmount}
-          onChange={(e) => setDesaturateAmount(parseFloat(e.target.value))}
-          suffix="%"
-          showValue
+          value={[desaturateAmount]}
+          onValueChange={(vals) => setDesaturateAmount(vals[0])}
         />
         <Button onClick={handleDesaturate} disabled={isLoading} className="w-full">
           Apply Desaturate
@@ -199,15 +203,16 @@ export function ManipulationPanel({ color, onColorChange }: ManipulationPanelPro
 
       {/* Rotate Hue */}
       <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <label className="text-sm font-medium">Rotate Hue</label>
+          <span className="text-xs text-muted-foreground">{rotateAmount}°</span>
+        </div>
         <Slider
-          label="Rotate Hue"
           min={-180}
           max={180}
           step={5}
-          value={rotateAmount}
-          onChange={(e) => setRotateAmount(parseInt(e.target.value))}
-          suffix="°"
-          showValue
+          value={[rotateAmount]}
+          onValueChange={(vals) => setRotateAmount(vals[0])}
         />
         <Button onClick={handleRotate} disabled={isLoading} className="w-full">
           Apply Rotation