@beyondcorp/beyond-ui 1.2.26 → 1.2.30

package/dist/components/AllProductsView/AllProductsView.d.ts

@@ -1,13 +1,5 @@
 import React from 'react';
 import { ProductData } from '../SingleProductView/SingleProductView';
-/**
- * AllProductsView
- * - Renders a responsive product grid using DashboardGrid.
- * - By default, uses 1 column (sm), 2 columns (md), and 4 columns (lg/xl/2xl) for optimal card sizing.
- * - UI library consumers can override the number of columns via the `columns` prop.
- * - Ensures ProductCard maintains a usable min/max width for visual consistency.
- * - All logic is theme-agnostic and leverages reusable hooks/components.
- */
 export interface AllProductsViewProps {
     products: ProductData[];
     onProductClick?: (productId: string) => void;
@@ -18,8 +10,5 @@ export interface AllProductsViewProps {
     enableFilter?: boolean;
     enableSort?: boolean;
     className?: string;
-    columns?: number;
-    itemMinWidth?: string;
-    itemMaxWidth?: string;
 }
 export declare const AllProductsView: React.FC<AllProductsViewProps>;

package/dist/components/AllProductsView/AllProductsView.js

@@ -16,20 +16,13 @@ import { cn } from '../../utils/cn.js';
 import { ProductCard } from './ProductCard.js';
 import { DashboardGrid } from '../DashboardGrid/DashboardGrid.js';
 
-const AllProductsView = ({ products, onProductClick, onAddToCart, onWishlist, onShare, enableSearch = true, enableFilter = true, enableSort = true, className, columns, itemMinWidth = "220px", itemMaxWidth = "320px", }) => {
+const AllProductsView = ({ products, onProductClick, onAddToCart, onWishlist, onShare, enableSearch = true, enableFilter = true, enableSort = true, className, }) => {
     const [search, setSearch] = useState('');
     const debouncedSearch = useDebounce(search, 300);
     const [sort, setSort] = useState('featured');
     const [filter, setFilter] = useState('all');
     const { currentBreakpoint, isBelow } = useBreakpoint();
     isBelow('md');
-    (() => {
-        if (isBelow('md'))
-            return 1;
-        if (isBelow('lg'))
-            return 2;
-        return 4; // lg, xl, 2xl
-    })();
     // Filter and sort products
     const filteredProducts = useMemo(() => {
         let result = products;
@@ -61,7 +54,7 @@ const AllProductsView = ({ products, onProductClick, onAddToCart, onWishlist, on
                                         { value: 'featured', label: 'Featured' },
                                         { value: 'price-asc', label: 'Price: Low to High' },
                                         { value: 'price-desc', label: 'Price: High to Low' },
-                                    ], className: "w-full sm:w-40" }))] }) }) }) }), jsx(PageLayoutContent, { layout: "centered", spacing: "lg", children: jsx(DashboardGrid, { columns: columns, itemMinWidth: itemMinWidth, itemMaxWidth: itemMaxWidth, children: filteredProducts.length === 0 ? (jsx("div", { className: "col-span-full text-center text-gray-500 py-12", children: "No products found." })) : (filteredProducts.map((product) => (jsx(ProductCard, { product: product, onClick: () => onProductClick && onProductClick(product.id), onAddToCart: () => onAddToCart && onAddToCart(product.id), onWishlist: () => onWishlist && onWishlist(product.id), onShare: () => onShare && onShare(product.id) }, product.id)))) }) })] }));
+                                    ], className: "w-full sm:w-40" }))] }) }) }) }), jsx(PageLayoutContent, { layout: "centered", spacing: "lg", children: jsx(DashboardGrid, { columns: 3, children: filteredProducts.length === 0 ? (jsx("div", { className: "col-span-full text-center text-gray-500 py-12", children: "No products found." })) : (filteredProducts.map((product) => (jsx(ProductCard, { product: product, onClick: () => onProductClick && onProductClick(product.id), onAddToCart: () => onAddToCart && onAddToCart(product.id), onWishlist: () => onWishlist && onWishlist(product.id), onShare: () => onShare && onShare(product.id) }, product.id)))) }) })] }));
 };
 
 export { AllProductsView };

package/dist/components/AllProductsView/AllProductsView.js.map

@@ -1 +1 @@
-{"version":3,"file":"AllProductsView.js","sources":["../../../src/components/AllProductsView/AllProductsView.tsx"],"sourcesContent":["import React, { useState, useMemo } from 'react';\r\nimport { PageLayout, PageHeader, PageLayoutContent } from '../PageLayout';\r\nimport { Input } from '../Input';\r\nimport { Select } from '../Select';\r\nimport { useDebounce } from '../../hooks/useDebounce';\r\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\r\nimport { cn } from '../../utils/cn';\r\nimport { ProductData } from '../SingleProductView/SingleProductView';\r\nimport { ProductCard } from './ProductCard';\r\nimport { DashboardGrid } from '../DashboardGrid/DashboardGrid';\r\n\r\n/**\r\n * AllProductsView\r\n * - Renders a responsive product grid using DashboardGrid.\r\n * - By default, uses 1 column (sm), 2 columns (md), and 4 columns (lg/xl/2xl) for optimal card sizing.\r\n * - UI library consumers can override the number of columns via the `columns` prop.\r\n * - Ensures ProductCard maintains a usable min/max width for visual consistency.\r\n * - All logic is theme-agnostic and leverages reusable hooks/components.\r\n */\r\nexport interface AllProductsViewProps {\r\n  products: ProductData[];\r\n  onProductClick?: (productId: string) => void;\r\n  onAddToCart?: (productId: string) => void;\r\n  onWishlist?: (productId: string) => void;\r\n  onShare?: (productId: string) => void;\r\n  enableSearch?: boolean;\r\n  enableFilter?: boolean;\r\n  enableSort?: boolean;\r\n  className?: string;\r\n  columns?: number; // Allows consumer to override grid columns\r\n  itemMinWidth?: string; // Optional min width for grid items\r\n  itemMaxWidth?: string; // Optional max width for grid items\r\n}\r\n\r\nexport const AllProductsView: React.FC<AllProductsViewProps> = ({\r\n  products,\r\n  onProductClick,\r\n  onAddToCart,\r\n  onWishlist,\r\n  onShare,\r\n  enableSearch = true,\r\n  enableFilter = true,\r\n  enableSort = true,\r\n  className,\r\n  columns,\r\n  itemMinWidth = \"220px\",\r\n  itemMaxWidth = \"320px\",\r\n}) => {\r\n  const [search, setSearch] = useState('');\r\n  const debouncedSearch = useDebounce(search, 300);\r\n  const [sort, setSort] = useState('featured');\r\n  const [filter, setFilter] = useState('all');\r\n  const { currentBreakpoint, isBelow } = useBreakpoint();\r\n  const isMobile = isBelow('md');\r\n\r\n  // Responsive columns logic\r\n  const allowedColumns = [1, 2, 3, 4, 6, 12] as const;\r\n  const defaultColumns = (() => {\r\n    if (isBelow('md')) return 1;\r\n    if (isBelow('lg')) return 2;\r\n    return 4; // lg, xl, 2xl\r\n  })();\r\n  // Ensure columns is one of allowed values\r\n  const gridColumns = (allowedColumns.includes(columns as any)\r\n    ? columns\r\n    : defaultColumns) as 1 | 2 | 3 | 4 | 6 | 12;\r\n\r\n  // Filter and sort products\r\n  const filteredProducts = useMemo(() => {\r\n    let result = products;\r\n    if (debouncedSearch) {\r\n      result = result.filter((p) =>\r\n        p.name.toLowerCase().includes(debouncedSearch.toLowerCase())\r\n      );\r\n    }\r\n    if (filter !== 'all') {\r\n      result = result.filter((p) =>\r\n        p.colors?.includes(filter)\r\n      );\r\n    }\r\n    if (sort === 'price-asc') {\r\n      result = [...result].sort((a, b) => a.price - b.price);\r\n    } else if (sort === 'price-desc') {\r\n      result = [...result].sort((a, b) => b.price - a.price);\r\n    }\r\n    // Default: featured (no sort)\r\n    return result;\r\n  }, [products, debouncedSearch, filter, sort]);\r\n\r\n  // Collect all colors for filter options\r\n  const allColors = useMemo(() => {\r\n    const colorSet = new Set<string>();\r\n    products.forEach((p) => p.colors?.forEach((c) => colorSet.add(c)));\r\n    return Array.from(colorSet);\r\n  }, [products]);\r\n\r\n  return (\r\n    <PageLayout variant=\"centered\" maxWidth=\"xl\" className={cn(className)}>\r\n      <PageHeader>\r\n        <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n          <div className=\"flex flex-col md:flex-row md:items-center md:justify-between gap-2 md:gap-4 h-auto md:h-16\">\r\n            {/* <span className=\"font-bold text-xl\">Marketplace</span> */}\r\n            <div className=\"flex flex-col sm:flex-row gap-2 sm:gap-4 w-full md:w-auto\">\r\n              {enableSearch && (\r\n                <Input\r\n                  placeholder=\"Search products...\"\r\n                  value={search}\r\n                  onChange={(e) => setSearch(e.target.value)}\r\n                  className=\"w-full sm:w-64\"\r\n                />\r\n              )}\r\n              {enableFilter && (\r\n                <Select\r\n                  value={filter}\r\n                  onChange={e => setFilter(e.target.value)}\r\n                  options={[\r\n                    { value: 'all', label: 'All Colors' },\r\n                    ...allColors.map((c) => ({ value: c, label: c })),\r\n                  ]}\r\n                  className=\"w-full sm:w-32\"\r\n                />\r\n              )}\r\n              {enableSort && (\r\n                <Select\r\n                  value={sort}\r\n                  onChange={e => setSort(e.target.value)}\r\n                  options={[\r\n                    { value: 'featured', label: 'Featured' },\r\n                    { value: 'price-asc', label: 'Price: Low to High' },\r\n                    { value: 'price-desc', label: 'Price: High to Low' },\r\n                  ]}\r\n                  className=\"w-full sm:w-40\"\r\n                />\r\n              )}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </PageHeader>\r\n\r\n      <PageLayoutContent layout=\"centered\" spacing=\"lg\">\r\n        <DashboardGrid\r\n          columns={columns}\r\n          itemMinWidth={itemMinWidth}\r\n          itemMaxWidth={itemMaxWidth}\r\n        >\r\n          {filteredProducts.length === 0 ? (\r\n            <div className=\"col-span-full text-center text-gray-500 py-12\">\r\n              No products found.\r\n            </div>\r\n          ) : (\r\n            filteredProducts.map((product) => (\r\n              <ProductCard\r\n                key={product.id}\r\n                product={product}\r\n                onClick={() => onProductClick && onProductClick(product.id)}\r\n                onAddToCart={() => onAddToCart && onAddToCart(product.id)}\r\n                onWishlist={() => onWishlist && onWishlist(product.id)}\r\n                onShare={() => onShare && onShare(product.id)}\r\n              />\r\n            ))\r\n          )}\r\n        </DashboardGrid>\r\n      </PageLayoutContent>\r\n    </PageLayout>\r\n  );\r\n};"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"AllProductsView.js","sources":["../../../src/components/AllProductsView/AllProductsView.tsx"],"sourcesContent":["import React, { useState, useMemo } from 'react';\r\nimport { PageLayout, PageHeader, PageLayoutContent } from '../PageLayout';\r\nimport { Input } from '../Input';\r\nimport { Select } from '../Select';\r\nimport { useDebounce } from '../../hooks/useDebounce';\r\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\r\nimport { cn } from '../../utils/cn';\r\nimport { ProductData } from '../SingleProductView/SingleProductView';\r\nimport { ProductCard } from './ProductCard';\r\nimport { DashboardGrid } from '../DashboardGrid/DashboardGrid';\r\n\r\nexport interface AllProductsViewProps {\r\n  products: ProductData[];\r\n  onProductClick?: (productId: string) => void;\r\n  onAddToCart?: (productId: string) => void;\r\n  onWishlist?: (productId: string) => void;\r\n  onShare?: (productId: string) => void;\r\n  enableSearch?: boolean;\r\n  enableFilter?: boolean;\r\n  enableSort?: boolean;\r\n  className?: string;\r\n}\r\n\r\nexport const AllProductsView: React.FC<AllProductsViewProps> = ({\r\n  products,\r\n  onProductClick,\r\n  onAddToCart,\r\n  onWishlist,\r\n  onShare,\r\n  enableSearch = true,\r\n  enableFilter = true,\r\n  enableSort = true,\r\n  className,\r\n}) => {\r\n  const [search, setSearch] = useState('');\r\n  const debouncedSearch = useDebounce(search, 300);\r\n  const [sort, setSort] = useState('featured');\r\n  const [filter, setFilter] = useState('all');\r\n  const { currentBreakpoint, isBelow } = useBreakpoint();\r\n  const isMobile = isBelow('md');\r\n\r\n  // Filter and sort products\r\n  const filteredProducts = useMemo(() => {\r\n    let result = products;\r\n    if (debouncedSearch) {\r\n      result = result.filter((p) =>\r\n        p.name.toLowerCase().includes(debouncedSearch.toLowerCase())\r\n      );\r\n    }\r\n    if (filter !== 'all') {\r\n      result = result.filter((p) =>\r\n        p.colors?.includes(filter)\r\n      );\r\n    }\r\n    if (sort === 'price-asc') {\r\n      result = [...result].sort((a, b) => a.price - b.price);\r\n    } else if (sort === 'price-desc') {\r\n      result = [...result].sort((a, b) => b.price - a.price);\r\n    }\r\n    // Default: featured (no sort)\r\n    return result;\r\n  }, [products, debouncedSearch, filter, sort]);\r\n\r\n  // Collect all colors for filter options\r\n  const allColors = useMemo(() => {\r\n    const colorSet = new Set<string>();\r\n    products.forEach((p) => p.colors?.forEach((c) => colorSet.add(c)));\r\n    return Array.from(colorSet);\r\n  }, [products]);\r\n\r\n  return (\r\n    <PageLayout variant=\"centered\" maxWidth=\"xl\" className={cn(className)}>\r\n      <PageHeader>\r\n        <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n          <div className=\"flex flex-col md:flex-row md:items-center md:justify-between gap-2 md:gap-4 h-auto md:h-16\">\r\n            {/* <span className=\"font-bold text-xl\">Marketplace</span> */}\r\n            <div className=\"flex flex-col sm:flex-row gap-2 sm:gap-4 w-full md:w-auto\">\r\n              {enableSearch && (\r\n                <Input\r\n                  placeholder=\"Search products...\"\r\n                  value={search}\r\n                  onChange={(e) => setSearch(e.target.value)}\r\n                  className=\"w-full sm:w-64\"\r\n                />\r\n              )}\r\n              {enableFilter && (\r\n                <Select\r\n                  value={filter}\r\n                  onChange={e => setFilter(e.target.value)}\r\n                  options={[\r\n                    { value: 'all', label: 'All Colors' },\r\n                    ...allColors.map((c) => ({ value: c, label: c })),\r\n                  ]}\r\n                  className=\"w-full sm:w-32\"\r\n                />\r\n              )}\r\n              {enableSort && (\r\n                <Select\r\n                  value={sort}\r\n                  onChange={e => setSort(e.target.value)}\r\n                  options={[\r\n                    { value: 'featured', label: 'Featured' },\r\n                    { value: 'price-asc', label: 'Price: Low to High' },\r\n                    { value: 'price-desc', label: 'Price: High to Low' },\r\n                  ]}\r\n                  className=\"w-full sm:w-40\"\r\n                />\r\n              )}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </PageHeader>\r\n\r\n      <PageLayoutContent layout=\"centered\" spacing=\"lg\">\r\n        <DashboardGrid columns={3}>\r\n          {filteredProducts.length === 0 ? (\r\n            <div className=\"col-span-full text-center text-gray-500 py-12\">\r\n              No products found.\r\n            </div>\r\n          ) : (\r\n            filteredProducts.map((product) => (\r\n              <ProductCard\r\n                key={product.id}\r\n                product={product}\r\n                onClick={() => onProductClick && onProductClick(product.id)}\r\n                onAddToCart={() => onAddToCart && onAddToCart(product.id)}\r\n                onWishlist={() => onWishlist && onWishlist(product.id)}\r\n                onShare={() => onShare && onShare(product.id)}\r\n              />\r\n            ))\r\n          )}\r\n        </DashboardGrid>\r\n      </PageLayoutContent>\r\n    </PageLayout>\r\n  );\r\n};"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;AAuBO,MAAM,eAAe,GAAmC,CAAC,EAC9D,QAAQ,EACR,cAAc,EACd,WAAW,EACX,UAAU,EACV,OAAO,EACP,YAAY,GAAG,IAAI,EACnB,YAAY,GAAG,IAAI,EACnB,UAAU,GAAG,IAAI,EACjB,SAAS,GACV,KAAI;IACH,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC;IACxC,MAAM,eAAe,GAAG,WAAW,CAAC,MAAM,EAAE,GAAG,CAAC;IAChD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC;IAC5C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAC3C,MAAM,EAAE,iBAAiB,EAAE,OAAO,EAAE,GAAG,aAAa,EAAE;AACtD,IAAiB,OAAO,CAAC,IAAI;;AAG7B,IAAA,MAAM,gBAAgB,GAAG,OAAO,CAAC,MAAK;QACpC,IAAI,MAAM,GAAG,QAAQ;QACrB,IAAI,eAAe,EAAE;YACnB,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,KACvB,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,eAAe,CAAC,WAAW,EAAE,CAAC,CAC7D;QACH;AACA,QAAA,IAAI,MAAM,KAAK,KAAK,EAAE;AACpB,YAAA,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,KACvB,CAAC,CAAC,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,CAC3B;QACH;AACA,QAAA,IAAI,IAAI,KAAK,WAAW,EAAE;YACxB,MAAM,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC;QACxD;AAAO,aAAA,IAAI,IAAI,KAAK,YAAY,EAAE;YAChC,MAAM,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC;QACxD;;AAEA,QAAA,OAAO,MAAM;IACf,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC;;AAG7C,IAAA,MAAM,SAAS,GAAG,OAAO,CAAC,MAAK;AAC7B,QAAA,MAAM,QAAQ,GAAG,IAAI,GAAG,EAAU;QAClC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;AAClE,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC;AAC7B,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEd,QACEA,KAAC,UAAU,EAAA,EAAC,OAAO,EAAC,UAAU,EAAC,QAAQ,EAAC,IAAI,EAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,EAAA,QAAA,EAAA,CACnEC,GAAA,CAAC,UAAU,EAAA,EAAA,QAAA,EACTA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wCAAwC,YACrDA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4FAA4F,EAAA,QAAA,EAEzGD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,2DAA2D,aACvE,YAAY,KACXC,GAAA,CAAC,KAAK,IACJ,WAAW,EAAC,oBAAoB,EAChC,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC1C,SAAS,EAAC,gBAAgB,EAAA,CAC1B,CACH,EACA,YAAY,KACXA,GAAA,CAAC,MAAM,IACL,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACxC,OAAO,EAAE;AACP,wCAAA,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE;wCACrC,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;AAClD,qCAAA,EACD,SAAS,EAAC,gBAAgB,EAAA,CAC1B,CACH,EACA,UAAU,KACTA,GAAA,CAAC,MAAM,EAAA,EACL,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACtC,OAAO,EAAE;AACP,wCAAA,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;AACxC,wCAAA,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,oBAAoB,EAAE;AACnD,wCAAA,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,oBAAoB,EAAE;AACrD,qCAAA,EACD,SAAS,EAAC,gBAAgB,EAAA,CAC1B,CACH,CAAA,EAAA,CACG,EAAA,CACF,EAAA,CACF,EAAA,CACK,EAEbA,GAAA,CAAC,iBAAiB,EAAA,EAAC,MAAM,EAAC,UAAU,EAAC,OAAO,EAAC,IAAI,EAAA,QAAA,EAC/CA,GAAA,CAAC,aAAa,EAAA,EAAC,OAAO,EAAE,CAAC,EAAA,QAAA,EACtB,gBAAgB,CAAC,MAAM,KAAK,CAAC,IAC5BA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,+CAA+C,EAAA,QAAA,EAAA,oBAAA,EAAA,CAExD,KAEN,gBAAgB,CAAC,GAAG,CAAC,CAAC,OAAO,MAC3BA,GAAA,CAAC,WAAW,EAAA,EAEV,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,MAAM,cAAc,IAAI,cAAc,CAAC,OAAO,CAAC,EAAE,CAAC,EAC3D,WAAW,EAAE,MAAM,WAAW,IAAI,WAAW,CAAC,OAAO,CAAC,EAAE,CAAC,EACzD,UAAU,EAAE,MAAM,UAAU,IAAI,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC,EACtD,OAAO,EAAE,MAAM,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,EAAA,EALxC,OAAO,CAAC,EAAE,CAMf,CACH,CAAC,CACH,EAAA,CACa,EAAA,CACE,CAAA,EAAA,CACT;AAEjB;;;;"}

package/dist/components/AllProductsView/ProductCard.js

@@ -1,11 +1,13 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Card, CardHeader, CardTitle, CardContent, CardDescription, CardFooter } from '../Card/Card.js';
+import { Card } from '../Card/Card.js';
 import { Badge } from '../Badge/Badge.js';
 import { Button } from '../Button/Button.js';
 import { ShoppingCart, Heart, Share2 } from 'lucide-react';
 import { cn } from '../../utils/cn.js';
 
-const ProductCard = ({ product, onClick, onAddToCart, onWishlist, onShare, className, }) => (jsxs(Card, { className: cn('flex flex-col h-full overflow-hidden transition-all shadow-md rounded-lg', className), variant: "elevated", padding: "sm", children: [jsxs(CardHeader, { children: [jsx("div", { className: "aspect-square bg-gray-100 rounded-lg mb-4 flex items-center justify-center cursor-pointer w-full", onClick: onClick, title: product.name, children: product.images && product.images[0] ? (jsx("img", { src: product.images[0], alt: product.name, className: "object-contain w-full h-full max-h-32 max-w-full" })) : (jsx(ShoppingCart, { className: "h-12 w-12 text-gray-400" })) }), jsxs("div", { className: "flex items-center space-x-2 mb-2", children: [jsx(Badge, { variant: product.inStock ? 'success' : 'danger', children: product.inStock ? 'In Stock' : 'Out of Stock' }), product.discount && (jsx(Badge, { variant: "danger", children: product.discount }))] }), jsx(CardTitle, { className: "mb-1 truncate", children: product.name })] }), jsxs(CardContent, { children: [jsx(CardDescription, { className: "mb-2 line-clamp-2 break-words", children: product.description }), jsxs("div", { className: "flex items-center space-x-2 mb-4", children: [jsxs("span", { className: "text-xl font-bold text-gray-900", children: ["$", product.price.toFixed(2)] }), product.oldPrice && (jsxs("span", { className: "text-sm text-gray-500 line-through", children: ["$", product.oldPrice.toFixed(2)] }))] })] }), jsxs(CardFooter, { className: "mt-auto flex flex-col sm:flex-row gap-2", children: [jsxs(Button, { variant: "primary", size: "sm", className: "flex-1", onClick: onAddToCart, disabled: !product.inStock, children: [jsx(ShoppingCart, { className: "mr-1 h-4 w-4" }), "Add"] }), jsx(Button, { variant: "outline", size: "sm", onClick: onWishlist, "aria-label": "Wishlist", children: jsx(Heart, { className: "h-4 w-4" }) }), jsx(Button, { variant: "outline", size: "sm", onClick: onShare, "aria-label": "Share", children: jsx(Share2, { className: "h-4 w-4" }) })] })] }));
+const ProductCard = ({ product, onClick, onAddToCart, onWishlist, onShare, className, }) => (jsxs(Card, { className: cn('p-4 flex flex-col h-full w-full min-w-0 transition-all', 
+    // Remove max-w-* to allow grid to control width, and add shadow/rounded for separation
+    'shadow-md rounded-lg', className), children: [jsx("div", { className: "aspect-square bg-gray-100 rounded-lg mb-4 flex items-center justify-center cursor-pointer w-full", onClick: onClick, title: product.name, children: product.images && product.images[0] ? (jsx("img", { src: product.images[0], alt: product.name, className: "object-contain w-full h-full max-h-32 max-w-full" })) : (jsx(ShoppingCart, { className: "h-12 w-12 text-gray-400" })) }), jsxs("div", { className: "flex items-center space-x-2 mb-2", children: [jsx(Badge, { variant: product.inStock ? 'success' : 'danger', children: product.inStock ? 'In Stock' : 'Out of Stock' }), product.discount && (jsx(Badge, { variant: "danger", children: product.discount }))] }), jsx("h2", { className: "text-lg font-bold text-gray-900 mb-1 truncate", children: product.name }), jsx("p", { className: "text-gray-600 text-sm mb-2 line-clamp-2 break-words", children: product.description }), jsxs("div", { className: "flex items-center space-x-2 mb-4", children: [jsxs("span", { className: "text-xl font-bold text-gray-900", children: ["$", product.price.toFixed(2)] }), product.oldPrice && (jsxs("span", { className: "text-sm text-gray-500 line-through", children: ["$", product.oldPrice.toFixed(2)] }))] }), jsxs("div", { className: "mt-auto flex flex-col sm:flex-row gap-2", children: [jsxs(Button, { variant: "primary", size: "sm", className: "flex-1", onClick: onAddToCart, disabled: !product.inStock, children: [jsx(ShoppingCart, { className: "mr-1 h-4 w-4" }), "Add"] }), jsx(Button, { variant: "outline", size: "sm", onClick: onWishlist, "aria-label": "Wishlist", children: jsx(Heart, { className: "h-4 w-4" }) }), jsx(Button, { variant: "outline", size: "sm", onClick: onShare, "aria-label": "Share", children: jsx(Share2, { className: "h-4 w-4" }) })] })] }));
 
 export { ProductCard };
 //# sourceMappingURL=ProductCard.js.map

package/dist/components/AllProductsView/ProductCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProductCard.js","sources":["../../../src/components/AllProductsView/ProductCard.tsx"],"sourcesContent":["import React from 'react';\r\nimport { CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from '../Card';\r\nimport { Card } from '../Card';\r\nimport { Badge } from '../Badge';\r\nimport { Button } from '../Button';\r\nimport { Heart, ShoppingCart, Share2 } from 'lucide-react';\r\nimport { ProductData } from '../SingleProductView/SingleProductView';\r\nimport { cn } from '../../utils/cn';\r\n\r\nexport interface ProductCardProps {\r\n  product: ProductData;\r\n  onClick?: () => void;\r\n  onAddToCart?: () => void;\r\n  onWishlist?: () => void;\r\n  onShare?: () => void;\r\n  className?: string;\r\n}\r\n\r\nexport const ProductCard: React.FC<ProductCardProps> = ({\r\n  product,\r\n  onClick,\r\n  onAddToCart,\r\n  onWishlist,\r\n  onShare,\r\n  className,\r\n}) => (\r\n  <Card\r\n    className={cn(\r\n      'flex flex-col h-full overflow-hidden transition-all shadow-md rounded-lg',\r\n      className\r\n    )}\r\n    variant=\"elevated\"\r\n    padding=\"sm\"\r\n  >\r\n    <CardHeader>\r\n      <div\r\n        className=\"aspect-square bg-gray-100 rounded-lg mb-4 flex items-center justify-center cursor-pointer w-full\"\r\n        onClick={onClick}\r\n        title={product.name}\r\n      >\r\n        {product.images && product.images[0] ? (\r\n          <img\r\n            src={product.images[0]}\r\n            alt={product.name}\r\n            className=\"object-contain w-full h-full max-h-32 max-w-full\"\r\n          />\r\n        ) : (\r\n          <ShoppingCart className=\"h-12 w-12 text-gray-400\" />\r\n        )}\r\n      </div>\r\n      <div className=\"flex items-center space-x-2 mb-2\">\r\n        <Badge variant={product.inStock ? 'success' : 'danger'}>\r\n          {product.inStock ? 'In Stock' : 'Out of Stock'}\r\n        </Badge>\r\n        {product.discount && (\r\n          <Badge variant=\"danger\">{product.discount}</Badge>\r\n        )}\r\n      </div>\r\n      <CardTitle className=\"mb-1 truncate\">{product.name}</CardTitle>\r\n    </CardHeader>\r\n    <CardContent>\r\n      <CardDescription className=\"mb-2 line-clamp-2 break-words\">\r\n        {product.description}\r\n      </CardDescription>\r\n      <div className=\"flex items-center space-x-2 mb-4\">\r\n        <span className=\"text-xl font-bold text-gray-900\">${product.price.toFixed(2)}</span>\r\n        {product.oldPrice && (\r\n          <span className=\"text-sm text-gray-500 line-through\">\r\n            ${product.oldPrice.toFixed(2)}\r\n          </span>\r\n        )}\r\n      </div>\r\n    </CardContent>\r\n    <CardFooter className=\"mt-auto flex flex-col sm:flex-row gap-2\">\r\n      <Button\r\n        variant=\"primary\"\r\n        size=\"sm\"\r\n        className=\"flex-1\"\r\n        onClick={onAddToCart}\r\n        disabled={!product.inStock}\r\n      >\r\n        <ShoppingCart className=\"mr-1 h-4 w-4\" />\r\n        Add\r\n      </Button>\r\n      <Button\r\n        variant=\"outline\"\r\n        size=\"sm\"\r\n        onClick={onWishlist}\r\n        aria-label=\"Wishlist\"\r\n      >\r\n        <Heart className=\"h-4 w-4\" />\r\n      </Button>\r\n      <Button\r\n        variant=\"outline\"\r\n        size=\"sm\"\r\n        onClick={onShare}\r\n        aria-label=\"Share\"\r\n      >\r\n        <Share2 className=\"h-4 w-4\" />\r\n      </Button>\r\n    </CardFooter>\r\n  </Card>\r\n);"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"ProductCard.js","sources":["../../../src/components/AllProductsView/ProductCard.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Card } from '../Card';\r\nimport { Badge } from '../Badge';\r\nimport { Button } from '../Button';\r\nimport { Heart, ShoppingCart, Share2 } from 'lucide-react';\r\nimport { ProductData } from '../SingleProductView/SingleProductView';\r\nimport { cn } from '../../utils/cn';\r\n\r\nexport interface ProductCardProps {\r\n  product: ProductData;\r\n  onClick?: () => void;\r\n  onAddToCart?: () => void;\r\n  onWishlist?: () => void;\r\n  onShare?: () => void;\r\n  className?: string;\r\n}\r\n\r\nexport const ProductCard: React.FC<ProductCardProps> = ({\r\n  product,\r\n  onClick,\r\n  onAddToCart,\r\n  onWishlist,\r\n  onShare,\r\n  className,\r\n}) => (\r\n  <Card\r\n    className={cn(\r\n      'p-4 flex flex-col h-full w-full min-w-0 transition-all',\r\n      // Remove max-w-* to allow grid to control width, and add shadow/rounded for separation\r\n      'shadow-md rounded-lg',\r\n      className\r\n    )}\r\n  >\r\n    <div\r\n      className=\"aspect-square bg-gray-100 rounded-lg mb-4 flex items-center justify-center cursor-pointer w-full\"\r\n      onClick={onClick}\r\n      title={product.name}\r\n    >\r\n      {product.images && product.images[0] ? (\r\n        <img\r\n          src={product.images[0]}\r\n          alt={product.name}\r\n          className=\"object-contain w-full h-full max-h-32 max-w-full\"\r\n        />\r\n      ) : (\r\n        <ShoppingCart className=\"h-12 w-12 text-gray-400\" />\r\n      )}\r\n    </div>\r\n    <div className=\"flex items-center space-x-2 mb-2\">\r\n      <Badge variant={product.inStock ? 'success' : 'danger'}>\r\n        {product.inStock ? 'In Stock' : 'Out of Stock'}\r\n      </Badge>\r\n      {product.discount && (\r\n        <Badge variant=\"danger\">{product.discount}</Badge>\r\n      )}\r\n    </div>\r\n    <h2 className=\"text-lg font-bold text-gray-900 mb-1 truncate\">{product.name}</h2>\r\n    <p className=\"text-gray-600 text-sm mb-2 line-clamp-2 break-words\">{product.description}</p>\r\n    <div className=\"flex items-center space-x-2 mb-4\">\r\n      <span className=\"text-xl font-bold text-gray-900\">${product.price.toFixed(2)}</span>\r\n      {product.oldPrice && (\r\n        <span className=\"text-sm text-gray-500 line-through\">\r\n          ${product.oldPrice.toFixed(2)}\r\n        </span>\r\n      )}\r\n    </div>\r\n    <div className=\"mt-auto flex flex-col sm:flex-row gap-2\">\r\n      <Button\r\n        variant=\"primary\"\r\n        size=\"sm\"\r\n        className=\"flex-1\"\r\n        onClick={onAddToCart}\r\n        disabled={!product.inStock}\r\n      >\r\n        <ShoppingCart className=\"mr-1 h-4 w-4\" />\r\n        Add\r\n      </Button>\r\n      <Button\r\n        variant=\"outline\"\r\n        size=\"sm\"\r\n        onClick={onWishlist}\r\n        aria-label=\"Wishlist\"\r\n      >\r\n        <Heart className=\"h-4 w-4\" />\r\n      </Button>\r\n      <Button\r\n        variant=\"outline\"\r\n        size=\"sm\"\r\n        onClick={onShare}\r\n        aria-label=\"Share\"\r\n      >\r\n        <Share2 className=\"h-4 w-4\" />\r\n      </Button>\r\n    </div>\r\n  </Card>\r\n);"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/Card/Card.js

@@ -5,7 +5,7 @@ import { cn } from '../../utils/cn.js';
 
 const cardVariants = cva(
 // Mobile-first responsive, content-fitting, vertical stacking
-"w-full flex flex-col rounded-lg border bg-white text-gray-950 shadow-sm overflow-hidden", {
+"w-full max-w-full flex flex-col rounded-lg border bg-white text-gray-950 shadow-sm", {
     variants: {
         variant: {
             default: "border-gray-200",

package/dist/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\n\nconst cardVariants = cva(\n  // Mobile-first responsive, content-fitting, vertical stacking\n  \"w-full flex flex-col rounded-lg border bg-white text-gray-950 shadow-sm overflow-hidden\",\n  {\n    variants: {\n      variant: {\n        default: \"border-gray-200\",\n        elevated: \"border-gray-200 shadow-md\",\n        outlined: \"border-2 border-primary-200\",\n      },\n      padding: {\n        none: \"p-0\",\n        sm: \"p-2 sm:p-4\",\n        md: \"p-3 sm:p-6\",\n        lg: \"p-4 sm:p-8\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      padding: \"md\",\n    },\n  }\n);\n\nexport interface CardProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof cardVariants> {}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n  ({ className, variant, padding, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(cardVariants({ variant, padding, className }))}\n      {...props}\n    />\n  )\n);\nCard.displayName = \"Card\";\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex flex-col space-y-1.5 p-2 sm:p-4 md:p-6\", className)}\n    {...props}\n  />\n));\nCardHeader.displayName = \"CardHeader\";\n\nconst CardTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn(\n      \"text-2xl font-semibold leading-none tracking-tight\",\n      className\n    )}\n    {...props}\n  />\n));\nCardTitle.displayName = \"CardTitle\";\n\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\"text-sm text-gray-500\", className)}\n    {...props}\n  />\n));\nCardDescription.displayName = \"CardDescription\";\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"p-2 sm:p-4 md:p-6 pt-0\", className)} {...props} />\n));\nCardContent.displayName = \"CardContent\";\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex items-center p-2 sm:p-4 md:p-6 pt-0\", className)}\n    {...props}\n  />\n));\nCardFooter.displayName = \"CardFooter\";\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardDescription,\n  CardContent,\n  cardVariants,\n};"],"names":["_jsx"],"mappings":";;;;;AAIA,MAAM,YAAY,GAAG,GAAG;AACtB;AACA,yFAAyF,EACzF;AACE,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,OAAO,EAAE,iBAAiB;AAC1B,YAAA,QAAQ,EAAE,2BAA2B;AACrC,YAAA,QAAQ,EAAE,6BAA6B;AACxC,SAAA;AACD,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,KAAK;AACX,YAAA,EAAE,EAAE,YAAY;AAChB,YAAA,EAAE,EAAE,YAAY;AAChB,YAAA,EAAE,EAAE,YAAY;AACjB,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,OAAO,EAAE,IAAI;AACd,KAAA;AACF,CAAA;AAOH,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAC3B,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7CA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,YAAY,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,KACxD,KAAK,EAAA,CACT,CACH;AAEH,IAAI,CAAC,WAAW,GAAG,MAAM;AAEzB,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAGjC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,6CAA6C,EAAE,SAAS,CAAC,EAAA,GACnE,KAAK,EAAA,CACT,CACH;AACD,UAAU,CAAC,WAAW,GAAG,YAAY;AAErC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAGhC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,IAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,oDAAoD,EACpD,SAAS,CACV,EAAA,GACG,KAAK,EAAA,CACT,CACH;AACD,SAAS,CAAC,WAAW,GAAG,WAAW;AAEnC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAGtC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,GAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,CAAC,EAAA,GAC7C,KAAK,EAAA,CACT,CACH;AACD,eAAe,CAAC,WAAW,GAAG,iBAAiB;AAE/C,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAGlC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,SAAS,CAAC,EAAA,GAAM,KAAK,EAAA,CAAI,CACjF;AACD,WAAW,CAAC,WAAW,GAAG,aAAa;AAEvC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAGjC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,0CAA0C,EAAE,SAAS,CAAC,EAAA,GAChE,KAAK,EAAA,CACT,CACH;AACD,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
+{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\n\r\nconst cardVariants = cva(\r\n  // Mobile-first responsive, content-fitting, vertical stacking\r\n  \"w-full max-w-full flex flex-col rounded-lg border bg-white text-gray-950 shadow-sm\",\r\n  {\r\n    variants: {\r\n      variant: {\r\n        default: \"border-gray-200\",\r\n        elevated: \"border-gray-200 shadow-md\",\r\n        outlined: \"border-2 border-primary-200\",\r\n      },\r\n      padding: {\r\n        none: \"p-0\",\r\n        sm: \"p-2 sm:p-4\",\r\n        md: \"p-3 sm:p-6\",\r\n        lg: \"p-4 sm:p-8\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      variant: \"default\",\r\n      padding: \"md\",\r\n    },\r\n  }\r\n);\r\n\r\nexport interface CardProps\r\n  extends React.HTMLAttributes<HTMLDivElement>,\r\n    VariantProps<typeof cardVariants> {}\r\n\r\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\r\n  ({ className, variant, padding, ...props }, ref) => (\r\n    <div\r\n      ref={ref}\r\n      className={cn(cardVariants({ variant, padding, className }))}\r\n      {...props}\r\n    />\r\n  )\r\n);\r\nCard.displayName = \"Card\";\r\n\r\nconst CardHeader = React.forwardRef<\r\n  HTMLDivElement,\r\n  React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n  <div\r\n    ref={ref}\r\n    className={cn(\"flex flex-col space-y-1.5 p-2 sm:p-4 md:p-6\", className)}\r\n    {...props}\r\n  />\r\n));\r\nCardHeader.displayName = \"CardHeader\";\r\n\r\nconst CardTitle = React.forwardRef<\r\n  HTMLParagraphElement,\r\n  React.HTMLAttributes<HTMLHeadingElement>\r\n>(({ className, ...props }, ref) => (\r\n  <h3\r\n    ref={ref}\r\n    className={cn(\r\n      \"text-2xl font-semibold leading-none tracking-tight\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n));\r\nCardTitle.displayName = \"CardTitle\";\r\n\r\nconst CardDescription = React.forwardRef<\r\n  HTMLParagraphElement,\r\n  React.HTMLAttributes<HTMLParagraphElement>\r\n>(({ className, ...props }, ref) => (\r\n  <p\r\n    ref={ref}\r\n    className={cn(\"text-sm text-gray-500\", className)}\r\n    {...props}\r\n  />\r\n));\r\nCardDescription.displayName = \"CardDescription\";\r\n\r\nconst CardContent = React.forwardRef<\r\n  HTMLDivElement,\r\n  React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n  <div ref={ref} className={cn(\"p-2 sm:p-4 md:p-6 pt-0\", className)} {...props} />\r\n));\r\nCardContent.displayName = \"CardContent\";\r\n\r\nconst CardFooter = React.forwardRef<\r\n  HTMLDivElement,\r\n  React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n  <div\r\n    ref={ref}\r\n    className={cn(\"flex items-center p-2 sm:p-4 md:p-6 pt-0\", className)}\r\n    {...props}\r\n  />\r\n));\r\nCardFooter.displayName = \"CardFooter\";\r\n\r\nexport {\r\n  Card,\r\n  CardHeader,\r\n  CardFooter,\r\n  CardTitle,\r\n  CardDescription,\r\n  CardContent,\r\n  cardVariants,\r\n};"],"names":["_jsx"],"mappings":";;;;;AAIA,MAAM,YAAY,GAAG,GAAG;AACtB;AACA,oFAAoF,EACpF;AACE,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,OAAO,EAAE,iBAAiB;AAC1B,YAAA,QAAQ,EAAE,2BAA2B;AACrC,YAAA,QAAQ,EAAE,6BAA6B;AACxC,SAAA;AACD,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,KAAK;AACX,YAAA,EAAE,EAAE,YAAY;AAChB,YAAA,EAAE,EAAE,YAAY;AAChB,YAAA,EAAE,EAAE,YAAY;AACjB,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,OAAO,EAAE,IAAI;AACd,KAAA;AACF,CAAA;AAOH,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAC3B,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7CA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,YAAY,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,KACxD,KAAK,EAAA,CACT,CACH;AAEH,IAAI,CAAC,WAAW,GAAG,MAAM;AAEzB,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAGjC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,6CAA6C,EAAE,SAAS,CAAC,EAAA,GACnE,KAAK,EAAA,CACT,CACH;AACD,UAAU,CAAC,WAAW,GAAG,YAAY;AAErC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAGhC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,IAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,oDAAoD,EACpD,SAAS,CACV,EAAA,GACG,KAAK,EAAA,CACT,CACH;AACD,SAAS,CAAC,WAAW,GAAG,WAAW;AAEnC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAGtC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,GAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,CAAC,EAAA,GAC7C,KAAK,EAAA,CACT,CACH;AACD,eAAe,CAAC,WAAW,GAAG,iBAAiB;AAE/C,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAGlC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,SAAS,CAAC,EAAA,GAAM,KAAK,EAAA,CAAI,CACjF;AACD,WAAW,CAAC,WAAW,GAAG,aAAa;AAEvC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAGjC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,0CAA0C,EAAE,SAAS,CAAC,EAAA,GAChE,KAAK,EAAA,CACT,CACH;AACD,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}

package/dist/components/DashboardGrid/DashboardGrid.d.ts

@@ -1,32 +1,13 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
-/**
- * DashboardGrid
- * - Responsive grid layout for dashboard/product cards.
- * - Does not set overflow on its own; relies on children (e.g., Card) to handle overflow.
- * - All Card components now use overflow-hidden by default, preventing content overflow in grid layouts.
- * - Theme-agnostic and reusable.
- */
 declare const gridVariants: (props?: ({
-    columns?: "auto" | null | undefined;
+    columns?: 1 | 2 | 3 | 12 | 4 | 6 | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 declare const gridItemVariants: (props?: ({
-    colSpan?: 1 | 2 | 3 | 4 | 6 | 12 | null | undefined;
+    colSpan?: 1 | 2 | 3 | 12 | 4 | 6 | null | undefined;
     rowSpan?: 1 | 2 | 3 | 4 | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-interface DashboardGridProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Optional min width for grid items (e.g., "220px" or Tailwind class "min-w-[220px]")
-     */
-    itemMinWidth?: string;
-    /**
-     * Optional max width for grid items (e.g., "320px" or Tailwind class "max-w-[320px]")
-     */
-    itemMaxWidth?: string;
-    /**
-     * Number of columns (fixed) or "auto" for responsive grid
-     */
-    columns?: number | "auto";
+interface DashboardGridProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {
 }
 interface DashboardGridItemProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridItemVariants> {
 }

package/dist/components/DashboardGrid/DashboardGrid.js

@@ -3,21 +3,19 @@ import * as React from 'react';
 import { cva } from 'class-variance-authority';
 import { cn } from '../../utils/cn.js';
 
-/**
- * DashboardGrid
- * - Responsive grid layout for dashboard/product cards.
- * - Does not set overflow on its own; relies on children (e.g., Card) to handle overflow.
- * - All Card components now use overflow-hidden by default, preventing content overflow in grid layouts.
- * - Theme-agnostic and reusable.
- */
-const gridVariants = cva("grid gap-6 w-full", {
+const gridVariants = cva("grid gap-6", {
     variants: {
         columns: {
-            auto: "", // Always use auto-fit/minmax via inline style
+            1: "grid-cols-1",
+            2: "grid-cols-1 md:grid-cols-2",
+            3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
+            4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
+            6: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6",
+            12: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-12",
         },
     },
     defaultVariants: {
-        columns: "auto",
+        columns: 12,
     },
 });
 const gridItemVariants = cva("min-h-0", // Prevents grid items from growing unnecessarily
@@ -43,44 +41,8 @@ const gridItemVariants = cva("min-h-0", // Prevents grid items from growing unne
         rowSpan: 1,
     },
 });
-const DashboardGrid = React.forwardRef(({ className, itemMinWidth, itemMaxWidth, columns = "auto", children, ...props }, ref) => {
-    // Compose style/class for grid items
-    const itemStyle = {};
-    if (itemMinWidth)
-        itemStyle.minWidth = itemMinWidth.includes('[') ? undefined : itemMinWidth;
-    if (itemMaxWidth)
-        itemStyle.maxWidth = itemMaxWidth.includes('[') ? undefined : itemMaxWidth;
-    // If Tailwind classes are provided, use them; otherwise, use inline style
-    const itemClass = [
-        itemMinWidth && itemMinWidth.includes('[') ? `min-w-[${itemMinWidth.replace(/[^0-9a-zA-Z]/g, '')}]` : '',
-        itemMaxWidth && itemMaxWidth.includes('[') ? `max-w-[${itemMaxWidth.replace(/[^0-9a-zA-Z]/g, '')}]` : '',
-    ].filter(Boolean).join(' ');
-    // Wrap each child with sizing constraints
-    const wrappedChildren = React.Children.map(children, child => jsx("div", { className: itemClass, style: itemStyle, children: child }));
-    // If columns is a number, use grid-cols-* Tailwind class
-    let gridClass = "grid gap-6 w-full";
-    let gridStyle = {};
-    const gridColsClassMap = {
-        1: "grid-cols-1",
-        2: "grid-cols-2",
-        3: "grid-cols-3",
-        4: "grid-cols-4",
-        5: "grid-cols-5",
-        6: "grid-cols-6",
-        7: "grid-cols-7",
-        8: "grid-cols-8",
-        9: "grid-cols-9",
-        10: "grid-cols-10",
-        11: "grid-cols-11",
-        12: "grid-cols-12",
-    };
-    if (typeof columns === "number" && gridColsClassMap[columns]) {
-        gridClass += ` ${gridColsClassMap[columns]}`;
-    }
-    else {
-        gridStyle.gridTemplateColumns = `repeat(auto-fit, minmax(${itemMinWidth || "220px"}, 1fr))`;
-    }
-    return (jsx("div", { ref: ref, className: cn(gridClass, className), style: gridStyle, ...props, children: wrappedChildren }));
+const DashboardGrid = React.forwardRef(({ className, columns, ...props }, ref) => {
+    return (jsx("div", { ref: ref, className: cn(gridVariants({ columns }), className), ...props }));
 });
 const DashboardGridItem = React.forwardRef(({ className, colSpan, rowSpan, ...props }, ref) => {
     return (jsx("div", { ref: ref, className: cn(gridItemVariants({ colSpan, rowSpan }), className), ...props }));

package/dist/components/DashboardGrid/DashboardGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardGrid.js","sources":["../../../src/components/DashboardGrid/DashboardGrid.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\n\n/**\n * DashboardGrid\n * - Responsive grid layout for dashboard/product cards.\n * - Does not set overflow on its own; relies on children (e.g., Card) to handle overflow.\n * - All Card components now use overflow-hidden by default, preventing content overflow in grid layouts.\n * - Theme-agnostic and reusable.\n */\nconst gridVariants = cva(\n  \"grid gap-6 w-full\",\n  {\n    variants: {\n      columns: {\n        auto: \"\", // Always use auto-fit/minmax via inline style\n      },\n    },\n    defaultVariants: {\n      columns: \"auto\",\n    },\n  }\n);\n\nconst gridItemVariants = cva(\n  \"min-h-0\", // Prevents grid items from growing unnecessarily\n  {\n    variants: {\n      colSpan: {\n        1: \"col-span-1\",\n        2: \"col-span-1 md:col-span-2\",\n        3: \"col-span-1 md:col-span-2 lg:col-span-3\",\n        4: \"col-span-1 md:col-span-2 lg:col-span-4\",\n        6: \"col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-6\",\n        12: \"col-span-full\",\n      },\n      rowSpan: {\n        1: \"row-span-1\",\n        2: \"row-span-2\",\n        3: \"row-span-3\",\n        4: \"row-span-4\",\n      },\n    },\n    defaultVariants: {\n      colSpan: 1,\n      rowSpan: 1,\n    },\n  }\n);\n\ninterface DashboardGridProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Optional min width for grid items (e.g., \"220px\" or Tailwind class \"min-w-[220px]\")\n   */\n  itemMinWidth?: string;\n  /**\n   * Optional max width for grid items (e.g., \"320px\" or Tailwind class \"max-w-[320px]\")\n   */\n  itemMaxWidth?: string;\n  /**\n   * Number of columns (fixed) or \"auto\" for responsive grid\n   */\n  columns?: number | \"auto\";\n}\n\ninterface DashboardGridItemProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof gridItemVariants> {}\n\nconst DashboardGrid = React.forwardRef<HTMLDivElement, DashboardGridProps>(\n  ({ className, itemMinWidth, itemMaxWidth, columns = \"auto\", children, ...props }, ref) => {\n    // Compose style/class for grid items\n    const itemStyle: React.CSSProperties = {};\n    if (itemMinWidth) itemStyle.minWidth = itemMinWidth.includes('[') ? undefined : itemMinWidth;\n    if (itemMaxWidth) itemStyle.maxWidth = itemMaxWidth.includes('[') ? undefined : itemMaxWidth;\n\n    // If Tailwind classes are provided, use them; otherwise, use inline style\n    const itemClass = [\n      itemMinWidth && itemMinWidth.includes('[') ? `min-w-[${itemMinWidth.replace(/[^0-9a-zA-Z]/g, '')}]` : '',\n      itemMaxWidth && itemMaxWidth.includes('[') ? `max-w-[${itemMaxWidth.replace(/[^0-9a-zA-Z]/g, '')}]` : '',\n    ].filter(Boolean).join(' ');\n\n    // Wrap each child with sizing constraints\n    const wrappedChildren = React.Children.map(children, child =>\n      <div className={itemClass} style={itemStyle}>{child}</div>\n    );\n\n    // If columns is a number, use grid-cols-* Tailwind class\n    let gridClass = \"grid gap-6 w-full\";\n    let gridStyle: React.CSSProperties = {};\n    const gridColsClassMap: Record<number, string> = {\n      1: \"grid-cols-1\",\n      2: \"grid-cols-2\",\n      3: \"grid-cols-3\",\n      4: \"grid-cols-4\",\n      5: \"grid-cols-5\",\n      6: \"grid-cols-6\",\n      7: \"grid-cols-7\",\n      8: \"grid-cols-8\",\n      9: \"grid-cols-9\",\n      10: \"grid-cols-10\",\n      11: \"grid-cols-11\",\n      12: \"grid-cols-12\",\n    };\n    if (typeof columns === \"number\" && gridColsClassMap[columns]) {\n      gridClass += ` ${gridColsClassMap[columns]}`;\n    } else {\n      gridStyle.gridTemplateColumns = `repeat(auto-fit, minmax(${itemMinWidth || \"220px\"}, 1fr))`;\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn(gridClass, className)}\n        style={gridStyle}\n        {...props}\n      >\n        {wrappedChildren}\n      </div>\n    );\n  }\n);\n\nconst DashboardGridItem = React.forwardRef<HTMLDivElement, DashboardGridItemProps>(\n  ({ className, colSpan, rowSpan, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(gridItemVariants({ colSpan, rowSpan }), className)}\n        {...props}\n      />\n    );\n  }\n);\n\nDashboardGrid.displayName = \"DashboardGrid\";\nDashboardGridItem.displayName = \"DashboardGridItem\";\n\nexport { \n  DashboardGrid, \n  DashboardGridItem, \n  gridVariants, \n  gridItemVariants \n};"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"DashboardGrid.js","sources":["../../../src/components/DashboardGrid/DashboardGrid.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\n\r\nconst gridVariants = cva(\r\n  \"grid gap-6\",\r\n  {\r\n    variants: {\r\n      columns: {\r\n        1: \"grid-cols-1\",\r\n        2: \"grid-cols-1 md:grid-cols-2\",\r\n        3: \"grid-cols-1 md:grid-cols-2 lg:grid-cols-3\",\r\n        4: \"grid-cols-1 md:grid-cols-2 lg:grid-cols-4\",\r\n        6: \"grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6\",\r\n        12: \"grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-12\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      columns: 12,\r\n    },\r\n  }\r\n);\r\n\r\nconst gridItemVariants = cva(\r\n  \"min-h-0\", // Prevents grid items from growing unnecessarily\r\n  {\r\n    variants: {\r\n      colSpan: {\r\n        1: \"col-span-1\",\r\n        2: \"col-span-1 md:col-span-2\",\r\n        3: \"col-span-1 md:col-span-2 lg:col-span-3\",\r\n        4: \"col-span-1 md:col-span-2 lg:col-span-4\",\r\n        6: \"col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-6\",\r\n        12: \"col-span-full\",\r\n      },\r\n      rowSpan: {\r\n        1: \"row-span-1\",\r\n        2: \"row-span-2\",\r\n        3: \"row-span-3\",\r\n        4: \"row-span-4\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      colSpan: 1,\r\n      rowSpan: 1,\r\n    },\r\n  }\r\n);\r\n\r\ninterface DashboardGridProps\r\n  extends React.HTMLAttributes<HTMLDivElement>,\r\n    VariantProps<typeof gridVariants> {}\r\n\r\ninterface DashboardGridItemProps\r\n  extends React.HTMLAttributes<HTMLDivElement>,\r\n    VariantProps<typeof gridItemVariants> {}\r\n\r\nconst DashboardGrid = React.forwardRef<HTMLDivElement, DashboardGridProps>(\r\n  ({ className, columns, ...props }, ref) => {\r\n    return (\r\n      <div\r\n        ref={ref}\r\n        className={cn(gridVariants({ columns }), className)}\r\n        {...props}\r\n      />\r\n    );\r\n  }\r\n);\r\n\r\nconst DashboardGridItem = React.forwardRef<HTMLDivElement, DashboardGridItemProps>(\r\n  ({ className, colSpan, rowSpan, ...props }, ref) => {\r\n    return (\r\n      <div\r\n        ref={ref}\r\n        className={cn(gridItemVariants({ colSpan, rowSpan }), className)}\r\n        {...props}\r\n      />\r\n    );\r\n  }\r\n);\r\n\r\nDashboardGrid.displayName = \"DashboardGrid\";\r\nDashboardGridItem.displayName = \"DashboardGridItem\";\r\n\r\nexport { \r\n  DashboardGrid, \r\n  DashboardGridItem, \r\n  gridVariants, \r\n  gridItemVariants \r\n};"],"names":["_jsx"],"mappings":";;;;;AAIA,MAAM,YAAY,GAAG,GAAG,CACtB,YAAY,EACZ;AACE,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,CAAC,EAAE,aAAa;AAChB,YAAA,CAAC,EAAE,4BAA4B;AAC/B,YAAA,CAAC,EAAE,2CAA2C;AAC9C,YAAA,CAAC,EAAE,2CAA2C;AAC9C,YAAA,CAAC,EAAE,0DAA0D;AAC7D,YAAA,EAAE,EAAE,2EAA2E;AAChF,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,EAAE;AACZ,KAAA;AACF,CAAA;AAGH,MAAM,gBAAgB,GAAG,GAAG,CAC1B,SAAS;AACT;AACE,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,CAAC,EAAE,YAAY;AACf,YAAA,CAAC,EAAE,0BAA0B;AAC7B,YAAA,CAAC,EAAE,wCAAwC;AAC3C,YAAA,CAAC,EAAE,wCAAwC;AAC3C,YAAA,CAAC,EAAE,sDAAsD;AACzD,YAAA,EAAE,EAAE,eAAe;AACpB,SAAA;AACD,QAAA,OAAO,EAAE;AACP,YAAA,CAAC,EAAE,YAAY;AACf,YAAA,CAAC,EAAE,YAAY;AACf,YAAA,CAAC,EAAE,YAAY;AACf,YAAA,CAAC,EAAE,YAAY;AAChB,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,OAAO,EAAE,CAAC;AACX,KAAA;AACF,CAAA;AAWH,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CACpC,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;IACxC,QACEA,aACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,YAAY,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,CAAC,EAAA,GAC/C,KAAK,EAAA,CACT;AAEN,CAAC;AAGH,MAAM,iBAAiB,GAAG,KAAK,CAAC,UAAU,CACxC,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;IACjD,QACEA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,CAAC,EAAA,GAC5D,KAAK,EAAA,CACT;AAEN,CAAC;AAGH,aAAa,CAAC,WAAW,GAAG,eAAe;AAC3C,iBAAiB,CAAC,WAAW,GAAG,mBAAmB;;;;"}

package/dist/components/Marketplace/AllProductsView.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { Product } from './types';
+interface AllProductsViewProps {
+    onProductClick?: (product: Product) => void;
+    onAddToCart?: (product: Product) => void;
+}
+export declare const AllProductsView: React.FC<AllProductsViewProps>;
+export {};

package/dist/components/Marketplace/AllProductsView.js

@@ -0,0 +1,185 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useMemo } from 'react';
+import { Search, Grid2x2, List, Filter, Star, ShoppingCart, Heart, Eye } from 'lucide-react';
+import { Button } from '../Button/Button.js';
+import { Input } from '../Input/Input.js';
+import { Card, CardContent } from '../Card/Card.js';
+import { Badge } from '../Badge/Badge.js';
+import { Modal, ModalHeader, ModalTitle, ModalContent, ModalFooter } from '../Modal/Modal.js';
+import { Checkbox } from '../Checkbox/Checkbox.js';
+import { showToast } from '../Toast/Toast.js';
+import { sampleProducts } from './data/sampleData.js';
+
+const sortOptions = [
+    { value: 'relevance', label: 'Most Relevant' },
+    { value: 'price-low', label: 'Price: Low to High' },
+    { value: 'price-high', label: 'Price: High to Low' },
+    { value: 'rating', label: 'Highest Rated' },
+    { value: 'newest', label: 'Newest First' },
+    { value: 'popular', label: 'Most Popular' },
+];
+const AllProductsView = ({ onProductClick, onAddToCart, }) => {
+    const [searchQuery, setSearchQuery] = useState('');
+    const [sortBy, setSortBy] = useState('relevance');
+    const [viewMode, setViewMode] = useState('grid');
+    const [currentPage, setCurrentPage] = useState(1);
+    const [showFilters, setShowFilters] = useState(false);
+    const [quickViewProduct, setQuickViewProduct] = useState(null);
+    const [wishlist, setWishlist] = useState(new Set());
+    const [filters, setFilters] = useState({
+        categories: [],
+        brands: [],
+        priceRange: [0, 1000],
+        rating: 0,
+        inStock: false,
+        vendors: [],
+    });
+    const itemsPerPage = 12;
+    // Get unique filter options from products
+    const filterOptions = useMemo(() => {
+        const categories = [...new Set(sampleProducts.map(p => p.category))];
+        const brands = [...new Set(sampleProducts.map(p => p.brand))];
+        const vendors = [...new Set(sampleProducts.map(p => p.vendor.name))];
+        return { categories, brands, vendors };
+    }, []);
+    // Filter and sort products
+    const filteredProducts = useMemo(() => {
+        let filtered = sampleProducts.filter(product => {
+            // Search query
+            if (searchQuery && !product.name.toLowerCase().includes(searchQuery.toLowerCase()) &&
+                !product.description.toLowerCase().includes(searchQuery.toLowerCase())) {
+                return false;
+            }
+            // Category filter
+            if (filters.categories.length > 0 && !filters.categories.includes(product.category)) {
+                return false;
+            }
+            // Brand filter
+            if (filters.brands.length > 0 && !filters.brands.includes(product.brand)) {
+                return false;
+            }
+            // Price range
+            if (product.price < filters.priceRange[0] || product.price > filters.priceRange[1]) {
+                return false;
+            }
+            // Rating filter
+            if (filters.rating > 0 && product.rating < filters.rating) {
+                return false;
+            }
+            // In stock filter
+            if (filters.inStock && !product.inStock) {
+                return false;
+            }
+            // Vendor filter
+            if (filters.vendors.length > 0 && !filters.vendors.includes(product.vendor.name)) {
+                return false;
+            }
+            return true;
+        });
+        // Sort products
+        switch (sortBy) {
+            case 'price-low':
+                filtered.sort((a, b) => a.price - b.price);
+                break;
+            case 'price-high':
+                filtered.sort((a, b) => b.price - a.price);
+                break;
+            case 'rating':
+                filtered.sort((a, b) => b.rating - a.rating);
+                break;
+            case 'newest':
+                // Assuming newer products have higher IDs
+                filtered.sort((a, b) => parseInt(b.id) - parseInt(a.id));
+                break;
+            case 'popular':
+                filtered.sort((a, b) => b.reviewCount - a.reviewCount);
+                break;
+        }
+        return filtered;
+    }, [searchQuery, filters, sortBy]);
+    // Paginate products
+    const paginatedProducts = useMemo(() => {
+        const startIndex = (currentPage - 1) * itemsPerPage;
+        return filteredProducts.slice(startIndex, startIndex + itemsPerPage);
+    }, [filteredProducts, currentPage]);
+    const totalPages = Math.ceil(filteredProducts.length / itemsPerPage);
+    const handleFilterChange = (filterType, value) => {
+        setFilters(prev => ({
+            ...prev,
+            [filterType]: value,
+        }));
+        setCurrentPage(1); // Reset to first page when filters change
+    };
+    const handleClearFilters = () => {
+        setFilters({
+            categories: [],
+            brands: [],
+            priceRange: [0, 1000],
+            rating: 0,
+            inStock: false,
+            vendors: [],
+        });
+        setSearchQuery('');
+        setCurrentPage(1);
+    };
+    const toggleWishlist = (productId) => {
+        setWishlist(prev => {
+            const newWishlist = new Set(prev);
+            if (newWishlist.has(productId)) {
+                newWishlist.delete(productId);
+                showToast.info('Removed from wishlist');
+            }
+            else {
+                newWishlist.add(productId);
+                showToast.success('Added to wishlist');
+            }
+            return newWishlist;
+        });
+    };
+    const handleAddToCart = (product) => {
+        onAddToCart?.(product);
+        showToast.success(`${product.name} added to cart!`);
+    };
+    const ProductCard = ({ product }) => (jsxs(Card, { className: "group hover:shadow-lg transition-all duration-300", children: [jsxs("div", { className: "relative aspect-square bg-gray-100 rounded-t-lg overflow-hidden", children: [jsx("img", { src: product.images[0], alt: product.name, className: "w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" }), product.discount && (jsxs(Badge, { variant: "danger", className: "absolute top-2 left-2", children: ["-", product.discount, "%"] })), jsx("div", { className: "absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity", children: jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => {
+                                e.stopPropagation();
+                                toggleWishlist(product.id);
+                            }, className: "bg-white/80 hover:bg-white", children: jsx(Heart, { className: `h-4 w-4 ${wishlist.has(product.id) ? 'fill-current text-red-500' : ''}` }) }) }), jsx("div", { className: "absolute bottom-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity", children: jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => {
+                                e.stopPropagation();
+                                setQuickViewProduct(product);
+                            }, className: "bg-white/80 hover:bg-white", children: jsx(Eye, { className: "h-4 w-4" }) }) }), !product.inStock && (jsx("div", { className: "absolute inset-0 bg-black/50 flex items-center justify-center", children: jsx(Badge, { variant: "secondary", children: "Out of Stock" }) }))] }), jsxs(CardContent, { className: "p-4", children: [jsxs("div", { className: "mb-2", children: [jsx("h3", { className: "font-medium text-gray-900 line-clamp-2 cursor-pointer hover:text-primary-600", onClick: () => onProductClick?.(product), children: product.name }), jsx("p", { className: "text-sm text-gray-600", children: product.brand })] }), jsxs("div", { className: "flex items-center space-x-1 mb-2", children: [jsx(Star, { className: "h-4 w-4 text-yellow-400 fill-current" }), jsxs("span", { className: "text-sm text-gray-600", children: [product.rating, " (", product.reviewCount, ")"] })] }), jsx("div", { className: "flex items-center justify-between mb-3", children: jsxs("div", { className: "flex items-center space-x-2", children: [jsxs("span", { className: "text-lg font-bold text-gray-900", children: ["$", product.price.toFixed(2)] }), product.originalPrice && (jsxs("span", { className: "text-sm text-gray-500 line-through", children: ["$", product.originalPrice.toFixed(2)] }))] }) }), jsxs(Button, { variant: "primary", size: "sm", onClick: (e) => {
+                            e.stopPropagation();
+                            handleAddToCart(product);
+                        }, disabled: !product.inStock, className: "w-full", children: [jsx(ShoppingCart, { className: "mr-2 h-4 w-4" }), "Add to Cart"] })] })] }));
+    return (jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8", children: [jsxs("div", { className: "flex flex-col lg:flex-row lg:items-center lg:justify-between mb-8", children: [jsxs("div", { children: [jsx("h1", { className: "text-3xl font-bold text-gray-900 mb-2", children: "All Products" }), jsxs("p", { className: "text-gray-600", children: ["Showing ", filteredProducts.length, " of ", sampleProducts.length, " products"] })] }), jsxs("div", { className: "flex items-center space-x-4 mt-4 lg:mt-0", children: [jsxs("div", { className: "relative", children: [jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" }), jsx(Input, { placeholder: "Search products...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "pl-10 w-64" })] }), jsx("select", { value: sortBy, onChange: (e) => setSortBy(e.target.value), className: "border border-gray-300 rounded-lg px-3 py-2 bg-white", children: sortOptions.map(option => (jsx("option", { value: option.value, children: option.label }, option.value))) }), jsxs("div", { className: "flex items-center bg-gray-100 rounded-lg p-1", children: [jsx(Button, { variant: viewMode === 'grid' ? 'primary' : 'ghost', size: "sm", onClick: () => setViewMode('grid'), children: jsx(Grid2x2, { className: "h-4 w-4" }) }), jsx(Button, { variant: viewMode === 'list' ? 'primary' : 'ghost', size: "sm", onClick: () => setViewMode('list'), children: jsx(List, { className: "h-4 w-4" }) })] }), jsxs(Button, { variant: "outline", onClick: () => setShowFilters(true), className: "lg:hidden", children: [jsx(Filter, { className: "mr-2 h-4 w-4" }), "Filters"] })] })] }), jsxs("div", { className: "flex gap-8", children: [jsx("div", { className: "hidden lg:block w-64 flex-shrink-0", children: jsx(Card, { className: "sticky top-4", children: jsxs(CardContent, { className: "p-6", children: [jsxs("div", { className: "flex items-center justify-between mb-4", children: [jsx("h3", { className: "font-semibold text-gray-900", children: "Filters" }), jsx(Button, { variant: "ghost", size: "sm", onClick: handleClearFilters, children: "Clear All" })] }), jsxs("div", { className: "mb-6", children: [jsx("h4", { className: "font-medium text-gray-900 mb-3", children: "Categories" }), jsx("div", { className: "space-y-2", children: filterOptions.categories.map(category => (jsxs("label", { className: "flex items-center space-x-2", children: [jsx(Checkbox, { checked: filters.categories.includes(category), onChange: (e) => {
+                                                                const newCategories = e.target.checked
+                                                                    ? [...filters.categories, category]
+                                                                    : filters.categories.filter(c => c !== category);
+                                                                handleFilterChange('categories', newCategories);
+                                                            } }), jsx("span", { className: "text-sm text-gray-700", children: category })] }, category))) })] }), jsxs("div", { className: "mb-6", children: [jsx("h4", { className: "font-medium text-gray-900 mb-3", children: "Brands" }), jsx("div", { className: "space-y-2", children: filterOptions.brands.map(brand => (jsxs("label", { className: "flex items-center space-x-2", children: [jsx(Checkbox, { checked: filters.brands.includes(brand), onChange: (e) => {
+                                                                const newBrands = e.target.checked
+                                                                    ? [...filters.brands, brand]
+                                                                    : filters.brands.filter(b => b !== brand);
+                                                                handleFilterChange('brands', newBrands);
+                                                            } }), jsx("span", { className: "text-sm text-gray-700", children: brand })] }, brand))) })] }), jsxs("div", { className: "mb-6", children: [jsx("h4", { className: "font-medium text-gray-900 mb-3", children: "Price Range" }), jsx("div", { className: "space-y-2", children: jsxs("div", { className: "flex items-center space-x-2", children: [jsx(Input, { type: "number", placeholder: "Min", value: filters.priceRange[0], onChange: (e) => handleFilterChange('priceRange', [
+                                                                parseInt(e.target.value) || 0,
+                                                                filters.priceRange[1]
+                                                            ]), className: "w-20" }), jsx("span", { children: "-" }), jsx(Input, { type: "number", placeholder: "Max", value: filters.priceRange[1], onChange: (e) => handleFilterChange('priceRange', [
+                                                                filters.priceRange[0],
+                                                                parseInt(e.target.value) || 1000
+                                                            ]), className: "w-20" })] }) })] }), jsxs("div", { className: "mb-6", children: [jsx("h4", { className: "font-medium text-gray-900 mb-3", children: "Minimum Rating" }), jsx("div", { className: "space-y-2", children: [4, 3, 2, 1].map(rating => (jsxs("label", { className: "flex items-center space-x-2", children: [jsx(Checkbox, { checked: filters.rating === rating, onChange: (e) => {
+                                                                handleFilterChange('rating', e.target.checked ? rating : 0);
+                                                            } }), jsxs("div", { className: "flex items-center space-x-1", children: [[1, 2, 3, 4, 5].map(star => (jsx(Star, { className: `h-4 w-4 ${star <= rating ? 'text-yellow-400 fill-current' : 'text-gray-300'}` }, star))), jsx("span", { className: "text-sm text-gray-700", children: "& up" })] })] }, rating))) })] }), jsx("div", { className: "mb-6", children: jsxs("label", { className: "flex items-center space-x-2", children: [jsx(Checkbox, { checked: filters.inStock, onChange: (e) => handleFilterChange('inStock', e.target.checked) }), jsx("span", { className: "text-sm text-gray-700", children: "In Stock Only" })] }) })] }) }) }), jsx("div", { className: "flex-1", children: paginatedProducts.length === 0 ? (jsxs("div", { className: "text-center py-12", children: [jsx("div", { className: "text-gray-400 mb-4", children: jsx(Search, { className: "h-16 w-16 mx-auto" }) }), jsx("h3", { className: "text-lg font-medium text-gray-900 mb-2", children: "No products found" }), jsx("p", { className: "text-gray-600 mb-4", children: "Try adjusting your search or filter criteria" }), jsx(Button, { variant: "outline", onClick: handleClearFilters, children: "Clear Filters" })] })) : (jsxs(Fragment, { children: [jsx("div", { className: `grid gap-6 ${viewMode === 'grid'
+                                        ? 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'
+                                        : 'grid-cols-1'}`, children: paginatedProducts.map(product => (jsx(ProductCard, { product: product }, product.id))) }), totalPages > 1 && (jsxs("div", { className: "flex items-center justify-center space-x-2 mt-12", children: [jsx(Button, { variant: "outline", onClick: () => setCurrentPage(prev => Math.max(1, prev - 1)), disabled: currentPage === 1, children: "Previous" }), Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
+                                            const page = i + 1;
+                                            return (jsx(Button, { variant: currentPage === page ? 'primary' : 'outline', onClick: () => setCurrentPage(page), children: page }, page));
+                                        }), jsx(Button, { variant: "outline", onClick: () => setCurrentPage(prev => Math.min(totalPages, prev + 1)), disabled: currentPage === totalPages, children: "Next" })] }))] })) })] }), jsxs(Modal, { open: showFilters, onOpenChange: setShowFilters, children: [jsx(ModalHeader, { children: jsx(ModalTitle, { children: "Filters" }) }), jsx(ModalContent, { children: jsx("div", { className: "space-y-6", children: jsxs("div", { children: [jsx("h4", { className: "font-medium text-gray-900 mb-3", children: "Categories" }), jsx("div", { className: "space-y-2", children: filterOptions.categories.map(category => (jsxs("label", { className: "flex items-center space-x-2", children: [jsx(Checkbox, { checked: filters.categories.includes(category), onChange: (e) => {
+                                                        const newCategories = e.target.checked
+                                                            ? [...filters.categories, category]
+                                                            : filters.categories.filter(c => c !== category);
+                                                        handleFilterChange('categories', newCategories);
+                                                    } }), jsx("span", { className: "text-sm text-gray-700", children: category })] }, category))) })] }) }) }), jsxs(ModalFooter, { children: [jsx(Button, { variant: "outline", onClick: handleClearFilters, children: "Clear All" }), jsx(Button, { variant: "primary", onClick: () => setShowFilters(false), children: "Apply Filters" })] })] }), jsx(Modal, { open: !!quickViewProduct, onOpenChange: () => setQuickViewProduct(null), size: "lg", children: quickViewProduct && (jsxs(Fragment, { children: [jsx(ModalHeader, { children: jsx(ModalTitle, { children: quickViewProduct.name }) }), jsx(ModalContent, { children: jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [jsx("div", { className: "aspect-square bg-gray-100 rounded-lg overflow-hidden", children: jsx("img", { src: quickViewProduct.images[0], alt: quickViewProduct.name, className: "w-full h-full object-cover" }) }), jsxs("div", { children: [jsxs("div", { className: "flex items-center space-x-1 mb-2", children: [jsx(Star, { className: "h-4 w-4 text-yellow-400 fill-current" }), jsxs("span", { className: "text-sm text-gray-600", children: [quickViewProduct.rating, " (", quickViewProduct.reviewCount, " reviews)"] })] }), jsxs("div", { className: "flex items-center space-x-2 mb-4", children: [jsxs("span", { className: "text-2xl font-bold text-gray-900", children: ["$", quickViewProduct.price.toFixed(2)] }), quickViewProduct.originalPrice && (jsxs("span", { className: "text-lg text-gray-500 line-through", children: ["$", quickViewProduct.originalPrice.toFixed(2)] }))] }), jsx("p", { className: "text-gray-600 mb-4", children: quickViewProduct.description }), jsx(Badge, { variant: quickViewProduct.inStock ? 'success' : 'danger', className: "mb-4", children: quickViewProduct.inStock ? 'In Stock' : 'Out of Stock' })] })] }) }), jsxs(ModalFooter, { children: [jsx(Button, { variant: "outline", onClick: () => onProductClick?.(quickViewProduct), children: "View Details" }), jsxs(Button, { variant: "primary", onClick: () => handleAddToCart(quickViewProduct), disabled: !quickViewProduct.inStock, children: [jsx(ShoppingCart, { className: "mr-2 h-4 w-4" }), "Add to Cart"] })] })] })) })] }));
+};
+
+export { AllProductsView };
+//# sourceMappingURL=AllProductsView.js.map