create-brainerce-store 1.51.0 → 1.52.0

package/templates/nextjs/base/src/components/ui/sheet.tsx

@@ -0,0 +1,125 @@
+'use client';
+
+import * as React from 'react';
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { X } from 'lucide-react';
+
+import { cn } from '@/core/lib/utils';
+
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const SheetPortal = SheetPrimitive.Portal;
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+  {
+    variants: {
+      side: {
+        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+        bottom:
+          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+        right:
+          'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+      },
+    },
+    defaultVariants: {
+      side: 'right',
+    },
+  }
+);
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = 'right', className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      {children}
+      <SheetPrimitive.Close className="absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+  </SheetPortal>
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-2 text-center sm:text-start', className)} {...props} />
+);
+SheetHeader.displayName = 'SheetHeader';
+
+const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
+    {...props}
+  />
+);
+SheetFooter.displayName = 'SheetFooter';
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold text-foreground', className)}
+    {...props}
+  />
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};

package/templates/nextjs/base/src/components/ui/skeleton.tsx

@@ -0,0 +1,7 @@
+import { cn } from '@/core/lib/utils';
+
+function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('animate-pulse rounded-md bg-muted', className)} {...props} />;
+}
+
+export { Skeleton };

package/templates/nextjs/base/src/components/ui/tabs.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+import { cn } from '@/core/lib/utils';
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+      className
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+      className
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      className
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/templates/nextjs/base/src/components/ui/textarea.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+import { cn } from '@/core/lib/utils';
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<'textarea'>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Textarea.displayName = 'Textarea';
+
+export { Textarea };

package/templates/nextjs/base/src/components/ui/tooltip.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
+import { cn } from '@/core/lib/utils';
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/templates/nextjs/base/src/ui/cart/cart-bundle-offer.tsx

@@ -6,6 +6,10 @@ import type { CartBundleOffer as CartBundleOfferType } from 'brainerce';
 import { formatPrice } from 'brainerce';
 import { useCurrency } from '@/core/lib/use-currency';
 import { useTranslations } from '@/core/lib/translations';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
 import { cn } from '@/core/lib/utils';
 
 interface CartBundleOfferCardProps {
@@ -47,7 +51,7 @@ export function CartBundleOfferCard({ offer, cartId, onAdd, className }: CartBun
   }
 
   return (
-    <div className={cn('bg-background border-border rounded-lg border p-4', className)}>
+    <Card className={cn('p-4 shadow-none', className)}>
       <div className="mb-3">
         <p className="text-foreground text-sm font-medium">{offer.name}</p>
         {offer.description && (
@@ -82,7 +86,8 @@ export function CartBundleOfferCard({ offer, cartId, onAdd, className }: CartBun
         })}
       </ul>
 
-      <div className="border-border mt-3 flex items-center justify-between border-t pt-3">
+      <Separator className="mt-3" />
+      <div className="flex items-center justify-between pt-3">
         <div className="flex items-center gap-2">
           <span className="text-muted-foreground text-sm line-through">
             {formatPrice(totalOriginal, { currency }) as string}
@@ -90,22 +95,23 @@ export function CartBundleOfferCard({ offer, cartId, onAdd, className }: CartBun
           <span className="text-foreground text-sm font-semibold">
             {formatPrice(totalDiscounted, { currency }) as string}
           </span>
-          <span className="bg-destructive/10 text-destructive rounded px-1.5 py-0.5 text-xs font-medium">
+          <Badge
+            variant="outline"
+            className="bg-destructive/10 text-destructive rounded border-transparent px-1.5 py-0.5 font-medium"
+          >
             -{discountLabel}
-          </span>
+          </Badge>
         </div>
-        <button
+        <Button
           type="button"
+          size="sm"
           onClick={handleAdd}
           disabled={adding}
-          className={cn(
-            'bg-primary text-primary-foreground flex-shrink-0 rounded px-4 py-2 text-xs font-medium transition-opacity hover:opacity-90',
-            'disabled:cursor-not-allowed disabled:opacity-50'
-          )}
+          className="h-auto flex-shrink-0 rounded px-4 py-2 text-xs"
         >
           {adding ? t('addingBundle') : t('addBundleItem')}
-        </button>
+        </Button>
       </div>
-    </div>
+    </Card>
   );
 }

package/templates/nextjs/base/src/ui/cart/cart-item.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState } from 'react';
+import { Image as ImageIcon } from 'lucide-react';
 import { CdnImage as Image } from '@/ui/shared/cdn-image';
 import type { CartItem as CartItemType } from 'brainerce';
 import { getCartItemImage, formatPrice } from 'brainerce';
@@ -73,14 +74,7 @@ export function CartItem({ item, onUpdate, className }: CartItemProps) {
           <Image src={imageUrl} alt={productName} fill sizes="80px" className="object-cover" />
         ) : (
           <div className="text-muted-foreground absolute inset-0 flex items-center justify-center">
-            <svg className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={1.5}
-                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
-              />
-            </svg>
+            <ImageIcon className="h-8 w-8" strokeWidth={1.5} aria-hidden="true" />
           </div>
         )}
       </div>

package/templates/nextjs/base/src/ui/cart/cart-nudges.tsx

@@ -1,39 +1,28 @@
-'use client';
-
-import type { CartNudge } from 'brainerce';
-import { cn } from '@/core/lib/utils';
-
-interface CartNudgesProps {
-  nudges: CartNudge[];
-  className?: string;
-}
-
-export function CartNudges({ nudges, className }: CartNudgesProps) {
-  if (nudges.length === 0) return null;
-
-  return (
-    <div className={cn('space-y-2', className)}>
-      {nudges.map((nudge) => (
-        <div
-          key={nudge.ruleId}
-          className="bg-primary/5 border-primary/20 flex items-start gap-3 rounded-lg border px-4 py-3"
-        >
-          <svg
-            className="text-primary mt-0.5 h-5 w-5 flex-shrink-0"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-            />
-          </svg>
-          <p className="text-foreground flex-1 text-sm">{nudge.text}</p>
-        </div>
-      ))}
-    </div>
-  );
-}
+'use client';
+
+import { Info } from 'lucide-react';
+import type { CartNudge } from 'brainerce';
+import { cn } from '@/core/lib/utils';
+
+interface CartNudgesProps {
+  nudges: CartNudge[];
+  className?: string;
+}
+
+export function CartNudges({ nudges, className }: CartNudgesProps) {
+  if (nudges.length === 0) return null;
+
+  return (
+    <div className={cn('space-y-2', className)}>
+      {nudges.map((nudge) => (
+        <div
+          key={nudge.ruleId}
+          className="bg-primary/5 border-primary/20 flex items-start gap-3 rounded-lg border px-4 py-3"
+        >
+          <Info className="text-primary mt-0.5 h-5 w-5 flex-shrink-0" aria-hidden="true" />
+          <p className="text-foreground flex-1 text-sm">{nudge.text}</p>
+        </div>
+      ))}
+    </div>
+  );
+}

package/templates/nextjs/base/src/ui/cart/cart-summary.tsx

@@ -4,6 +4,7 @@ import { formatPrice } from 'brainerce';
 import { useTranslations } from '@/core/lib/translations';
 import { useCart } from '@/core/providers/store-provider';
 import { useCurrency } from '@/core/lib/use-currency';
+import { Separator } from '@/components/ui/separator';
 import { cn } from '@/core/lib/utils';
 
 interface CartSummaryProps {
@@ -94,7 +95,8 @@ export function CartSummary({ className }: CartSummaryProps) {
         </div>
 
         {/* Divider */}
-        <div className="border-border mt-2 border-t pt-2">
+        <Separator className="mt-2" />
+        <div className="pt-1">
           <div className="flex items-center justify-between">
             <span className="text-foreground font-semibold">{tc('total')}</span>
             <span className="text-foreground text-base font-semibold">

package/templates/nextjs/base/src/ui/cart/cart-upgrade-banner.tsx

@@ -1,12 +1,14 @@
 'use client';
 
 import { useState, useEffect } from 'react';
+import { Image as ImageIcon, X } from 'lucide-react';
 import { CdnImage as Image } from '@/ui/shared/cdn-image';
 import type { CartUpgradeSuggestion, CartItem as CartItemType } from 'brainerce';
 import { formatPrice } from 'brainerce';
 import { getClient } from '@/core/lib/brainerce';
 import { useCurrency } from '@/core/lib/use-currency';
 import { useTranslations } from '@/core/lib/translations';
+import { Button } from '@/components/ui/button';
 import { cn } from '@/core/lib/utils';
 
 interface CartUpgradeBannerProps {
@@ -88,15 +90,7 @@ export function CartUpgradeBanner({
         className="text-muted-foreground hover:text-foreground absolute end-2 top-2 text-xs"
         aria-label={t('dismissUpgrade')}
       >
-        <svg
-          className="h-4 w-4"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          strokeWidth={2}
-        >
-          <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-        </svg>
+        <X className="h-4 w-4" aria-hidden="true" />
       </button>
 
       {/* Product image */}
@@ -105,14 +99,7 @@ export function CartUpgradeBanner({
           <Image src={imageUrl} alt={target.name} fill sizes="48px" className="object-cover" />
         ) : (
           <div className="text-muted-foreground flex h-full w-full items-center justify-center">
-            <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={1.5}
-                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
-              />
-            </svg>
+            <ImageIcon className="h-5 w-5" strokeWidth={1.5} aria-hidden="true" />
           </div>
         )}
       </div>
@@ -125,17 +112,15 @@ export function CartUpgradeBanner({
       </div>
 
       {/* Upgrade button */}
-      <button
+      <Button
         type="button"
+        size="sm"
         onClick={handleUpgrade}
         disabled={upgrading}
-        className={cn(
-          'bg-primary text-primary-foreground flex-shrink-0 rounded px-3 py-1.5 text-xs font-medium transition-opacity hover:opacity-90',
-          'disabled:cursor-not-allowed disabled:opacity-50'
-        )}
+        className="h-auto flex-shrink-0 rounded px-3 py-1.5 text-xs"
       >
         {upgrading ? t('upgrading') : t('upgrade')}
-      </button>
+      </Button>
     </div>
   );
 }

package/templates/nextjs/base/src/ui/cart/cart-view.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { ShoppingBag } from 'lucide-react';
 import { Link } from '@/core/lib/navigation';
 import { useCartPage } from '@/core/hooks/use-cart-page';
 import { CartItem } from '@/ui/cart/cart-item';
@@ -12,6 +13,9 @@ import { FreeShippingBar } from '@/ui/cart/free-shipping-bar';
 import { ReservationCountdown } from '@/ui/cart/reservation-countdown';
 import { CartRecommendationSection } from '@/ui/product/recommendation-section';
 import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
 import { useTranslations } from '@/core/lib/translations';
 
 export function CartView() {
@@ -31,27 +35,16 @@ export function CartView() {
   if (!cart || cart.items.length === 0) {
     return (
       <div className="mx-auto max-w-7xl px-4 py-16 text-center sm:px-6 lg:px-8">
-        <svg
+        <ShoppingBag
           className="text-muted-foreground mx-auto mb-4 h-16 w-16"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={1.5}
-            d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
-          />
-        </svg>
+          strokeWidth={1.5}
+          aria-hidden="true"
+        />
         <h1 className="text-foreground text-2xl font-bold">{t('emptyTitle')}</h1>
         <p className="text-muted-foreground mt-2">{t('emptySubtitle')}</p>
-        <Link
-          href="/products"
-          className="bg-primary text-primary-foreground mt-6 inline-flex items-center rounded px-6 py-3 font-medium transition-opacity hover:opacity-90"
-        >
-          {tc('continueShopping')}
-        </Link>
+        <Button asChild size="lg" className="mt-6 rounded px-6 text-base">
+          <Link href="/products">{tc('continueShopping')}</Link>
+        </Button>
       </div>
     );
   }
@@ -108,23 +101,21 @@ export function CartView() {
           )}
 
           {/* Coupon input */}
-          <div className="border-border mt-6 border-t pt-4">
+          <Separator className="mt-6" />
+          <div className="pt-4">
             <CouponInput cart={cart} onUpdate={refreshCart} />
           </div>
         </div>
 
         {/* Summary sidebar */}
         <div className="lg:col-span-1">
-          <div className="bg-muted/50 border-border sticky top-24 rounded-lg border p-6">
+          <Card className="bg-muted/50 sticky top-24 p-6 shadow-none">
             <FreeShippingBar className="mb-4" />
             <CartSummary />
 
-            <Link
-              href="/checkout"
-              className="bg-primary text-primary-foreground mt-6 inline-flex w-full items-center justify-center rounded px-6 py-3 text-sm font-medium transition-opacity hover:opacity-90"
-            >
-              {t('proceedToCheckout')}
-            </Link>
+            <Button asChild size="lg" className="mt-6 w-full rounded px-6 text-sm">
+              <Link href="/checkout">{t('proceedToCheckout')}</Link>
+            </Button>
 
             <Link
               href="/products"
@@ -132,7 +123,7 @@ export function CartView() {
             >
               {tc('continueShopping')}
             </Link>
-          </div>
+          </Card>
         </div>
       </div>
 

package/templates/nextjs/base/src/ui/cart/coupon-input.tsx

@@ -1,10 +1,13 @@
 'use client';
 
 import { useState } from 'react';
+import { Tag } from 'lucide-react';
 import type { Cart } from 'brainerce';
 import { getClient } from '@/core/lib/brainerce';
 import { useTranslations } from '@/core/lib/translations';
 import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
 import { cn } from '@/core/lib/utils';
 
 interface CouponInputProps {
@@ -75,19 +78,7 @@ export function CouponInput({ cart, checkoutId, onUpdate, className }: CouponInp
       <div className={cn('space-y-2', className)}>
         <div className="bg-muted flex items-center justify-between rounded px-3 py-2">
           <div className="flex items-center gap-2">
-            <svg
-              className="text-primary h-4 w-4 flex-shrink-0"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"
-              />
-            </svg>
+            <Tag className="text-primary h-4 w-4 flex-shrink-0" aria-hidden="true" />
             <span className="text-foreground text-sm font-medium">{appliedCoupon}</span>
           </div>
           <button
@@ -106,7 +97,7 @@ export function CouponInput({ cart, checkoutId, onUpdate, className }: CouponInp
   return (
     <div className={cn('space-y-2', className)}>
       <div className="flex gap-2">
-        <input
+        <Input
           type="text"
           value={code}
           onChange={(e) => {
@@ -120,23 +111,21 @@ export function CouponInput({ cart, checkoutId, onUpdate, className }: CouponInp
             }
           }}
           placeholder={t('placeholder')}
-          className={cn(
-            'bg-background text-foreground placeholder:text-muted-foreground focus:ring-primary/20 focus:border-primary h-9 flex-1 rounded border px-3 text-sm focus:outline-none focus:ring-2',
-            error ? 'border-destructive' : 'border-border'
-          )}
+          className={cn('h-9 flex-1 rounded', error && 'border-destructive')}
         />
-        <button
+        <Button
           type="button"
+          variant="outline"
           onClick={handleApply}
           disabled={applying || !code.trim()}
-          className="border-border bg-background text-foreground hover:bg-muted h-9 rounded border px-4 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-40"
+          className="h-9 rounded px-4 hover:bg-muted"
         >
           {applying ? (
             <LoadingSpinner size="sm" className="border-muted-foreground/30 border-t-foreground" />
           ) : (
             tc('apply')
           )}
-        </button>
+        </Button>
       </div>
 
       {error && <p className="text-destructive text-xs">{error}</p>}