@evershop/evershop 2.1.0 → 2.1.2

package/src/components/frontStore/cart/DefaultMiniCartDropdown.tsx

@@ -1,17 +1,25 @@
 import { Area } from '@components/common/Area.js';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle
+} from '@components/common/ui/Sheet.js';
 import { CartData } from '@components/frontStore/cart/CartContext.js';
 import { CartItems } from '@components/frontStore/cart/CartItems.js';
 import { CartTotalSummary } from '@components/frontStore/cart/CartTotalSummary.js';
 import { DefaultMiniCartDropdownEmpty } from '@components/frontStore/cart/DefaultMiniCartDropdownEmpty.js';
+import { DefaultMiniCartDropdownSummary } from '@components/frontStore/cart/DefaultMinicartDropdownSummary.js';
 import { DefaultMiniCartItemList } from '@components/frontStore/cart/DefaultMiniCartItemList.js';
 import { _ } from '@evershop/evershop/lib/locale/translate/_';
-import React, { useEffect, useRef } from 'react';
+import React from 'react';
 
 export const DefaultMiniCartDropdown: React.FC<{
   cart: CartData | null;
   isOpen: boolean;
   onClose: () => void;
   cartUrl?: string;
+  checkoutUrl?: string;
   dropdownPosition?: 'left' | 'right';
   setIsDropdownOpen: (isOpen: boolean) => void;
 }> = ({
@@ -19,85 +27,28 @@ export const DefaultMiniCartDropdown: React.FC<{
   isOpen,
   onClose,
   cartUrl,
+  checkoutUrl,
   dropdownPosition = 'right',
   setIsDropdownOpen
 }) => {
   const totalQty = cart?.totalQty || 0;
-  const closeButtonRef = useRef<HTMLButtonElement>(null);
-
-  useEffect(() => {
-    const handleEscKey = (e: KeyboardEvent) => {
-      if (isOpen && e.key === 'Escape') {
-        onClose();
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener('keydown', handleEscKey);
-      document.body.style.overflow = 'hidden';
-
-      setTimeout(() => {
-        if (closeButtonRef.current) {
-          closeButtonRef.current.focus();
-        }
-      }, 100);
-    }
-
-    return () => {
-      document.removeEventListener('keydown', handleEscKey);
-      document.body.style.overflow = '';
-    };
-  }, [isOpen, onClose]);
 
   return (
-    <>
-      <div
-        onClick={onClose}
-        className={`fixed inset-0 bg-black bg-opacity-50 z-40 transition-opacity duration-300 ${
-          isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
-        }`}
-        aria-hidden="true"
-      ></div>
-      <div
-        className={`minicart__dropdown fixed top-0 bottom-0 w-full md:w-1/3 bg-white border-x p-5 border-gray-200 z-50 shadow-xl transition-all duration-300 ease-in-out transform ${
-          isOpen ? 'translate-x-0' : 'translate-x-full'
-        } ${dropdownPosition === 'left' ? 'left-0' : 'right-0'}`}
-        role="dialog"
-        aria-modal="true"
-        aria-label={_('Shopping Cart')}
+    <Sheet open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <SheetContent
+        side={dropdownPosition}
+        className="w-full md:w-1/3 border-border"
       >
-        <div className="minicart__dropdown__header flex justify-between items-center mb-6 border-b pb-4 border-gray-200">
-          <h3 className="minicart__heading font-medium text-2xl text-gray-900">
+        <SheetHeader className="border-b border-border">
+          <SheetTitle className="font-medium text-xl">
             {_('Your Cart')}
-          </h3>
-          <button
-            type="button"
-            ref={closeButtonRef}
-            onClick={onClose}
-            className="text-gray-500 hover:text-gray-700 focus:outline-none focus:ring-2 rounded-full p-1"
-            aria-label={_('Close cart')}
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              className="h-6 w-6"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              strokeWidth={2}
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M6 18L18 6M6 6l12 12"
-              />
-            </svg>
-          </button>
-        </div>
+          </SheetTitle>
+        </SheetHeader>
         {totalQty === 0 ? (
           <DefaultMiniCartDropdownEmpty setIsDropdownOpen={setIsDropdownOpen} />
         ) : (
           <div
-            className="minicart__items__container flex flex-col justify-between h-full"
+            className="minicart__items__container flex flex-col px-5 justify-between h-full"
             style={{ height: 'calc(100vh - 150px)' }}
           >
             <Area id="miniCartItemsBefore" noOuter />
@@ -112,35 +63,18 @@ export const DefaultMiniCartDropdown: React.FC<{
             <Area id="miniCartSummaryBefore" noOuter />
             <CartTotalSummary>
               {({ total }) => (
-                <>
-                  <div className="minicart__summary flex justify-between items-center mb-3">
-                    <span className="font-medium text-gray-900">
-                      {_('Subtotal')}:
-                    </span>
-                    <span className="font-semibold text-lg text-gray-900">
-                      {total || '—'}
-                    </span>
-                  </div>
-                  <button
-                    type="button"
-                    onClick={() => {
-                      if (cartUrl) {
-                        window.location.href = cartUrl;
-                      }
-                    }}
-                    className="minicart__viewcart__button w-full bg-primary text-white py-4 px-4 rounded-full hover:bg-blue-700 transition-colors font-medium"
-                  >
-                    {_('View Cart (${totalQty})', {
-                      totalQty: totalQty.toString()
-                    })}
-                  </button>
-                </>
+                <DefaultMiniCartDropdownSummary
+                  total={total}
+                  cartUrl={cartUrl || '/cart'}
+                  checkoutUrl={checkoutUrl || '/checkout'}
+                  totalQty={totalQty}
+                />
               )}
             </CartTotalSummary>
             <Area id="miniCartSummaryAfter" noOuter />
           </div>
         )}
-      </div>
-    </>
+      </SheetContent>
+    </Sheet>
   );
 };

package/src/components/frontStore/cart/DefaultMiniCartDropdownEmpty.tsx

@@ -1,6 +1,7 @@
 import { Area } from '@components/common/Area.js';
+import { Button } from '@components/common/ui/Button.js';
 import { _ } from '@evershop/evershop/lib/locale/translate/_';
-import { ShoppingBagIcon } from '@heroicons/react/24/outline';
+import { ShoppingBag } from 'lucide-react';
 import React from 'react';
 
 export const DefaultMiniCartDropdownEmpty: React.FC<{
@@ -8,19 +9,19 @@ export const DefaultMiniCartDropdownEmpty: React.FC<{
 }> = ({ setIsDropdownOpen }) => (
   <div className="minicart__empty p-8 text-center">
     <Area id="miniCartEmptyBefore" noOuter />
-    <ShoppingBagIcon
+    <ShoppingBag
       width={48}
       height={48}
-      className="mx-auto text-gray-300 mb-4"
+      className="mx-auto text-muted-foreground mb-4"
     />
-    <p className="text-gray-500 mb-4">{_('Your cart is empty')}</p>
-    <button
-      type="button"
+    <p className="text-muted-foreground mb-4">{_('Your cart is empty')}</p>
+    <Button
+      variant="default"
       onClick={() => setIsDropdownOpen(false)}
-      className="continue__shopping__button text-blue-600 hover:text-blue-700 font-medium"
+      size={'lg'}
     >
       {_('Continue Shopping')}
-    </button>
+    </Button>
     <Area id="miniCartEmptyAfter" noOuter />
   </div>
 );

package/src/components/frontStore/cart/DefaultMiniCartIcon.tsx

@@ -1,4 +1,4 @@
-import { ShoppingBagIcon } from '@heroicons/react/24/outline';
+import { ShoppingBag } from 'lucide-react';
 import React from 'react';
 
 export const DefaultMiniCartIcon = ({
@@ -28,17 +28,13 @@ export const DefaultMiniCartIcon = ({
     >
       {syncStatus.syncing ? (
         <div className="w-6 h-6 flex items-center justify-center">
-          <div className="animate-spin rounded-full h-4 w-4 border-2 border-gray-300 border-t-gray-700"></div>
+          <div className="animate-spin rounded-full h-4 w-4 border-2 border-border"></div>
         </div>
       ) : (
-        <ShoppingBagIcon
-          width={24}
-          height={24}
-          className="text-gray-700 hover:text-gray-900 transition-colors"
-        />
+        <ShoppingBag className="w-5 h-5 text-foreground hover:text-primary" />
       )}
       {showItemCount && totalQty > 0 && !syncStatus.syncing && (
-        <span className="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center font-semibold">
+        <span className="absolute -top-2 -right-2 bg-primary text-primary-foreground text-xs rounded-full h-4 w-4 flex items-center justify-center font-normal">
           {totalQty > 99 ? '99+' : totalQty}
         </span>
       )}

package/src/components/frontStore/cart/DefaultMinicartDropdownSummary.tsx

@@ -0,0 +1,57 @@
+import Area from '@components/common/Area.js';
+import { Button } from '@components/common/ui/Button.js';
+import { _ } from '@evershop/evershop/lib/locale/translate/_';
+import React from 'react';
+
+export function DefaultMiniCartDropdownSummary({
+  total,
+  cartUrl,
+  checkoutUrl,
+  totalQty
+}: {
+  total: string;
+  cartUrl: string;
+  checkoutUrl: string;
+  totalQty: number;
+}) {
+  return (
+    <>
+      <div className="minicart__summary flex justify-between items-center mb-3">
+        <span className="font-medium text-gray-900">{_('Subtotal')}:</span>
+        <span className="font-semibold text-lg text-gray-900">
+          {total || '—'}
+        </span>
+      </div>
+      <Area id="miniCartSummaryViewCartButtonBefore" noOuter />
+      <Button
+        variant={'outline'}
+        size={'lg'}
+        onClick={() => {
+          if (cartUrl) {
+            window.location.href = cartUrl;
+          }
+        }}
+        className="minicart__viewcart__button w-full "
+      >
+        {_('View Cart (${totalQty})', {
+          totalQty: totalQty.toString()
+        })}
+      </Button>
+      <Area id="miniCartSummaryViewCartButtonAfter" noOuter />
+      <Area id="miniCartSummaryCheckoutButtonBefore" noOuter />
+      <Button
+        variant={'default'}
+        size={'lg'}
+        onClick={() => {
+          if (checkoutUrl) {
+            window.location.href = checkoutUrl;
+          }
+        }}
+        className="minicart__checkout__button w-full "
+      >
+        {_('Checkout')}
+      </Button>
+      <Area id="miniCartSummaryCheckoutButtonAfter" noOuter />
+    </>
+  );
+}

package/src/components/frontStore/cart/MiniCart.tsx

@@ -10,6 +10,7 @@ import React, { useCallback, useState, useEffect } from 'react';
 
 interface MiniCartProps {
   cartUrl?: string;
+  checkoutUrl?: string;
   dropdownPosition?: 'left' | 'right';
   showItemCount?: boolean;
   CartIconComponent?: React.FC<{
@@ -34,6 +35,7 @@ interface MiniCartProps {
 
 export function MiniCart({
   cartUrl = '/cart',
+  checkoutUrl = '/checkout',
   dropdownPosition = 'right',
   showItemCount = true,
   CartIconComponent,
@@ -99,6 +101,7 @@ export function MiniCart({
           dropdownPosition={dropdownPosition}
           onClose={handleDropdownClose}
           cartUrl={cartUrl}
+          checkoutUrl={checkoutUrl}
           setIsDropdownOpen={setIsDropdownOpen}
         />
       )}

package/src/components/frontStore/cart/ShoppingCartEmpty.tsx

@@ -1,10 +1,13 @@
-import Button from '@components/common/Button.js';
+import { Button } from '@components/common/ui/Button.js';
 import { _ } from '@evershop/evershop/lib/locale/translate/_';
 import React from 'react';
 
 export function ShoppingCartEmpty() {
   return (
-    <div className="empty-shopping-cart w-100" style={{ marginTop: '150px' }}>
+    <div
+      className="empty-shopping-cart w-full flex justify-center"
+      style={{ marginTop: '150px' }}
+    >
       <div>
         <div className="text-center shopping-cart-heading">
           <h2>{_('Shopping cart')}</h2>
@@ -13,29 +16,26 @@ export function ShoppingCartEmpty() {
           <span>{_('Your cart is empty!')}</span>
         </div>
         <div className="flex justify-center mt-5">
-          <Button
-            url="/"
-            title={
-              <span className="flex space-x-2">
-                <span className="self-center">{_('CONTINUE SHOPPING')}</span>{' '}
-                <svg
-                  className="self-center"
-                  style={{ width: '2.5rem', height: '2.5rem' }}
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={1}
-                    d="M17 8l4 4m0 0l-4 4m4-4H3"
-                  />
-                </svg>
-              </span>
-            }
-          />
+          <Button size={'lg'} onClick={() => (window.location.href = '/')}>
+            <span className="flex space-x-2">
+              <span className="self-center">{_('CONTINUE SHOPPING')}</span>{' '}
+              <svg
+                className="self-center"
+                style={{ width: '2rem', height: '2rem' }}
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={1}
+                  d="M17 8l4 4m0 0l-4 4m4-4H3"
+                />
+              </svg>
+            </span>
+          </Button>
         </div>
       </div>
     </div>

package/src/components/frontStore/catalog/CategoryInfo.tsx

@@ -8,7 +8,7 @@ export function CategoryInfo() {
   const { name, description, image } = useCategory();
   return (
     <>
-      <Area id="beforeCategoryInfo" noOuter />
+      <Area id="beforeCategoryInfo" />
       <div className="mb-2 md:mb-5 category__general">
         {image && (
           <Image
@@ -27,7 +27,7 @@ export function CategoryInfo() {
           </div>
         </div>
       </div>
-      <Area id="afterCategoryInfo" noOuter />
+      <Area id="afterCategoryInfo" />
     </>
   );
 }

package/src/components/frontStore/catalog/CategoryProductsFilter.tsx

@@ -19,8 +19,7 @@ export function CategoryProductsFilter() {
         {(renderProps) => (
           <DefaultProductFilterRender
             renderProps={renderProps}
-            title="Product Filters"
-            className="my-custom-class"
+            title={_('Product Filters')}
             showFilterSummary={true}
           />
         )}

package/src/components/frontStore/catalog/DefaultAttributeFilterRender.tsx

@@ -1,3 +1,6 @@
+import { Button } from '@components/common/ui/Button.js';
+import { Checkbox } from '@components/common/ui/Checkbox.js';
+import { Label } from '@components/common/ui/Label.js';
 import {
   FilterableAttribute,
   FilterInput,
@@ -105,20 +108,14 @@ export const DefaultAttributeFilterRender: React.FC<{
         return (
           <div
             key={attribute.attributeCode}
-            className="attribute__filter__section border-b border-gray-200 pb-2 mb-2"
+            className="attribute__filter__section border-b border-border pb-2 mb-2"
           >
-            {/* Header with title, count, and collapse toggle */}
             <div className="filter__header flex items-center justify-between mb-3">
               <button
                 onClick={() => toggleCollapse(attribute.attributeCode)}
-                className="flex items-center space-x-2 text-left flex-1 hover:text-blue-600 transition-colors"
+                className="flex items-center justify-between text-left flex-1 hover:text-primary transition-colors"
               >
                 <span className="font-medium">{attribute.attributeName}</span>
-                {selectedCount > 0 && (
-                  <span className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
-                    {selectedCount}
-                  </span>
-                )}
                 <svg
                   className={`w-4 h-4 transition-transform ${
                     isCollapsed ? 'rotate-180' : ''
@@ -137,32 +134,31 @@ export const DefaultAttributeFilterRender: React.FC<{
               </button>
 
               {selectedCount > 0 && (
-                <button
+                <Button
+                  variant={'link'}
                   onClick={() => clearAttributeFilter(attribute.attributeCode)}
-                  className="text-gray-400 hover:text-red-500 text-sm transition-colors"
+                  className="hover:text-destructive text-sm transition-colors"
                   title="Clear all"
                 >
                   ✕
-                </button>
+                </Button>
               )}
             </div>
 
             {!isCollapsed && (
               <div className="filter__content">
-                {/* Search input for attributes with many options */}
                 {attribute.options.length > 5 && (
                   <div className="mb-3">
-                    <input
-                      type="text"
-                      placeholder={`Search ${attribute.attributeName.toLowerCase()}...`}
+                    <Checkbox
                       value={searchTerms[attribute.attributeCode] || ''}
-                      onChange={(e) =>
+                      onCheckedChange={(checked) =>
                         setSearchTerms((prev) => ({
                           ...prev,
-                          [attribute.attributeCode]: e.target.value
+                          [attribute.attributeCode]: checked
+                            ? checked.toString()
+                            : ''
                         }))
                       }
-                      className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                     />
                   </div>
                 )}
@@ -175,40 +171,31 @@ export const DefaultAttributeFilterRender: React.FC<{
                         option.optionId.toString()
                       );
                       return (
-                        <label
+                        <div
                           key={option.optionId}
-                          className={`flex items-center space-x-3 cursor-pointer p-2 rounded hover:bg-gray-50 transition-colors ${
-                            isSelected
-                              ? 'bg-blue-50 border border-blue-200'
-                              : ''
-                          }`}
+                          className={`flex items-center space-x-2 cursor-pointer py-2`}
                         >
-                          <input
-                            type="checkbox"
+                          <Checkbox
                             checked={isSelected}
-                            onChange={(e) =>
+                            id={`${attribute.attributeCode}-${option.optionId}`}
+                            onCheckedChange={(checked) =>
                               handleAttributeChange(
                                 attribute.attributeCode,
                                 option.optionId.toString(),
-                                e.target.checked
+                                checked
                               )
                             }
-                            className="form-checkbox h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                           />
-                          <span
-                            className={`text-sm ${
-                              isSelected
-                                ? 'font-medium text-blue-900'
-                                : 'text-gray-700'
-                            }`}
+                          <Label
+                            htmlFor={`${attribute.attributeCode}-${option.optionId}`}
                           >
                             {option.optionText}
-                          </span>
-                        </label>
+                          </Label>
+                        </div>
                       );
                     })
                   ) : (
-                    <div className="text-gray-500 text-sm text-center py-4">
+                    <div className="text-muted-foreground text-sm text-center py-4">
                       {_('No options found for "${code}"', {
                         code: searchTerms[attribute.attributeCode]
                       })}
@@ -218,11 +205,14 @@ export const DefaultAttributeFilterRender: React.FC<{
 
                 {!searchTerms[attribute.attributeCode] &&
                   attribute.options.length > 10 && (
-                    <button className="text-blue-600 text-sm mt-2 hover:underline">
+                    <Button
+                      variant={'link'}
+                      className="text-primary text-sm mt-2 hover:underline"
+                    >
                       {_('Show all ${count} options', {
                         count: attribute.options.length.toString()
                       })}
-                    </button>
+                    </Button>
                   )}
               </div>
             )}

package/src/components/frontStore/catalog/DefaultCategoryFilterRender.tsx

@@ -1,3 +1,5 @@
+import { Checkbox } from '@components/common/ui/Checkbox.js';
+import { Label } from '@components/common/ui/Label.js';
 import {
   CategoryFilter,
   FilterInput,
@@ -15,7 +17,7 @@ export const DefaultCategoryFilterRender: React.FC<{
   const [isCollapsed, setIsCollapsed] = useState(false);
 
   const handleCategoryChange = (categoryId: string, checked: boolean) => {
-    let newFilters = [...currentFilters];
+    let newFilters = currentFilters.map((f) => ({ ...f }));
     const existingFilter = newFilters.find((f) => f.key === 'cat');
 
     if (checked) {
@@ -76,18 +78,13 @@ export const DefaultCategoryFilterRender: React.FC<{
   const filteredCategories = getFilteredCategories();
 
   return (
-    <div className="category__filter__section border-b border-gray-200 pb-2 mb-2">
+    <div className="category__filter__section border-b border-border pb-2 mb-2">
       <div className="filter__header flex items-center justify-between mb-3">
         <button
           onClick={() => setIsCollapsed(!isCollapsed)}
-          className="flex items-center space-x-2 text-left flex-1 hover:text-blue-600 transition-colors"
+          className="flex items-center justify-between text-left flex-1 hover:text-primary transition-colors"
         >
           <span className="font-medium">Categories</span>
-          {selectedCount > 0 && (
-            <span className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
-              {selectedCount}
-            </span>
-          )}
           <svg
             className={`w-4 h-4 transition-transform ${
               isCollapsed ? 'rotate-180' : ''
@@ -108,7 +105,7 @@ export const DefaultCategoryFilterRender: React.FC<{
         {selectedCount > 0 && (
           <button
             onClick={clearCategoryFilter}
-            className="text-gray-400 hover:text-red-500 text-sm transition-colors"
+            className="text-muted-foreground hover:text-destructive text-sm transition-colors"
             title="Clear categories"
           >
             ✕
@@ -118,18 +115,6 @@ export const DefaultCategoryFilterRender: React.FC<{
 
       {!isCollapsed && (
         <div className="filter__content">
-          {categories.length > 5 && (
-            <div className="mb-3">
-              <input
-                type="text"
-                placeholder="Search categories..."
-                value={searchTerm}
-                onChange={(e) => setSearchTerm(e.target.value)}
-                className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
-              />
-            </div>
-          )}
-
           <div className="category__options space-y-2 max-h-48 overflow-y-auto">
             {filteredCategories.length > 0 ? (
               filteredCategories.map((category) => {
@@ -137,33 +122,24 @@ export const DefaultCategoryFilterRender: React.FC<{
                   category.categoryId.toString()
                 );
                 return (
-                  <label
+                  <div
                     key={category.categoryId}
-                    className={`flex items-center space-x-3 cursor-pointer p-2 rounded hover:bg-gray-50 transition-colors ${
-                      isSelected ? 'bg-blue-50 border border-blue-200' : ''
-                    }`}
+                    className={`flex items-center space-x-3 cursor-pointer py-2`}
                   >
-                    <input
-                      type="checkbox"
+                    <Checkbox
+                      id={`category-${category.categoryId}`}
                       checked={isSelected}
-                      onChange={(e) =>
+                      onCheckedChange={(checked) =>
                         handleCategoryChange(
                           category.categoryId.toString(),
-                          e.target.checked
+                          checked
                         )
                       }
-                      className="form-checkbox h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                     />
-                    <span
-                      className={`text-sm ${
-                        isSelected
-                          ? 'font-medium text-blue-900'
-                          : 'text-gray-700'
-                      }`}
-                    >
+                    <Label htmlFor={`category-${category.categoryId}`}>
                       {category.name}
-                    </span>
-                  </label>
+                    </Label>
+                  </div>
                 );
               })
             ) : (