@nextclaw/ui 0.2.4 → 0.3.0

package/src/components/config/ProviderForm.tsx

@@ -27,6 +27,7 @@ export function ProviderForm() {
   const [apiKey, setApiKey] = useState('');
   const [apiBase, setApiBase] = useState('');
   const [extraHeaders, setExtraHeaders] = useState<Record<string, string> | null>(null);
+  const [wireApi, setWireApi] = useState<'auto' | 'chat' | 'responses'>('auto');
 
   const providerName = providerModal.provider;
   const providerSpec = meta?.providers.find((p) => p.name === providerName);
@@ -37,6 +38,9 @@ export function ProviderForm() {
       setApiBase(providerConfig.apiBase || providerSpec?.defaultApiBase || '');
       setExtraHeaders(providerConfig.extraHeaders || null);
       setApiKey(''); // Always start with empty for security
+      const nextWireApi =
+        providerConfig.wireApi || providerSpec?.defaultWireApi || 'auto';
+      setWireApi(nextWireApi as 'auto' | 'chat' | 'responses');
     }
   }, [providerConfig, providerSpec]);
 
@@ -58,6 +62,14 @@ export function ProviderForm() {
       payload.extraHeaders = extraHeaders;
     }
 
+    if (providerSpec?.supportsWireApi) {
+      const currentWireApi =
+        providerConfig?.wireApi || providerSpec.defaultWireApi || 'auto';
+      if (wireApi !== currentWireApi) {
+        payload.wireApi = wireApi;
+      }
+    }
+
     if (!providerName) return;
 
     updateProvider.mutate(
@@ -71,7 +83,7 @@ export function ProviderForm() {
       <DialogContent className="sm:max-w-[500px]">
         <DialogHeader>
           <div className="flex items-center gap-3">
-            <div className="h-10 w-10 rounded-xl bg-gradient-to-br from-orange-400 to-amber-500 flex items-center justify-center">
+            <div className="h-10 w-10 rounded-xl bg-primary flex items-center justify-center">
               <KeyRound className="h-5 w-5 text-white" />
             </div>
             <div>
@@ -83,8 +95,8 @@ export function ProviderForm() {
 
         <form onSubmit={handleSubmit} className="space-y-5 pt-2">
           <div className="space-y-2.5">
-            <Label htmlFor="apiKey" className="text-sm font-medium text-[hsl(30,20%,12%)] flex items-center gap-2">
-              <KeyRound className="h-3.5 w-3.5 text-[hsl(30,8%,45%)]" />
+            <Label htmlFor="apiKey" className="text-sm font-medium text-gray-900 flex items-center gap-2">
+              <KeyRound className="h-3.5 w-3.5 text-gray-500" />
               {t('apiKey')}
             </Label>
             <MaskedInput
@@ -93,13 +105,13 @@ export function ProviderForm() {
               isSet={providerConfig?.apiKeySet}
               onChange={(e) => setApiKey(e.target.value)}
               placeholder={providerConfig?.apiKeySet ? t('apiKeySet') : 'Enter API Key'}
-              className="rounded-xl border-[hsl(40,20%,90%)] bg-[hsl(40,20%,98%)] focus:bg-white"
+              className="rounded-xl"
             />
           </div>
 
           <div className="space-y-2.5">
-            <Label htmlFor="apiBase" className="text-sm font-medium text-[hsl(30,20%,12%)] flex items-center gap-2">
-              <Globe className="h-3.5 w-3.5 text-[hsl(30,8%,45%)]" />
+            <Label htmlFor="apiBase" className="text-sm font-medium text-gray-900 flex items-center gap-2">
+              <Globe className="h-3.5 w-3.5 text-gray-500" />
               {t('apiBase')}
             </Label>
             <Input
@@ -108,13 +120,38 @@ export function ProviderForm() {
               value={apiBase}
               onChange={(e) => setApiBase(e.target.value)}
               placeholder={providerSpec?.defaultApiBase || 'https://api.example.com'}
-              className="rounded-xl border-[hsl(40,20%,90%)] bg-[hsl(40,20%,98%)] focus:bg-white"
+              className="rounded-xl"
             />
           </div>
 
+          {providerSpec?.supportsWireApi && (
+            <div className="space-y-2.5">
+              <Label htmlFor="wireApi" className="text-sm font-medium text-gray-900 flex items-center gap-2">
+                <Hash className="h-3.5 w-3.5 text-gray-500" />
+                {t('wireApi')}
+              </Label>
+              <select
+                id="wireApi"
+                value={wireApi}
+                onChange={(e) => setWireApi(e.target.value as 'auto' | 'chat' | 'responses')}
+                className="flex h-10 w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+              >
+                {(providerSpec.wireApiOptions || ['auto', 'chat', 'responses']).map((option) => (
+                  <option key={option} value={option}>
+                    {option === 'chat'
+                      ? t('wireApiChat')
+                      : option === 'responses'
+                        ? t('wireApiResponses')
+                        : t('wireApiAuto')}
+                  </option>
+                ))}
+              </select>
+            </div>
+          )}
+
           <div className="space-y-2.5">
-            <Label className="text-sm font-medium text-[hsl(30,20%,12%)] flex items-center gap-2">
-              <Hash className="h-3.5 w-3.5 text-[hsl(30,8%,45%)]" />
+            <Label className="text-sm font-medium text-gray-900 flex items-center gap-2">
+              <Hash className="h-3.5 w-3.5 text-gray-500" />
               {t('extraHeaders')}
             </Label>
             <KeyValueEditor
@@ -128,14 +165,12 @@ export function ProviderForm() {
               type="button"
               variant="outline"
               onClick={closeProviderModal}
-              className="rounded-xl border-[hsl(40,20%,90%)] bg-white hover:bg-[hsl(40,20%,96%)]"
             >
               {t('cancel')}
             </Button>
             <Button
               type="submit"
               disabled={updateProvider.isPending}
-              className="rounded-xl bg-gradient-to-r from-orange-400 to-amber-500 hover:from-orange-500 hover:to-amber-600 text-white border-0"
             >
               {updateProvider.isPending ? 'Saving...' : t('save')}
             </Button>

package/src/components/config/ProvidersList.tsx

@@ -1,22 +1,22 @@
 import { useConfig, useConfigMeta } from '@/hooks/useConfig';
 import { Button } from '@/components/ui/button';
-import { Skeleton } from '@/components/ui/skeleton';
-import { KeyRound, Lock, Check, Plus, MoreHorizontal } from 'lucide-react';
+import { KeyRound, Check, Settings } from 'lucide-react';
 import { useState } from 'react';
 import { ProviderForm } from './ProviderForm';
 import { useUiStore } from '@/stores/ui.store';
 import { cn } from '@/lib/utils';
 import { Tabs } from '@/components/ui/tabs-custom';
-import { HighlightCard } from '@/components/ui/HighlightCard';
+import { LogoBadge } from '@/components/common/LogoBadge';
+import { getProviderLogo } from '@/lib/logos';
 
 export function ProvidersList() {
   const { data: config } = useConfig();
   const { data: meta } = useConfigMeta();
   const { openProviderModal } = useUiStore();
-  const [activeTab, setActiveTab] = useState('featured');
+  const [activeTab, setActiveTab] = useState('installed');
 
   if (!config || !meta) {
-    return <div className="p-8">Loading...</div>; // Skeleton optimization can follow
+    return <div className="p-8">Loading...</div>;
   }
 
   const tabs = [
@@ -24,66 +24,118 @@ export function ProvidersList() {
     { id: 'all', label: 'All Providers' }
   ];
 
+  const filteredProviders = activeTab === 'installed'
+    ? meta.providers.filter((p) => config.providers[p.name]?.apiKeySet)
+    : meta.providers;
+
   return (
     <div className="animate-fade-in pb-20">
       <div className="flex items-center justify-between mb-8">
-        <h2 className="text-2xl font-bold text-[hsl(30,15%,10%)]">AI Providers</h2>
+        <h2 className="text-2xl font-bold text-gray-900">AI Providers</h2>
       </div>
 
-      {/* Tabs */}
-      <Tabs tabs={tabs} activeTab={activeTab === 'featured' ? 'all' : activeTab} onChange={setActiveTab} />
+      <Tabs tabs={tabs} activeTab={activeTab} onChange={setActiveTab} />
 
-      {/* Provider List Row-Style */}
-      <div className="space-y-1">
-        {(activeTab === 'installed'
-          ? meta.providers.filter((p) => config.providers[p.name]?.apiKeySet)
-          : meta.providers
-        ).map((provider) => {
+      {/* Provider Cards Grid */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+        {filteredProviders.map((provider) => {
           const providerConfig = config.providers[provider.name];
           const hasConfig = providerConfig?.apiKeySet;
 
           return (
             <div
               key={provider.name}
-              className="group flex items-center gap-5 p-3 rounded-2xl hover:bg-[hsl(40,10%,96%)] transition-all cursor-pointer border border-transparent hover:border-[hsl(40,10%,94%)]"
+              className={cn(
+                'group relative flex flex-col p-5 rounded-2xl border transition-all duration-base cursor-pointer',
+                'hover:shadow-card-hover hover:-translate-y-0.5',
+                hasConfig
+                  ? 'bg-white border-gray-200 hover:border-gray-300'
+                  : 'bg-gray-50 border-gray-200 hover:border-gray-300 hover:bg-white'
+              )}
               onClick={() => openProviderModal(provider.name)}
             >
-              {/* Logo/Icon */}
-              <div className="h-10 w-10 flex items-center justify-center bg-transparent border border-[hsl(40,10%,92%)] rounded-xl group-hover:scale-105 transition-transform overflow-hidden">
-                <span className="text-xl font-bold uppercase text-[hsl(30,15%,10%)]">{provider.name[0]}</span>
+              {/* Header with Logo and Status */}
+              <div className="flex items-start justify-between mb-4">
+                <LogoBadge
+                  name={provider.name}
+                  src={getProviderLogo(provider.name)}
+                  className={cn(
+                    'h-12 w-12 rounded-xl border transition-all',
+                    hasConfig
+                      ? 'bg-white border-primary'
+                      : 'bg-white border-gray-200 group-hover:border-gray-300'
+                  )}
+                  imgClassName="h-7 w-7"
+                  fallback={(
+                    <span className={cn(
+                      'text-lg font-bold uppercase',
+                      hasConfig ? 'text-gray-900' : 'text-gray-500'
+                    )}>
+                      {provider.name[0]}
+                    </span>
+                  )}
+                />
+                
+                {/* Status Badge */}
+                {hasConfig ? (
+                  <div className="flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-emerald-50 text-emerald-600">
+                    <Check className="h-3.5 w-3.5" />
+                    <span className="text-[11px] font-bold">Ready</span>
+                  </div>
+                ) : (
+                  <div className="flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-gray-100 text-gray-500">
+                    <Settings className="h-3.5 w-3.5" />
+                    <span className="text-[11px] font-bold">Setup</span>
+                  </div>
+                )}
               </div>
 
-              {/* Info */}
-              <div className="flex-1 min-w-0">
-                <h3 className="text-[14px] font-bold text-[hsl(30,15%,10%)] truncate">
+              {/* Provider Info */}
+              <div className="flex-1">
+                <h3 className="text-[15px] font-bold text-gray-900 mb-1">
                   {provider.displayName || provider.name}
                 </h3>
-                <p className="text-[12px] text-[hsl(30,8%,55%)] truncate leading-tight">
-                  {provider.name === 'openai' ? 'TypeScript authentication framework integration guide' : 'Configure AI services for your agents'}
+                <p className="text-[12px] text-gray-500 leading-relaxed line-clamp-2">
+                  {provider.name === 'openai' 
+                    ? 'Leading AI models including GPT-4 and GPT-3.5' 
+                    : 'Configure AI services for your agents'}
                 </p>
               </div>
 
-              {/* Status/Actions */}
-              <div className="flex items-center gap-4">
-                {hasConfig ? (
-                  <div className="flex items-center gap-1.5 text-emerald-600">
-                    <Check className="h-4 w-4" />
-                    <span className="text-[11px] font-bold">Ready</span>
-                  </div>
-                ) : (
-                  <button className="h-8 w-8 flex items-center justify-center text-[hsl(30,8%,45%)] hover:text-[hsl(30,15%,10%)] group-hover:opacity-100 opacity-0 transition-opacity">
-                    <Plus className="h-4 w-4" />
-                  </button>
-                )}
-                <button className="h-8 w-8 flex items-center justify-center text-[hsl(30,8%,45%)]">
-                  <MoreHorizontal className="h-4 w-4" />
-                </button>
+              {/* Footer with Action */}
+              <div className="mt-4 pt-4 border-t border-gray-100">
+                <Button
+                  variant={hasConfig ? 'ghost' : 'default'}
+                  size="sm"
+                  className="w-full rounded-xl text-xs font-semibold h-9"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    openProviderModal(provider.name);
+                  }}
+                >
+                  {hasConfig ? 'Configure' : 'Add Provider'}
+                </Button>
               </div>
             </div>
           );
         })}
       </div>
 
+      {/* Empty State */}
+      {filteredProviders.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-16 text-center">
+          <div className="h-16 w-16 flex items-center justify-center rounded-2xl bg-gray-100 mb-4">
+            <KeyRound className="h-8 w-8 text-gray-400" />
+          </div>
+          <h3 className="text-[15px] font-bold text-gray-900 mb-2">
+            No providers configured
+          </h3>
+          <p className="text-[13px] text-gray-500 max-w-sm">
+            Add an AI provider to start using the platform. Click on any provider to configure it.
+          </p>
+        </div>
+      )}
+
       <ProviderForm />
     </div>
   );

package/src/components/layout/Header.tsx

@@ -7,27 +7,27 @@ interface HeaderProps {
 
 export function Header({ title, description }: HeaderProps) {
   return (
-    <header className="h-16 bg-white/80 backdrop-blur-md sticky top-0 z-10 border-b border-[hsl(40,20%,90%)] flex items-center justify-between px-6 transition-all duration-300">
+    <header className="h-16 bg-white/80 backdrop-blur-md sticky top-0 z-10 border-b border-gray-200 flex items-center justify-between px-6 transition-all duration-base">
       <div className="flex items-center gap-4">
         {title && (
           <div>
-            <h2 className="text-base font-semibold text-[hsl(30,20%,12%)]">{title}</h2>
+            <h2 className="text-base font-semibold text-gray-900">{title}</h2>
             {description && (
-              <p className="text-xs text-[hsl(30,8%,45%)]">{description}</p>
+              <p className="text-xs text-gray-500">{description}</p>
             )}
           </div>
         )}
       </div>
 
       <div className="flex items-center gap-3">
-        <button className="h-9 w-9 rounded-lg bg-[hsl(40,20%,96%)] flex items-center justify-center text-[hsl(30,8%,45%)] hover:bg-[hsl(40,20%,94%)] hover:text-[hsl(30,20%,12%)] transition-colors">
+        <button className="h-9 w-9 rounded-lg bg-gray-100 flex items-center justify-center text-gray-500 hover:bg-gray-200 hover:text-gray-700 transition-colors duration-fast">
           <Search className="h-4 w-4" />
         </button>
-        <button className="h-9 w-9 rounded-lg bg-[hsl(40,20%,96%)] flex items-center justify-center text-[hsl(30,8%,45%)] hover:bg-[hsl(40,20%,94%)] hover:text-[hsl(30,20%,12%)] transition-colors relative">
+        <button className="h-9 w-9 rounded-lg bg-gray-100 flex items-center justify-center text-gray-500 hover:bg-gray-200 hover:text-gray-700 transition-colors duration-fast relative">
           <Bell className="h-4 w-4" />
-          <span className="absolute top-1.5 right-1.5 h-2 w-2 rounded-full bg-orange-500" />
+          <span className="absolute top-1.5 right-1.5 h-2 w-2 rounded-full bg-primary" />
         </button>
-        <div className="h-9 w-9 rounded-lg bg-gradient-to-br from-orange-400 to-amber-500 flex items-center justify-center">
+        <div className="h-9 w-9 rounded-lg bg-gradient-to-br from-primary to-primary-600 flex items-center justify-center">
           <span className="text-xs font-semibold text-white">N</span>
         </div>
       </div>

package/src/components/layout/Sidebar.tsx

@@ -1,37 +1,22 @@
 import { useUiStore } from '@/stores/ui.store';
 import { cn } from '@/lib/utils';
-import {
-  Cpu,
-  MessageSquare,
-  Sparkles,
-  ChevronRight,
-  Settings
-} from 'lucide-react';
+import { Cpu, MessageSquare, Sparkles } from 'lucide-react';
 
 const navItems = [
   {
     id: 'model' as const,
     label: 'Models',
     icon: Cpu,
-    color: 'text-[hsl(30,15%,10%)]'
   },
   {
     id: 'providers' as const,
     label: 'Providers',
     icon: Sparkles,
-    color: 'text-[hsl(30,15%,10%)]'
   },
   {
     id: 'channels' as const,
     label: 'Channels',
     icon: MessageSquare,
-    color: 'text-[hsl(30,15%,10%)]'
-  },
-  {
-    id: 'ui' as const,
-    label: 'Appearance',
-    icon: Settings,
-    color: 'text-[hsl(30,15%,10%)]'
   }
 ];
 
@@ -43,10 +28,10 @@ export function Sidebar() {
       {/* Logo Area */}
       <div className="px-3 mb-8">
         <div className="flex items-center gap-2 group cursor-pointer">
-          <div className="h-7 w-7 rounded-lg overflow-hidden flex items-center justify-center transition-transform group-hover:scale-110">
+          <div className="h-7 w-7 rounded-lg overflow-hidden flex items-center justify-center transition-transform duration-fast group-hover:scale-110">
             <img src="/logo.svg" alt="NextClaw Logo" className="h-full w-full object-contain" />
           </div>
-          <h1 className="text-lg font-bold text-[hsl(30,15%,10%)] tracking-tight">nextclaw</h1>
+          <h1 className="text-lg font-bold text-gray-900 tracking-tight">nextclaw</h1>
         </div>
       </div>
 
@@ -62,20 +47,22 @@ export function Sidebar() {
                 <button
                   onClick={() => setActiveTab(item.id)}
                   className={cn(
-                    'group w-full flex items-center gap-3 px-3 py-2 rounded-lg text-[13px] font-medium transition-all duration-200',
+                    'group w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-fast',
                     isActive
-                      ? 'bg-[hsl(40,10%,92%)] text-[hsl(30,15%,10%)]'
-                      : 'text-[hsl(30,8%,45%)] hover:bg-[hsl(40,10%,94%)] hover:text-[hsl(30,15%,10%)]'
+                      ? 'bg-primary-100 text-primary-700'
+                      : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
                   )}
                 >
-                  <Icon className={cn('h-4 w-4 transition-transform group-hover:scale-110', isActive ? 'text-[hsl(30,15%,10%)]' : 'text-[hsl(30,8%,45%)]')} />
+                  <Icon className={cn(
+                    'h-4 w-4 transition-transform duration-fast group-hover:scale-110',
+                    isActive ? 'text-primary' : 'text-gray-500'
+                  )} />
                   <span className="flex-1 text-left">{item.label}</span>
                 </button>
               </li>
             );
           })}
         </ul>
-
       </nav>
     </aside>
   );

package/src/components/ui/HighlightCard.tsx

@@ -3,38 +3,38 @@ import { cn } from '@/lib/utils';
 import { ArrowRight } from 'lucide-react';
 
 interface HighlightCardProps {
-    category: string;
-    title: string;
-    description: string;
-    image: string;
-    gradient: string;
-    className?: string;
+  category: string;
+  title: string;
+  description: string;
+  image: string;
+  gradient: string;
+  className?: string;
 }
 
 export function HighlightCard({ category, title, description, image, gradient, className }: HighlightCardProps) {
-    return (
-        <div className={cn(
-            'group relative overflow-hidden rounded-[1.5rem] bg-white border border-[hsl(40,10%,94%)] flex h-[180px] transition-all duration-300 hover:shadow-premium cursor-pointer',
-            className
-        )}>
-            <div className="flex-1 p-6 flex flex-col">
-                <span className="text-[10px] font-bold text-[hsl(30,8%,65%)] uppercase tracking-widest mb-2">{category}</span>
-                <h3 className="text-xl font-bold text-[hsl(30,15%,10%)] leading-tight mb-2 group-hover:text-amber-600 transition-colors">{title}</h3>
-                <p className="text-[13px] text-[hsl(30,8%,55%)] line-clamp-2 leading-relaxed max-w-[200px]">{description}</p>
+  return (
+    <div className={cn(
+      'group relative overflow-hidden rounded-xl bg-white border border-gray-200 flex h-[180px] transition-all duration-base hover:shadow-card-hover hover:border-gray-300 cursor-pointer',
+      className
+    )}>
+      <div className="flex-1 p-6 flex flex-col">
+        <span className="text-[10px] font-semibold text-gray-400 uppercase tracking-widest mb-2">{category}</span>
+        <h3 className="text-lg font-semibold text-gray-900 leading-tight mb-2 group-hover:text-primary transition-colors duration-fast">{title}</h3>
+        <p className="text-sm text-gray-500 line-clamp-2 leading-relaxed max-w-[200px]">{description}</p>
 
-                <div className="mt-auto flex items-center gap-1 text-[11px] font-bold text-[hsl(30,15%,10%)] opacity-0 group-hover:opacity-100 transition-opacity">
-                    Learn more <ArrowRight className="h-3 w-3" />
-                </div>
-            </div>
-
-            <div className={cn('w-[160px] relative overflow-hidden', gradient)}>
-                <img
-                    src={image}
-                    alt={title}
-                    className="w-full h-full object-cover mix-blend-multiply opacity-90 group-hover:scale-110 transition-transform duration-500"
-                />
-                <div className="absolute inset-0 bg-gradient-to-l from-transparent to-white/10" />
-            </div>
+        <div className="mt-auto flex items-center gap-1 text-xs font-medium text-primary opacity-0 group-hover:opacity-100 transition-opacity duration-fast">
+          Learn more <ArrowRight className="h-3 w-3" />
         </div>
-    );
+      </div>
+
+      <div className={cn('w-[160px] relative overflow-hidden', gradient)}>
+        <img
+          src={image}
+          alt={title}
+          className="w-full h-full object-cover mix-blend-multiply opacity-90 group-hover:scale-110 transition-transform duration-slow"
+        />
+        <div className="absolute inset-0 bg-gradient-to-l from-transparent to-white/10" />
+      </div>
+    </div>
+  );
 }

package/src/components/ui/button.tsx

@@ -3,21 +3,26 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-all duration-200 active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background transition-all duration-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        default: 'bg-primary text-primary-foreground hover:bg-primary-600 active:bg-primary-700 shadow-sm',
         destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline'
+        outline: 'border border-input bg-background hover:bg-secondary hover:text-secondary-foreground',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-gray-200',
+        ghost: 'hover:bg-secondary hover:text-secondary-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+        // New variants matching the design
+        primary: 'bg-primary text-primary-foreground hover:bg-primary-600 active:bg-primary-700 shadow-sm',
+        subtle: 'bg-secondary text-secondary-foreground hover:bg-gray-200',
+        'primary-outline': 'border-2 border-primary text-primary hover:bg-primary hover:text-primary-foreground'
       },
       size: {
         default: 'h-10 px-4 py-2',
-        sm: 'h-9 rounded-md px-3',
-        lg: 'h-11 rounded-md px-8',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-12 rounded-xl px-6 text-base',
+        xl: 'h-14 rounded-xl px-8 text-base',
         icon: 'h-10 w-10'
       }
     },

package/src/components/ui/card.tsx

@@ -3,12 +3,13 @@ import { cn } from '@/lib/utils';
 
 const Card = React.forwardRef<
   HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
+  React.HTMLAttributes<HTMLDivElement> & { hover?: boolean }
+>(({ className, hover = true, ...props }, ref) => (
   <div
     ref={ref}
     className={cn(
-      'rounded-2xl border bg-card text-card-foreground shadow-sm transition-all duration-300 hover:shadow-premium',
+      'rounded-xl border border-gray-200 bg-white text-card-foreground shadow-card transition-all duration-base',
+      hover && 'hover:shadow-card-hover hover:border-gray-300',
       className
     )}
     {...props}
@@ -22,7 +23,7 @@ const CardHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn('flex flex-col space-y-1.5 p-6', className)}
+    className={cn('flex flex-col space-y-2 p-6', className)}
     {...props}
   />
 ));
@@ -35,7 +36,7 @@ const CardTitle = React.forwardRef<
   <h3
     ref={ref}
     className={cn(
-      'text-2xl font-semibold leading-none tracking-tight',
+      'text-lg font-semibold leading-tight tracking-tight text-gray-900',
       className
     )}
     {...props}
@@ -49,7 +50,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
+    className={cn('text-sm text-gray-500 leading-relaxed', className)}
     {...props}
   />
 ));
@@ -69,7 +70,7 @@ const CardFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn('flex items-center p-6 pt-0', className)}
+    className={cn('flex items-center justify-between p-6 pt-0', className)}
     {...props}
   />
 ));

package/src/components/ui/dialog.tsx

@@ -19,7 +19,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-black/40 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -36,14 +36,14 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-[hsl(40,20%,90%)] bg-white p-6 shadow-2xl duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-2xl",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-gray-200 bg-white p-6 shadow-xl duration-base 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-xl",
         className
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-lg opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-[hsl(25,95%,53%)] focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-[hsl(40,20%,96%)] data-[state=open]:text-[hsl(30,8%,45%)]">
-        <X className="h-4 w-4 text-[hsl(30,8%,45%)]" />
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-lg p-1 opacity-70 ring-offset-white transition-all duration-fast hover:opacity-100 hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none">
+        <X className="h-4 w-4 text-gray-500" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
@@ -57,7 +57,7 @@ const DialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
+      "flex flex-col space-y-2 text-center sm:text-left",
       className
     )}
     {...props}
@@ -71,7 +71,7 @@ const DialogFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-2",
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-3",
       className
     )}
     {...props}
@@ -86,7 +86,7 @@ const DialogTitle = React.forwardRef<
   <DialogPrimitive.Title
     ref={ref}
     className={cn(
-      "text-lg font-semibold leading-none tracking-tight text-[hsl(30,20%,12%)]",
+      "text-lg font-semibold leading-tight tracking-tight text-gray-900",
       className
     )}
     {...props}
@@ -100,7 +100,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-[hsl(30,8%,45%)]", className)}
+    className={cn("text-sm text-gray-500 leading-relaxed", className)}
     {...props}
   />
 ))