@nextclaw/ui 0.5.6 → 0.5.8

package/src/components/marketplace/MarketplacePage.tsx

@@ -142,8 +142,8 @@ function matchInstalledSearch(
 
 function getAvatarColor(text: string) {
   const colors = [
-    'bg-blue-500', 'bg-indigo-500', 'bg-purple-500', 'bg-pink-500',
-    'bg-rose-500', 'bg-orange-500', 'bg-emerald-500', 'bg-teal-500', 'bg-cyan-500'
+    'bg-amber-600', 'bg-orange-500', 'bg-yellow-600', 'bg-emerald-600',
+    'bg-teal-600', 'bg-cyan-600', 'bg-stone-600', 'bg-rose-500', 'bg-violet-500'
   ];
   let hash = 0;
   for (let i = 0; i < text.length; i++) {
@@ -157,7 +157,7 @@ function ItemIcon({ name, fallback }: { name?: string; fallback: string }) {
   const letters = displayName.substring(0, 2).toUpperCase();
   const colorClass = getAvatarColor(displayName);
   return (
-    <div className={cn("flex items-center justify-center w-11 h-11 rounded-2xl text-white font-bold text-base shrink-0 shadow-sm", colorClass)}>
+    <div className={cn("flex items-center justify-center w-10 h-10 rounded-xl text-white font-semibold text-sm shrink-0", colorClass)}>
       {letters}
     </div>
   );
@@ -173,7 +173,7 @@ function FilterPanel(props: {
   onSortChange: (value: MarketplaceSort) => void;
 }) {
   return (
-    <div className="bg-white border border-gray-200 rounded-xl p-4 mb-4">
+    <div className="mb-4">
       <div className="flex gap-3 items-center">
         <div className="flex-1 min-w-0 relative">
           <PackageSearch className="h-4 w-4 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" />
@@ -181,11 +181,11 @@ function FilterPanel(props: {
             value={props.searchText}
             onChange={(event) => props.onSearchTextChange(event.target.value)}
             placeholder="Search extensions..."
-            className="w-full h-9 border border-gray-200 rounded-lg pl-9 pr-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30"
+            className="w-full h-9 border border-gray-200/80 rounded-xl pl-9 pr-3 text-sm focus:outline-none focus:ring-1 focus:ring-primary/40"
           />
         </div>
 
-        <div className="inline-flex h-9 rounded-lg bg-gray-100 p-0.5 shrink-0">
+        <div className="inline-flex h-9 rounded-xl bg-gray-100/80 p-1 shrink-0">
           {([
             { value: 'all', label: 'All' },
             { value: 'plugin', label: 'Plugins' },
@@ -196,7 +196,7 @@ function FilterPanel(props: {
               type="button"
               onClick={() => props.onTypeFilterChange(opt.value)}
               className={cn(
-                'px-3 rounded-md text-sm font-medium transition-all whitespace-nowrap',
+                'px-3 rounded-lg text-sm font-medium transition-all whitespace-nowrap',
                 props.typeFilter === opt.value
                   ? 'bg-white text-gray-900 shadow-sm'
                   : 'text-gray-500 hover:text-gray-700'
@@ -252,7 +252,7 @@ function MarketplaceListCard(props: {
   const displayType = type === 'plugin' ? 'Plugin' : type === 'skill' ? 'Skill' : 'Extension';
 
   return (
-    <article className="group bg-white border border-transparent hover:border-gray-200 rounded-xl px-4 py-3 hover:shadow-sm transition-all flex items-start gap-4 justify-between cursor-default h-[90px]">
+    <article className="group bg-white border border-gray-200/40 hover:border-gray-200/80 rounded-2xl px-5 py-4 hover:shadow-md shadow-sm transition-all flex items-start gap-3.5 justify-between cursor-default">
       <div className="flex gap-3 min-w-0 flex-1 h-full items-start">
         <ItemIcon name={title} fallback={spec || 'Ext'} />
         <div className="min-w-0 flex-1 flex flex-col justify-center h-full">
@@ -302,7 +302,7 @@ function MarketplaceListCard(props: {
           <button
             onClick={() => props.onInstall(props.item as MarketplaceItemSummary)}
             disabled={props.installState.isPending}
-            className="inline-flex items-center gap-1.5 h-8 px-4 rounded-full text-xs font-semibold bg-gray-900 text-white hover:bg-black disabled:opacity-50 transition-colors"
+            className="inline-flex items-center gap-1.5 h-8 px-4 rounded-xl text-xs font-medium bg-primary text-white hover:bg-primary-600 disabled:opacity-50 transition-colors"
           >
             {isInstalling ? 'Installing...' : 'Install'}
           </button>
@@ -312,7 +312,7 @@ function MarketplaceListCard(props: {
           <button
             disabled={props.manageState.isPending}
             onClick={() => props.onManage(isDisabled ? 'enable' : 'disable', pluginRecord)}
-            className="inline-flex items-center h-8 px-4 rounded-full text-xs font-semibold border border-gray-200 text-gray-700 bg-white hover:bg-gray-50 hover:border-gray-300 disabled:opacity-50 transition-colors"
+            className="inline-flex items-center h-8 px-4 rounded-xl text-xs font-medium border border-gray-200/80 text-gray-600 bg-white hover:bg-gray-50 hover:border-gray-300 disabled:opacity-50 transition-colors"
           >
             {busyForRecord && props.manageState.action !== 'uninstall'
               ? (props.manageState.action === 'enable' ? 'Enabling...' : 'Disabling...')
@@ -324,7 +324,7 @@ function MarketplaceListCard(props: {
           <button
             disabled={props.manageState.isPending}
             onClick={() => props.onManage('uninstall', record)}
-            className="inline-flex items-center h-8 px-4 rounded-full text-xs font-semibold border border-rose-100 text-rose-600 bg-white hover:bg-rose-50 hover:border-rose-200 disabled:opacity-50 transition-colors"
+            className="inline-flex items-center h-8 px-4 rounded-xl text-xs font-medium border border-rose-100 text-rose-500 bg-white hover:bg-rose-50 hover:border-rose-200 disabled:opacity-50 transition-colors"
           >
             {busyForRecord && props.manageState.action === 'uninstall' ? 'Removing...' : 'Uninstall'}
           </button>
@@ -344,7 +344,7 @@ function PaginationBar(props: {
   return (
     <div className="mt-4 flex items-center justify-end gap-2">
       <button
-        className="h-8 px-3 rounded-lg border border-gray-200 text-sm text-gray-700 disabled:opacity-40"
+        className="h-8 px-3 rounded-xl border border-gray-200/80 text-sm text-gray-600 disabled:opacity-40"
         onClick={props.onPrev}
         disabled={props.page <= 1 || props.busy}
       >
@@ -354,7 +354,7 @@ function PaginationBar(props: {
         {props.totalPages === 0 ? '0 / 0' : `${props.page} / ${props.totalPages}`}
       </div>
       <button
-        className="h-8 px-3 rounded-lg border border-gray-200 text-sm text-gray-700 disabled:opacity-40"
+        className="h-8 px-3 rounded-xl border border-gray-200/80 text-sm text-gray-600 disabled:opacity-40"
         onClick={props.onNext}
         disabled={props.totalPages === 0 || props.page >= props.totalPages || props.busy}
       >
@@ -513,9 +513,9 @@ export function MarketplacePage() {
 
   return (
     <div className="animate-fade-in pb-20">
-      <div className="mb-5">
-        <h2 className="text-2xl font-bold text-gray-900">Marketplace</h2>
-        <p className="text-[13px] text-gray-500 mt-1">A cleaner extension list focused on install / enable / disable.</p>
+      <div className="mb-4">
+        <h2 className="text-xl font-semibold text-gray-900">Marketplace</h2>
+        <p className="text-[12px] text-gray-400 mt-0.5">A cleaner extension list focused on install / enable / disable.</p>
       </div>
 
       <Tabs
@@ -546,7 +546,7 @@ export function MarketplacePage() {
 
       <section>
         <div className="flex items-center justify-between mb-3">
-          <h3 className="text-[15px] font-bold text-gray-900">{scope === 'installed' ? 'Installed' : 'Extensions'}</h3>
+          <h3 className="text-[14px] font-semibold text-gray-900">{scope === 'installed' ? 'Installed' : 'Extensions'}</h3>
           <span className="text-[12px] text-gray-500">{listSummary}</span>
         </div>
 

package/src/components/ui/action-link.tsx

@@ -0,0 +1,27 @@
+import { cn } from '@/lib/utils';
+import { ArrowRight } from 'lucide-react';
+
+interface ActionLinkProps {
+    label: string;
+    className?: string;
+    onClick?: () => void;
+}
+
+/**
+ * Unified action link with arrow indicator.
+ * Used in card footers for "Configure →", "Enable →", etc.
+ */
+export function ActionLink({ label, className, onClick }: ActionLinkProps) {
+    return (
+        <span
+            onClick={onClick}
+            className={cn(
+                'inline-flex items-center gap-1 text-[13px] font-medium text-gray-600 hover:text-primary transition-colors cursor-pointer group/action',
+                className
+            )}
+        >
+            {label}
+            <ArrowRight className="h-3 w-3 transition-transform group-hover/action:translate-x-0.5" />
+        </span>
+    );
+}

package/src/components/ui/button.tsx

@@ -3,27 +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-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',
+  'inline-flex items-center justify-center whitespace-nowrap rounded-xl 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-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-secondary hover:text-secondary-foreground',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-gray-200',
-        ghost: 'hover:bg-secondary hover:text-secondary-foreground',
+        outline: 'border border-gray-200 bg-white hover:bg-gray-50 hover:text-gray-800 text-gray-600',
+        secondary: 'bg-gray-100 text-gray-700 hover:bg-gray-200/80',
+        ghost: 'hover:bg-gray-100/80 hover:text-gray-800',
         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'
+        subtle: 'bg-gray-100 text-gray-600 hover:bg-gray-200/80',
+        'primary-outline': 'border border-primary/30 text-primary hover:bg-primary hover:text-primary-foreground'
       },
       size: {
-        default: 'h-10 px-4 py-2',
-        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'
+        default: 'h-9 px-4 py-2',
+        sm: 'h-8 rounded-lg px-3 text-xs',
+        lg: 'h-11 rounded-xl px-5 text-[14px]',
+        xl: 'h-12 rounded-2xl px-6 text-[15px]',
+        icon: 'h-9 w-9 rounded-xl'
       }
     },
     defaultVariants: {
@@ -35,7 +34,7 @@ const buttonVariants = cva(
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
+  VariantProps<typeof buttonVariants> {
   asChild?: boolean;
 }
 

package/src/components/ui/card.tsx

@@ -8,8 +8,8 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      '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',
+      'rounded-2xl border border-gray-200/50 bg-white text-card-foreground shadow-sm transition-all duration-base',
+      hover && 'hover:shadow-md hover:border-gray-200',
       className
     )}
     {...props}
@@ -23,7 +23,7 @@ const CardHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn('flex flex-col space-y-2 p-6', className)}
+    className={cn('flex flex-col space-y-1.5 p-6', className)}
     {...props}
   />
 ));
@@ -36,7 +36,7 @@ const CardTitle = React.forwardRef<
   <h3
     ref={ref}
     className={cn(
-      'text-lg font-semibold leading-tight tracking-tight text-gray-900',
+      'text-[15px] font-semibold leading-tight tracking-tight text-gray-900',
       className
     )}
     {...props}
@@ -50,7 +50,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn('text-sm text-gray-500 leading-relaxed', className)}
+    className={cn('text-[13px] text-gray-400 leading-relaxed', className)}
     {...props}
   />
 ));

package/src/components/ui/config-card.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+interface ConfigCardProps {
+    children: React.ReactNode;
+    onClick?: () => void;
+    className?: string;
+}
+
+/**
+ * Unified config card used for Channels, Providers, etc.
+ * Style follows YouMind: generous padding, large radius, soft shadow.
+ */
+export function ConfigCard({ children, onClick, className }: ConfigCardProps) {
+    return (
+        <div
+            onClick={onClick}
+            className={cn(
+                'group relative flex flex-col p-6 rounded-2xl border border-gray-200/50 bg-white shadow-sm',
+                'transition-all duration-base cursor-pointer',
+                'hover:shadow-md hover:border-gray-200',
+                className
+            )}
+        >
+            {children}
+        </div>
+    );
+}
+
+interface ConfigCardHeaderProps {
+    children: React.ReactNode;
+    className?: string;
+}
+
+export function ConfigCardHeader({ children, className }: ConfigCardHeaderProps) {
+    return (
+        <div className={cn('flex items-start justify-between mb-4', className)}>
+            {children}
+        </div>
+    );
+}
+
+interface ConfigCardBodyProps {
+    title: string;
+    description?: string;
+    className?: string;
+}
+
+export function ConfigCardBody({ title, description, className }: ConfigCardBodyProps) {
+    return (
+        <div className={cn('flex-1', className)}>
+            <h3 className="text-[14px] font-bold text-gray-900 mb-0.5">{title}</h3>
+            {description && (
+                <p className="text-[12px] text-gray-400 leading-relaxed line-clamp-2">{description}</p>
+            )}
+        </div>
+    );
+}
+
+interface ConfigCardFooterProps {
+    children: React.ReactNode;
+    className?: string;
+}
+
+export function ConfigCardFooter({ children, className }: ConfigCardFooterProps) {
+    return (
+        <div className={cn('mt-4 pt-3 flex items-center justify-between', className)}>
+            {children}
+        </div>
+    );
+}

package/src/components/ui/dialog.tsx

@@ -36,7 +36,7 @@ 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-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",
+        "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/50 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-2xl",
         className
       )}
       {...props}

package/src/components/ui/input.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { cn } from '@/lib/utils';
 
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> { }
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, ...props }, ref) => {
@@ -9,7 +9,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          'flex h-10 w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-400 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+          'flex h-9 w-full rounded-xl border border-gray-200/80 bg-white px-3.5 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-primary/40 focus:border-primary/40 transition-colors disabled:cursor-not-allowed disabled:opacity-50',
           className
         )}
         ref={ref}

package/src/components/ui/select.tsx

@@ -14,7 +14,7 @@ const SelectTrigger = React.forwardRef<
     <SelectPrimitive.Trigger
         ref={ref}
         className={cn(
-            "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-gray-200 bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 bg-white",
+            "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-xl border border-gray-200/80 bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary/40 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 bg-white",
             className
         )}
         {...props}

package/src/components/ui/status-dot.tsx

@@ -0,0 +1,51 @@
+import { cn } from '@/lib/utils';
+
+type StatusType = 'active' | 'inactive' | 'ready' | 'setup' | 'warning';
+
+interface StatusDotProps {
+    status: StatusType;
+    label: string;
+    className?: string;
+}
+
+const statusStyles: Record<StatusType, { dot: string; text: string; bg: string }> = {
+    active: {
+        dot: 'bg-emerald-500',
+        text: 'text-emerald-600',
+        bg: 'bg-emerald-50',
+    },
+    ready: {
+        dot: 'bg-emerald-500',
+        text: 'text-emerald-600',
+        bg: 'bg-emerald-50',
+    },
+    inactive: {
+        dot: 'bg-gray-300',
+        text: 'text-gray-400',
+        bg: 'bg-gray-100/80',
+    },
+    setup: {
+        dot: 'bg-gray-300',
+        text: 'text-gray-400',
+        bg: 'bg-gray-100/80',
+    },
+    warning: {
+        dot: 'bg-amber-400',
+        text: 'text-amber-600',
+        bg: 'bg-amber-50',
+    },
+};
+
+/**
+ * Unified status indicator with dot + label.
+ * Used consistently across Channels, Providers, etc.
+ */
+export function StatusDot({ status, label, className }: StatusDotProps) {
+    const style = statusStyles[status];
+    return (
+        <div className={cn('flex items-center gap-1.5 px-2 py-0.5 rounded-full', style.bg, className)}>
+            <span className={cn('h-1.5 w-1.5 rounded-full', style.dot)} />
+            <span className={cn('text-[11px] font-medium', style.text)}>{label}</span>
+        </div>
+    );
+}

package/src/components/ui/switch.tsx

@@ -15,8 +15,8 @@ const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
         aria-checked={checked}
         ref={ref}
         className={cn(
-          'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50',
-          checked ? 'bg-primary' : 'bg-gray-200 hover:bg-gray-300',
+          'peer inline-flex h-[22px] w-10 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50',
+          checked ? 'bg-primary' : 'bg-gray-200/80 hover:bg-gray-300/80',
           className
         )}
         onClick={() => onCheckedChange?.(!checked)}

package/src/components/ui/tabs-custom.tsx

@@ -16,7 +16,7 @@ interface TabsProps {
 
 export function Tabs({ tabs, activeTab, onChange, className }: TabsProps) {
     return (
-        <div className={cn('flex items-center gap-8 border-b border-gray-200 mb-8', className)}>
+        <div className={cn('flex items-center gap-6 border-b border-gray-200/60 mb-6', className)}>
             {tabs.map((tab) => {
                 const isActive = activeTab === tab.id;
                 return (
@@ -24,18 +24,21 @@ export function Tabs({ tabs, activeTab, onChange, className }: TabsProps) {
                         key={tab.id}
                         onClick={() => onChange(tab.id)}
                         className={cn(
-                            'relative pb-4 text-[15px] font-semibold transition-all duration-fast flex items-center gap-2',
+                            'relative pb-3 text-[14px] font-medium transition-all duration-fast flex items-center gap-1.5',
                             isActive
-                                ? 'text-primary'
-                                : 'text-gray-500 hover:text-gray-700'
+                                ? 'text-gray-900'
+                                : 'text-gray-600 hover:text-gray-900'
                         )}
                     >
                         {tab.label}
                         {tab.count !== undefined && (
-                            <span className="text-[11px] font-medium text-gray-400">{tab.count.toLocaleString()}</span>
+                            <span className={cn(
+                                'text-[11px] font-medium',
+                                isActive ? 'text-gray-500' : 'text-gray-500'
+                            )}>{tab.count.toLocaleString()}</span>
                         )}
                         {isActive && (
-                            <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary animate-in fade-in slide-in-from-left-2 duration-300" />
+                            <div className="absolute bottom-0 left-0 right-0 h-[2px] bg-primary rounded-full" />
                         )}
                     </button>
                 );

package/src/components/ui/tabs.tsx

@@ -42,7 +42,7 @@ export function TabsList({ children, className }: TabsListProps) {
   return (
     <div
       className={cn(
-        'inline-flex h-10 items-center justify-center rounded-lg bg-gray-100 p-1 text-gray-600',
+        'inline-flex h-9 items-center justify-center rounded-xl bg-gray-100/80 p-1 text-gray-500',
         className
       )}
     >
@@ -62,10 +62,10 @@ export function TabsTrigger({ value, children, className }: TabsTriggerProps) {
       type="button"
       onClick={() => context.onValueChange(value)}
       className={cn(
-        'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-white transition-all duration-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+        'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-[13px] font-medium ring-offset-white transition-all duration-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
         isActive
           ? 'bg-white text-gray-900 shadow-sm'
-          : 'hover:bg-white/50 hover:text-gray-700',
+          : 'hover:bg-white/50 hover:text-gray-800 text-gray-600',
         className
       )}
     >

package/src/index.css

@@ -19,43 +19,31 @@
     --popover: 0 0% 100%;
     --popover-foreground: 221 39% 11%;
 
-    /* Primary: Brand Blue */
+    /* Primary: Blue */
     --primary: 217 80% 55%;
     --primary-foreground: 0 0% 100%;
 
-    /* Secondary: Light Gray */
-    --secondary: 220 14% 96%;
-    --secondary-foreground: 215 28% 17%;
+    /* Secondary */
+    --secondary: 214 18% 96%;
+    --secondary-foreground: 219 18% 18%;
 
     /* Muted */
-    --muted: 220 14% 96%;
-    --muted-foreground: 220 9% 46%;
+    --muted: 214 18% 96%;
+    --muted-foreground: 216 6% 46%;
 
     /* Accent */
     --accent: 217 100% 97%;
-    --accent-foreground: 217 70% 40%;
+    --accent-foreground: 217 60% 35%;
 
     /* Destructive */
     --destructive: 0 84% 60%;
     --destructive-foreground: 0 0% 98%;
 
     /* UI Elements */
-    --border: 220 13% 91%;
-    --input: 220 13% 91%;
+    --border: 213 14% 90%;
+    --input: 213 14% 90%;
     --ring: 217 80% 55%;
     --radius: 0.75rem;
-
-    /* Legacy compatibility */
-    --milk-50: 210 20% 98%;
-    --milk-100: 220 14% 96%;
-    --milk-200: 220 13% 91%;
-    --milk-300: 216 12% 84%;
-    --milk-400: 218 11% 65%;
-    --milk-500: 220 9% 46%;
-    --milk-600: 215 14% 34%;
-    --milk-700: 217 19% 27%;
-    --milk-800: 215 28% 17%;
-    --milk-900: 221 39% 11%;
   }
 }
 
@@ -89,8 +77,8 @@
      SCROLLBAR
      ======================================== */
   .custom-scrollbar::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
+    width: 5px;
+    height: 5px;
   }
 
   .custom-scrollbar::-webkit-scrollbar-track {
@@ -110,14 +98,14 @@
      GLASSMORPHISM
      ======================================== */
   .glass {
-    background: rgba(255, 255, 255, 0.8);
+    background: rgba(255, 255, 255, 0.85);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
-    border: 1px solid rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.3);
   }
 
   .glass-dark {
-    background: rgba(0, 0, 0, 0.1);
+    background: rgba(0, 0, 0, 0.06);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     border: 1px solid rgba(255, 255, 255, 0.1);
@@ -127,19 +115,19 @@
      SHADOWS
      ======================================== */
   .shadow-card {
-    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.02);
+    box-shadow: 0 1px 3px -1px rgba(30, 20, 10, 0.03), 0 1px 2px -1px rgba(30, 20, 10, 0.02);
   }
 
   .shadow-card-hover {
-    box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.06), 0 4px 8px -4px rgba(0, 0, 0, 0.03);
+    box-shadow: 0 8px 20px -4px rgba(30, 20, 10, 0.06), 0 4px 8px -4px rgba(30, 20, 10, 0.03);
   }
 
   .shadow-premium {
-    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08), 0 4px 10px -4px rgba(0, 0, 0, 0.04);
+    box-shadow: 0 8px 24px -8px rgba(30, 20, 10, 0.06), 0 4px 10px -4px rgba(30, 20, 10, 0.03);
   }
 
   .shadow-premium-hover {
-    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.12), 0 8px 15px -6px rgba(0, 0, 0, 0.06);
+    box-shadow: 0 16px 32px -12px rgba(30, 20, 10, 0.1), 0 6px 12px -4px rgba(30, 20, 10, 0.04);
   }
 
   /* ========================================
@@ -169,7 +157,7 @@
 @keyframes fadeIn {
   from {
     opacity: 0;
-    transform: translateY(12px);
+    transform: translateY(8px);
   }
 
   to {
@@ -181,7 +169,7 @@
 @keyframes slideIn {
   from {
     opacity: 0;
-    transform: translateX(-12px);
+    transform: translateX(-8px);
   }
 
   to {
@@ -193,7 +181,7 @@
 @keyframes scaleIn {
   from {
     opacity: 0;
-    transform: scale(0.97);
+    transform: scale(0.98);
   }
 
   to {
@@ -210,20 +198,20 @@
   }
 
   50% {
-    opacity: 0.8;
+    opacity: 0.85;
   }
 }
 
 .animate-fade-in {
-  animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  animation: fadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
 }
 
 .animate-slide-in {
-  animation: slideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
 }
 
 .animate-scale-in {
-  animation: scaleIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  animation: scaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
 }
 
 .animate-pulse-soft {