create-brainerce-store 1.50.5 → 1.52.0

package/templates/nextjs/base/src/app/verify-email/page.tsx

@@ -1,11 +1,11 @@
 'use client';
 
 import { Suspense, useState, useRef, useEffect, useCallback } from 'react';
-import { useRouter, Link } from '@/lib/navigation';
-import { useAuth } from '@/providers/store-provider';
-import { proxyVerifyEmail, proxyResendVerification } from '@/lib/auth';
-import { LoadingSpinner } from '@/components/shared/loading-spinner';
-import { useTranslations } from '@/lib/translations';
+import { useRouter, Link } from '@/core/lib/navigation';
+import { useAuth } from '@/core/providers/store-provider';
+import { proxyVerifyEmail, proxyResendVerification } from '@/core/lib/auth';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { useTranslations } from '@/core/lib/translations';
 
 const CODE_LENGTH = 6;
 const RESEND_COOLDOWN_SECONDS = 60;

package/templates/nextjs/base/src/components/account/address-book.tsx

@@ -2,9 +2,9 @@
 
 import { useState } from 'react';
 import type { CustomerAddress, CreateAddressDto } from 'brainerce';
-import { getClient } from '@/lib/brainerce';
-import { useTranslations } from '@/lib/translations';
-import { cn } from '@/lib/utils';
+import { getClient } from '@/core/lib/brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
 
 interface AddressBookProps {
   addresses: CustomerAddress[];

package/templates/nextjs/base/src/components/account/order-customizations.tsx

@@ -1,9 +1,9 @@
 'use client';
 
-import { CdnImage as Image } from '@/components/shared/cdn-image';
+import { CdnImage as Image } from '@/ui/shared/cdn-image';
 import type { OrderItem } from 'brainerce';
-import { useTranslations } from '@/lib/translations';
-import { cn } from '@/lib/utils';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
 
 type Customizations = NonNullable<OrderItem['customizations']>;
 type CustomizationEntry = Customizations[string];

package/templates/nextjs/base/src/components/account/order-history.tsx

@@ -1,13 +1,13 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { CdnImage as Image } from '@/components/shared/cdn-image';
+import { CdnImage as Image } from '@/ui/shared/cdn-image';
 import type { Order, OrderStatus, OrderDownloadLink } from 'brainerce';
 import { formatPrice } from 'brainerce';
-import { getClient } from '@/lib/brainerce';
-import { useCurrency } from '@/lib/use-currency';
-import { useTranslations } from '@/lib/translations';
-import { cn } from '@/lib/utils';
+import { getClient } from '@/core/lib/brainerce';
+import { useCurrency } from '@/core/lib/use-currency';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
 import { OrderCustomizations } from './order-customizations';
 import { OrderStatusTimeline } from './order-status-timeline';
 import { OrderShippingBlock } from './order-shipping-block';
@@ -207,6 +207,14 @@ function OrderCard({ order }: { order: Order }) {
           <OrderShippingBlock order={order} />
           <OrderPaymentBlock order={order} />
 
+          {/* The shopper's own checkout note, read-only */}
+          {order.notes && (
+            <div className="border-border border-t pt-2">
+              <p className="text-foreground text-sm font-medium">{t('orderNotes')}</p>
+              <p className="text-muted-foreground text-sm whitespace-pre-wrap">{order.notes}</p>
+            </div>
+          )}
+
           {/* Downloads section */}
           {order.hasDownloads && <OrderDownloads orderId={order.id} />}
 

package/templates/nextjs/base/src/components/account/order-payment-block.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import type { Order } from 'brainerce';
-import { useTranslations } from '@/lib/translations';
-import { cn } from '@/lib/utils';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
 
 interface OrderPaymentBlockProps {
   order: Order;

package/templates/nextjs/base/src/components/account/order-shipping-block.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import type { Order } from 'brainerce';
-import { useTranslations } from '@/lib/translations';
-import { cn } from '@/lib/utils';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
 
 interface OrderShippingBlockProps {
   order: Order;

package/templates/nextjs/base/src/components/account/order-status-timeline.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import type { Order, OrderStatus } from 'brainerce';
-import { useTranslations } from '@/lib/translations';
-import { cn } from '@/lib/utils';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
 
 const STATUS_KEYS: Record<
   OrderStatus,

package/templates/nextjs/base/src/components/account/profile-section.tsx

@@ -2,9 +2,9 @@
 
 import { useState } from 'react';
 import type { CustomerProfile } from 'brainerce';
-import { getClient } from '@/lib/brainerce';
-import { useTranslations } from '@/lib/translations';
-import { cn } from '@/lib/utils';
+import { getClient } from '@/core/lib/brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
 
 interface ProfileSectionProps {
   profile: CustomerProfile;

package/templates/nextjs/base/src/components/auth/login-form.tsx

@@ -1,10 +1,10 @@
 'use client';
 
 import { useState } from 'react';
-import { Link } from '@/lib/navigation';
-import { useTranslations } from '@/lib/translations';
-import { cn } from '@/lib/utils';
-import { LoadingSpinner } from '@/components/shared/loading-spinner';
+import { Link } from '@/core/lib/navigation';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
 
 interface LoginFormProps {
   onSubmit: (email: string, password: string) => Promise<void>;

package/templates/nextjs/base/src/components/auth/oauth-buttons.tsx

@@ -2,10 +2,10 @@
 
 import { useState, useEffect } from 'react';
 import type { CustomerOAuthProvider } from 'brainerce';
-import { getClient } from '@/lib/brainerce';
-import { useTranslations } from '@/lib/translations';
-import { cn } from '@/lib/utils';
-import { LoadingSpinner } from '@/components/shared/loading-spinner';
+import { getClient } from '@/core/lib/brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
 
 const PROVIDER_CONFIG: Record<CustomerOAuthProvider, { labelKey: string; icon: React.ReactNode }> =
   {

package/templates/nextjs/base/src/components/auth/register-form.tsx

@@ -1,10 +1,10 @@
 'use client';
 
 import { useState, useMemo } from 'react';
-import { useTranslations } from '@/lib/translations';
-import { cn } from '@/lib/utils';
-import { LoadingSpinner } from '@/components/shared/loading-spinner';
-import { getPasswordError } from '@/lib/validation';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { getPasswordError } from '@/core/lib/validation';
 
 interface RegisterData {
   firstName: string;

package/templates/nextjs/base/src/components/brainerce-bot.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useRef } from 'react';
 
-import { useCart } from '@/providers/store-provider';
+import { useCart } from '@/core/providers/store-provider';
 
 /**
  * Mounts the Brainerce AI chat widget (the store's shopping assistant).
@@ -36,7 +36,7 @@ export function BrainerceBotWidget() {
         baseUrl: process.env.NEXT_PUBLIC_BRAINERCE_API_URL || undefined,
         onAddToCart: async ({ productId, variantId, quantity }) => {
           try {
-            const { getClient } = await import('@/lib/brainerce');
+            const { getClient } = await import('@/core/lib/brainerce');
             await getClient().smartAddToCart({
               productId,
               variantId: variantId ?? undefined,

package/templates/nextjs/base/src/components/checkout/checkout-form.tsx

@@ -2,9 +2,9 @@
 
 import { useState, useEffect, useRef } from 'react';
 import type { SetShippingAddressDto, ShippingDestinations } from 'brainerce';
-import { useTranslations } from '@/lib/translations';
-import { cn } from '@/lib/utils';
-import { isValidEmail } from '@/lib/validation';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+import { isValidEmail } from '@/core/lib/validation';
 
 interface CheckoutConsent {
   acceptsMarketing: boolean;
@@ -41,6 +41,7 @@ export function CheckoutForm({
     postalCode: initialValues?.postalCode || '',
     country: initialValues?.country || '',
     phone: initialValues?.phone || '',
+    notes: initialValues?.notes || '',
   });
   const [errors, setErrors] = useState<Record<string, string>>({});
   const [privacyAccepted, setPrivacyAccepted] = useState(false);
@@ -65,6 +66,7 @@ export function CheckoutForm({
       postalCode: initialValues.postalCode || prev.postalCode,
       country: initialValues.country || prev.country,
       phone: initialValues.phone || prev.phone || '',
+      notes: prev.notes || '',
     }));
   }, [initialValues]);
 
@@ -346,6 +348,25 @@ export function CheckoutForm({
         </>
       )}
 
+      {/* Order notes (optional) */}
+      <div>
+        <label htmlFor="orderNotes" className="text-foreground mb-1 block text-sm font-medium">
+          {t('orderNotes')}
+        </label>
+        <textarea
+          id="orderNotes"
+          value={formData.notes || ''}
+          onChange={(e) => updateField('notes', e.target.value)}
+          maxLength={2000}
+          rows={3}
+          className={cn(
+            inputClass,
+            'border-border h-auto min-h-[80px] resize-y py-2 leading-relaxed'
+          )}
+          placeholder={t('orderNotesPlaceholder')}
+        />
+      </div>
+
       {/* Privacy Policy (required) */}
       <div>
         <label className="flex cursor-pointer items-start gap-2">

package/templates/nextjs/base/src/components/checkout/custom-fields-step.tsx

@@ -2,8 +2,8 @@
 
 import { useState } from 'react';
 import type { CheckoutCustomFieldDefinition } from 'brainerce';
-import { useTranslations } from '@/lib/translations';
-import { cn } from '@/lib/utils';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
 
 interface CustomFieldsStepProps {
   fields: CheckoutCustomFieldDefinition[];

package/templates/nextjs/base/src/components/checkout/delivery-method-step.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { useTranslations } from '@/lib/translations';
-import { cn } from '@/lib/utils';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
 
 interface DeliveryMethodStepProps {
   onSelect: (method: 'shipping' | 'pickup') => void;

package/templates/nextjs/base/src/components/checkout/order-bump-card.tsx

@@ -1,12 +1,12 @@
 'use client';
 
 import { useState, useMemo } from 'react';
-import { CdnImage as Image } from '@/components/shared/cdn-image';
+import { CdnImage as Image } from '@/ui/shared/cdn-image';
 import type { OrderBump, RecommendationVariant } from 'brainerce';
 import { formatPrice, getVariantOptions } from 'brainerce';
-import { useCurrency } from '@/lib/use-currency';
-import { useTranslations } from '@/lib/translations';
-import { cn } from '@/lib/utils';
+import { useCurrency } from '@/core/lib/use-currency';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
 
 interface OrderBumpCardProps {
   bump: OrderBump;

package/templates/nextjs/base/src/components/checkout/payment-step.tsx

@@ -3,12 +3,12 @@
 import { useEffect, useState, useRef, useCallback, type CSSProperties } from 'react';
 import type { PaymentIntent, PaymentClientSdk } from 'brainerce';
 import { formatPrice } from 'brainerce';
-import { getClient } from '@/lib/brainerce';
-import { useTranslations } from '@/lib/translations';
-import { LoadingSpinner } from '@/components/shared/loading-spinner';
-import { useStoreInfo } from '@/providers/store-provider';
-import { cn } from '@/lib/utils';
-import { isAllowedPaymentUrl, isValidCheckoutId, safePaymentRedirect } from '@/lib/safe-redirect';
+import { getClient } from '@/core/lib/brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { useStoreInfo } from '@/core/providers/store-provider';
+import { cn } from '@/core/lib/utils';
+import { isAllowedPaymentUrl, isValidCheckoutId, safePaymentRedirect } from '@/core/lib/safe-redirect';
 
 /**
  * Backward-compat defaults when backend doesn't return clientSdk.
@@ -76,16 +76,6 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
   const t = useTranslations('checkout');
   const { storeInfo } = useStoreInfo();
 
-  // Defense in depth: the parent already validates checkoutId from URL params,
-  // but we re-check here so the component is safe to render in any context.
-  if (!isValidCheckoutId(checkoutId)) {
-    return (
-      <div className={cn('border-destructive/50 rounded-md border p-4', className)}>
-        <p className="text-destructive text-sm">{t('paymentError')}</p>
-      </div>
-    );
-  }
-
   const [paymentIntent, setPaymentIntent] = useState<PaymentIntent | null>(null);
   const [preloadedSdk, setPreloadedSdk] = useState<PaymentClientSdk | null>(null);
   const [loading, setLoading] = useState(true);
@@ -174,6 +164,10 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
   // "call createPaymentProcess right before you need to render the wallet"
   // =========================================================================
   useEffect(() => {
+    // Defense in depth: the parent already validates checkoutId from URL
+    // params, but we re-check here so the component is safe to render in any
+    // context. Invalid id → no SDK loading, no API calls (error UI below).
+    if (!isValidCheckoutId(checkoutId)) return;
     if (initialized.current) return;
     initialized.current = true;
 
@@ -488,6 +482,16 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
 
   // --- UI ---
 
+  // Invalid checkout id — render the error box instead of ever spinning.
+  // (Checked after the hooks above so hook order is stable across renders.)
+  if (!isValidCheckoutId(checkoutId)) {
+    return (
+      <div className={cn('border-destructive/50 rounded-md border p-4', className)}>
+        <p className="text-destructive text-sm">{t('paymentError')}</p>
+      </div>
+    );
+  }
+
   if (loading) {
     return (
       <div className={cn('flex flex-col items-center justify-center py-12', className)}>

package/templates/nextjs/base/src/components/checkout/pickup-step.tsx

@@ -3,9 +3,9 @@
 import { useState } from 'react';
 import type { PickupLocation } from 'brainerce';
 import { formatPrice } from 'brainerce';
-import { useTranslations } from '@/lib/translations';
-import { useCurrency } from '@/lib/use-currency';
-import { cn } from '@/lib/utils';
+import { useTranslations } from '@/core/lib/translations';
+import { useCurrency } from '@/core/lib/use-currency';
+import { cn } from '@/core/lib/utils';
 
 interface PickupStepProps {
   locations: PickupLocation[];

package/templates/nextjs/base/src/components/checkout/shipping-step.tsx

@@ -2,9 +2,9 @@
 
 import type { ShippingRate } from 'brainerce';
 import { formatPrice } from 'brainerce';
-import { useTranslations } from '@/lib/translations';
-import { useCurrency } from '@/lib/use-currency';
-import { cn } from '@/lib/utils';
+import { useTranslations } from '@/core/lib/translations';
+import { useCurrency } from '@/core/lib/use-currency';
+import { cn } from '@/core/lib/utils';
 
 interface ShippingStepProps {
   rates: ShippingRate[];

package/templates/nextjs/base/src/components/checkout/tax-display.tsx

@@ -2,9 +2,9 @@
 
 import type { TaxBreakdown } from 'brainerce';
 import { formatPrice } from 'brainerce';
-import { useTranslations } from '@/lib/translations';
-import { useCurrency } from '@/lib/use-currency';
-import { cn } from '@/lib/utils';
+import { useTranslations } from '@/core/lib/translations';
+import { useCurrency } from '@/core/lib/use-currency';
+import { cn } from '@/core/lib/utils';
 
 interface TaxDisplayProps {
   /** Whether shipping address has been set */

package/templates/nextjs/base/src/components/seo/organization-json-ld.tsx

@@ -1,6 +1,6 @@
 import type { StoreInfo } from 'brainerce';
-import { getNonce } from '@/lib/nonce';
-import { stripHtmlForSeo } from '@/lib/seo';
+import { getNonce } from '@/core/lib/nonce';
+import { stripHtmlForSeo } from '@/core/lib/seo';
 
 interface OrganizationJsonLdProps {
   storeInfo: StoreInfo;

package/templates/nextjs/base/src/components/seo/product-json-ld.tsx

@@ -1,8 +1,8 @@
 import type { Product } from 'brainerce';
 import { getProductPriceInfo } from 'brainerce';
-import { getNonce } from '@/lib/nonce';
-import { resolveCurrency } from '@/lib/resolve-currency';
-import { stripHtmlForSeo } from '@/lib/seo';
+import { getNonce } from '@/core/lib/nonce';
+import { resolveCurrency } from '@/core/lib/resolve-currency';
+import { stripHtmlForSeo } from '@/core/lib/seo';
 
 interface ProductJsonLdProps {
   product: Product;

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

@@ -0,0 +1,53 @@
+'use client';
+
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDown } from 'lucide-react';
+
+import { cn } from '@/core/lib/utils';
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item ref={ref} className={cn('border-b', className)} {...props} />
+));
+AccordionItem.displayName = 'AccordionItem';
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'flex flex-1 items-center justify-between py-4 text-start font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn('pb-4 pt-0', className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

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

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/core/lib/utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };

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

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/core/lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        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',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

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

@@ -0,0 +1,55 @@
+import * as React from 'react';
+
+import { cn } from '@/core/lib/utils';
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
+      {...props}
+    />
+  )
+);
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+  )
+);
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('text-2xl font-semibold leading-none tracking-tight', className)}
+      {...props}
+    />
+  )
+);
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+  )
+);
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+  )
+);
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+  )
+);
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

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

@@ -0,0 +1,28 @@
+'use client';
+
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Check } from 'lucide-react';
+
+import { cn } from '@/core/lib/utils';
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };