@beyondcorp/beyond-ui 1.1.55 → 1.1.59

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -20,7 +20,7 @@ const SingleProductView = ({ product, onAddToCart, onWishlist, onShare, showRevi
20
20
  const [selectedColor, setSelectedColor] = useState(product.colors ? product.colors[0] : undefined);
21
21
  const { currentBreakpoint, isBelow } = useBreakpoint();
22
22
  isBelow('md');
23
- return (jsxs(PageLayout, { variant: "product", maxWidth: "xl", className: cn(className), children: [jsx(PageHeader, { children: jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: jsxs("div", { className: "flex items-center justify-between h-16", children: [jsxs("div", { className: "flex items-center space-x-2", children: [jsx(ShoppingCart, { className: "h-6 w-6 text-primary-600" }), jsx("span", { className: "font-bold text-xl", children: "Store" })] }), jsxs("div", { className: "flex items-center space-x-4", children: [jsx(Input, { placeholder: "Search products...", className: "w-64" }), jsx(Button, { variant: "outline", children: "Cart" })] })] }) }) }), jsxs(PageLayoutContent, { layout: "centered", spacing: "lg", children: [jsxs("div", { className: "grid grid-cols-1 gap-8 lg:grid-cols-2 lg:gap-12", children: [jsxs("div", { children: [jsx("div", { className: "aspect-square bg-gray-100 rounded-lg mb-4 flex items-center justify-center cursor-pointer w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg mx-auto", onClick: toggleImageModal, children: selectedImage ? (jsx("img", { src: selectedImage, alt: product.name, className: "object-contain w-full h-full max-h-64 max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg" })) : (jsxs("div", { className: "text-center text-gray-500", children: [jsx(ShoppingCart, { className: "h-16 w-16 mx-auto mb-2" }), jsx("p", { children: "Product Image" })] })) }), jsx("div", { className: "grid grid-cols-4 gap-2 max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg mx-auto", children: product.images.map((img, i) => (jsx("div", { className: cn('aspect-square bg-gray-100 rounded border-2 border-transparent hover:border-primary-500 cursor-pointer', selectedImage === img && 'border-primary-500'), onClick: () => setSelectedImage(img), children: jsx("img", { src: img, alt: `Thumbnail ${i + 1}`, className: "object-cover h-full w-full rounded" }) }, img))) }), jsx(Modal, { open: imageModalOpen, onOpenChange: toggleImageModal, children: jsx("div", { className: "flex items-center justify-center p-4", children: jsx("img", { src: selectedImage, alt: product.name, className: "object-contain w-full h-full max-h-96 max-w-lg" }) }) })] }), jsxs("div", { className: "px-2 sm:px-0", children: [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' }), jsx(Badge, { variant: "outline", children: "Free Shipping" })] }), jsx("h1", { className: "text-3xl font-bold text-gray-900 mb-4", children: product.name }), jsxs("div", { className: "flex items-center space-x-2 mb-4", children: [jsx("div", { className: "flex items-center", children: [1, 2, 3, 4, 5].map((star) => (jsx(Star, { className: cn('h-5 w-5', product.reviews && product.reviews.length > 0
23
+ return (jsxs(PageLayout, { variant: "product", maxWidth: "xl", className: cn(className), children: [jsx(PageHeader, { children: jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: jsxs("div", { className: "flex items-center justify-between h-16", children: [jsx("div", { className: "flex items-center space-x-2" }), jsxs("div", { className: "flex items-center space-x-4", children: [jsx(Input, { placeholder: "Search products...", className: "w-full sm:w-64" }), jsx(Button, { variant: "outline", children: "Cart" })] })] }) }) }), jsxs(PageLayoutContent, { layout: "centered", spacing: "lg", children: [jsxs("div", { className: "grid grid-cols-1 gap-8 lg:grid-cols-2 lg:gap-12", children: [jsxs("div", { children: [jsx("div", { className: "aspect-square bg-gray-100 rounded-lg mb-4 flex items-center justify-center cursor-pointer w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg mx-auto", onClick: toggleImageModal, children: selectedImage ? (jsx("img", { src: selectedImage, alt: product.name, className: "object-contain w-full h-full max-h-64 max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg" })) : (jsxs("div", { className: "text-center text-gray-500", children: [jsx(ShoppingCart, { className: "h-16 w-16 mx-auto mb-2" }), jsx("p", { children: "Product Image" })] })) }), jsx("div", { className: "grid grid-cols-4 gap-2 max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg mx-auto", children: product.images.map((img, i) => (jsx("div", { className: cn('aspect-square bg-gray-100 rounded border-2 border-transparent hover:border-primary-500 cursor-pointer', selectedImage === img && 'border-primary-500'), onClick: () => setSelectedImage(img), children: jsx("img", { src: img, alt: `Thumbnail ${i + 1}`, className: "object-cover h-full w-full rounded" }) }, img))) }), jsx(Modal, { open: imageModalOpen, onOpenChange: toggleImageModal, children: jsx("div", { className: "flex items-center justify-center p-4", children: jsx("img", { src: selectedImage, alt: product.name, className: "object-contain w-full h-full max-h-96 max-w-lg" }) }) })] }), jsxs("div", { className: "px-2 sm:px-0", children: [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' }), jsx(Badge, { variant: "outline", children: "Free Shipping" })] }), jsx("h1", { className: "text-3xl font-bold text-gray-900 mb-4", children: product.name }), jsxs("div", { className: "flex items-center space-x-2 mb-4", children: [jsx("div", { className: "flex items-center", children: [1, 2, 3, 4, 5].map((star) => (jsx(Star, { className: cn('h-5 w-5', product.reviews && product.reviews.length > 0
24
24
  ? 'text-yellow-400 fill-current'
25
25
  : 'text-gray-300') }, star))) }), jsxs("span", { className: "text-gray-600", children: ["(", product.reviews ? product.reviews.length : 0, " reviews)"] })] }), jsxs("div", { className: "mb-6", children: [jsxs("span", { className: "text-3xl font-bold text-gray-900", children: ["$", product.price.toFixed(2)] }), product.oldPrice && (jsxs("span", { className: "text-lg text-gray-500 line-through ml-2", children: ["$", product.oldPrice.toFixed(2)] })), product.discount && (jsx(Badge, { variant: "danger", className: "ml-2", children: product.discount }))] }), jsx("p", { className: "text-gray-600 mb-6 leading-relaxed", children: product.description }), showColorOptions && product.colors && product.colors.length > 0 && (jsx("div", { className: "space-y-4 mb-8", children: jsxs("div", { children: [jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Color" }), jsx("div", { className: "flex flex-wrap gap-2", children: product.colors.map((color) => (jsx("button", { className: cn('px-4 py-2 border border-gray-300 rounded-lg hover:border-primary-500 focus:border-primary-500', selectedColor === color && 'border-primary-500'), onClick: () => setSelectedColor(color), type: "button", children: color }, color))) })] }) })), jsxs("div", { className: "flex flex-col sm:flex-row gap-2 sm:gap-4 mb-6", children: [jsxs(Button, { variant: "primary", size: "lg", className: "flex-1", onClick: () => onAddToCart && onAddToCart(product.id), disabled: !product.inStock, children: [jsx(ShoppingCart, { className: "mr-2 h-5 w-5" }), "Add to Cart"] }), jsx(Button, { variant: "outline", size: "lg", onClick: () => onWishlist && onWishlist(product.id), children: jsx(Heart, { className: "h-5 w-5" }) }), jsx(Button, { variant: "outline", size: "lg", onClick: () => onShare && onShare(product.id), children: jsx(Share2, { className: "h-5 w-5" }) })] }), jsxs("div", { className: "border-t pt-6", children: [jsx("h3", { className: "font-semibold text-gray-900 mb-3", children: "Key Features" }), jsx("ul", { className: "space-y-2 text-gray-600", children: product.features.map((feature, idx) => (jsxs("li", { className: "flex items-center", children: [jsx(CheckCircle, { className: "h-4 w-4 text-green-500 mr-2" }), feature] }, idx))) })] })] })] }), jsx("div", { className: "mt-8 sm:mt-12", children: (() => {
26
26
  const [tabValue, setTabValue] = useState('details');
@@ -1 +1 @@
1
- {"version":3,"file":"SingleProductView.js","sources":["../../../src/components/SingleProductView/SingleProductView.tsx"],"sourcesContent":["import React, { useState } from 'react';\r\nimport {\r\n PageLayout,\r\n PageHeader,\r\n PageLayoutContent,\r\n} from '../PageLayout';\r\nimport { Badge } from '../Badge';\r\nimport { Button } from '../Button';\r\nimport { Card } from '../Card';\r\nimport { Input } from '../Input';\r\nimport { Avatar, AvatarImage, AvatarFallback } from '../Avatar';\r\nimport { Modal } from '../Modal';\r\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../Tabs';\r\nimport { Star, ShoppingCart, Heart, Share2, CheckCircle } from 'lucide-react';\r\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\r\nimport { useToggle } from '../../hooks/useToggle';\r\nimport { cn } from '../../utils/cn';\r\n\r\nexport interface ProductReview {\r\n user: string;\r\n avatar?: string;\r\n rating: number;\r\n comment: string;\r\n date: string;\r\n}\r\n\r\nexport interface ProductData {\r\n id: string;\r\n name: string;\r\n description: string;\r\n images: string[];\r\n price: number;\r\n oldPrice?: number;\r\n discount?: string;\r\n inStock: boolean;\r\n features: string[];\r\n colors?: string[];\r\n reviews?: ProductReview[];\r\n}\r\n\r\nexport interface SingleProductViewProps {\r\n product: ProductData;\r\n onAddToCart?: (productId: string) => void;\r\n onWishlist?: (productId: string) => void;\r\n onShare?: (productId: string) => void;\r\n showReviews?: boolean;\r\n showColorOptions?: boolean;\r\n className?: string;\r\n}\r\n\r\nexport const SingleProductView: React.FC<SingleProductViewProps> = ({\r\n product,\r\n onAddToCart,\r\n onWishlist,\r\n onShare,\r\n showReviews = true,\r\n showColorOptions = true,\r\n className,\r\n}) => {\r\n const [selectedImage, setSelectedImage] = useState(product.images[0]);\r\n const [imageModalOpen, toggleImageModal] = useToggle(false);\r\n const [selectedColor, setSelectedColor] = useState(\r\n product.colors ? product.colors[0] : undefined\r\n );\r\n const { currentBreakpoint, isBelow } = useBreakpoint();\r\n const isMobile = isBelow('md');\r\n\r\n return (\r\n <PageLayout variant=\"product\" maxWidth=\"xl\" className={cn(className)}>\r\n {/* Header */}\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 items-center justify-between h-16\">\r\n <div className=\"flex items-center space-x-2\">\r\n <ShoppingCart className=\"h-6 w-6 text-primary-600\" />\r\n <span className=\"font-bold text-xl\">Store</span>\r\n </div>\r\n <div className=\"flex items-center space-x-4\">\r\n <Input placeholder=\"Search products...\" className=\"w-64\" />\r\n <Button variant=\"outline\">Cart</Button>\r\n </div>\r\n </div>\r\n </div>\r\n </PageHeader>\r\n\r\n {/* Product Content */}\r\n <PageLayoutContent layout=\"centered\" spacing=\"lg\">\r\n <div className=\"grid grid-cols-1 gap-8 lg:grid-cols-2 lg:gap-12\">\r\n {/* Product Images */}\r\n <div>\r\n <div\r\n className=\"aspect-square bg-gray-100 rounded-lg mb-4 flex items-center justify-center cursor-pointer w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg mx-auto\"\r\n onClick={toggleImageModal}\r\n >\r\n {selectedImage ? (\r\n <img\r\n src={selectedImage}\r\n alt={product.name}\r\n className=\"object-contain w-full h-full max-h-64 max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg\"\r\n />\r\n ) : (\r\n <div className=\"text-center text-gray-500\">\r\n <ShoppingCart className=\"h-16 w-16 mx-auto mb-2\" />\r\n <p>Product Image</p>\r\n </div>\r\n )}\r\n </div>\r\n <div className=\"grid grid-cols-4 gap-2 max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg mx-auto\">\r\n {product.images.map((img, i) => (\r\n <div\r\n key={img}\r\n className={cn(\r\n 'aspect-square bg-gray-100 rounded border-2 border-transparent hover:border-primary-500 cursor-pointer',\r\n selectedImage === img && 'border-primary-500'\r\n )}\r\n onClick={() => setSelectedImage(img)}\r\n >\r\n <img\r\n src={img}\r\n alt={`Thumbnail ${i + 1}`}\r\n className=\"object-cover h-full w-full rounded\"\r\n />\r\n </div>\r\n ))}\r\n </div>\r\n <Modal open={imageModalOpen} onOpenChange={toggleImageModal}>\r\n <div className=\"flex items-center justify-center p-4\">\r\n <img\r\n src={selectedImage}\r\n alt={product.name}\r\n className=\"object-contain w-full h-full max-h-96 max-w-lg\"\r\n />\r\n </div>\r\n </Modal>\r\n </div>\r\n\r\n {/* Product Details */}\r\n <div className=\"px-2 sm:px-0\">\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 <Badge variant=\"outline\">Free Shipping</Badge>\r\n </div>\r\n\r\n <h1 className=\"text-3xl font-bold text-gray-900 mb-4\">\r\n {product.name}\r\n </h1>\r\n\r\n <div className=\"flex items-center space-x-2 mb-4\">\r\n <div className=\"flex items-center\">\r\n {[1, 2, 3, 4, 5].map((star) => (\r\n <Star\r\n key={star}\r\n className={cn(\r\n 'h-5 w-5',\r\n product.reviews && product.reviews.length > 0\r\n ? 'text-yellow-400 fill-current'\r\n : 'text-gray-300'\r\n )}\r\n />\r\n ))}\r\n </div>\r\n <span className=\"text-gray-600\">\r\n ({product.reviews ? product.reviews.length : 0} reviews)\r\n </span>\r\n </div>\r\n\r\n <div className=\"mb-6\">\r\n <span className=\"text-3xl font-bold text-gray-900\">\r\n ${product.price.toFixed(2)}\r\n </span>\r\n {product.oldPrice && (\r\n <span className=\"text-lg text-gray-500 line-through ml-2\">\r\n ${product.oldPrice.toFixed(2)}\r\n </span>\r\n )}\r\n {product.discount && (\r\n <Badge variant=\"danger\" className=\"ml-2\">\r\n {product.discount}\r\n </Badge>\r\n )}\r\n </div>\r\n\r\n <p className=\"text-gray-600 mb-6 leading-relaxed\">\r\n {product.description}\r\n </p>\r\n\r\n {showColorOptions && product.colors && product.colors.length > 0 && (\r\n <div className=\"space-y-4 mb-8\">\r\n <div>\r\n <label className=\"block text-sm font-medium text-gray-700 mb-2\">\r\n Color\r\n </label>\r\n <div className=\"flex flex-wrap gap-2\">\r\n {product.colors.map((color) => (\r\n <button\r\n key={color}\r\n className={cn(\r\n 'px-4 py-2 border border-gray-300 rounded-lg hover:border-primary-500 focus:border-primary-500',\r\n selectedColor === color && 'border-primary-500'\r\n )}\r\n onClick={() => setSelectedColor(color)}\r\n type=\"button\"\r\n >\r\n {color}\r\n </button>\r\n ))}\r\n </div>\r\n </div>\r\n </div>\r\n )}\r\n\r\n <div className=\"flex flex-col sm:flex-row gap-2 sm:gap-4 mb-6\">\r\n <Button\r\n variant=\"primary\"\r\n size=\"lg\"\r\n className=\"flex-1\"\r\n onClick={() => onAddToCart && onAddToCart(product.id)}\r\n disabled={!product.inStock}\r\n >\r\n <ShoppingCart className=\"mr-2 h-5 w-5\" />\r\n Add to Cart\r\n </Button>\r\n <Button\r\n variant=\"outline\"\r\n size=\"lg\"\r\n onClick={() => onWishlist && onWishlist(product.id)}\r\n >\r\n <Heart className=\"h-5 w-5\" />\r\n </Button>\r\n <Button\r\n variant=\"outline\"\r\n size=\"lg\"\r\n onClick={() => onShare && onShare(product.id)}\r\n >\r\n <Share2 className=\"h-5 w-5\" />\r\n </Button>\r\n </div>\r\n\r\n <div className=\"border-t pt-6\">\r\n <h3 className=\"font-semibold text-gray-900 mb-3\">Key Features</h3>\r\n <ul className=\"space-y-2 text-gray-600\">\r\n {product.features.map((feature, idx) => (\r\n <li key={idx} className=\"flex items-center\">\r\n <CheckCircle className=\"h-4 w-4 text-green-500 mr-2\" />\r\n {feature}\r\n </li>\r\n ))}\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n {/* Tabs for Details/Reviews */}\r\n <div className=\"mt-8 sm:mt-12\">\r\n {(() => {\r\n const [tabValue, setTabValue] = useState('details');\r\n return (\r\n <Tabs value={tabValue} onValueChange={setTabValue}>\r\n <TabsList>\r\n <TabsTrigger value=\"details\">Details</TabsTrigger>\r\n {showReviews && <TabsTrigger value=\"reviews\">Reviews</TabsTrigger>}\r\n </TabsList>\r\n <TabsContent value=\"details\">\r\n <div>\r\n <h4 className=\"font-semibold text-gray-900 mb-2\">\r\n Product Details\r\n </h4>\r\n <p className=\"text-gray-600\">{product.description}</p>\r\n </div>\r\n </TabsContent>\r\n {showReviews && (\r\n <TabsContent value=\"reviews\">\r\n <div>\r\n <h4 className=\"font-semibold text-gray-900 mb-4\">\r\n Customer Reviews\r\n </h4>\r\n {product.reviews && product.reviews.length > 0 ? (\r\n <div className=\"space-y-6\">\r\n {product.reviews.map((review, idx) => (\r\n <Card key={idx} className=\"p-4\">\r\n <div className=\"flex flex-col sm:flex-row sm:items-center sm:space-x-3 mb-2 gap-2\">\r\n <Avatar size=\"sm\">\r\n {review.avatar ? (\r\n <AvatarImage src={review.avatar} />\r\n ) : (\r\n <AvatarFallback>\r\n {review.user[0]}\r\n </AvatarFallback>\r\n )}\r\n </Avatar>\r\n <span className=\"font-medium text-gray-900\">\r\n {review.user}\r\n </span>\r\n <span className=\"text-xs text-gray-500\">\r\n {review.date}\r\n </span>\r\n </div>\r\n <div className=\"flex items-center mb-2\">\r\n {[1, 2, 3, 4, 5].map((star) => (\r\n <Star\r\n key={star}\r\n className={cn(\r\n 'h-4 w-4',\r\n review.rating >= star\r\n ? 'text-yellow-400 fill-current'\r\n : 'text-gray-300'\r\n )}\r\n />\r\n ))}\r\n </div>\r\n <p className=\"text-gray-700\">{review.comment}</p>\r\n </Card>\r\n ))}\r\n </div>\r\n ) : (\r\n <p className=\"text-gray-500\">No reviews yet.</p>\r\n )}\r\n </div>\r\n </TabsContent>\r\n )}\r\n </Tabs>\r\n );\r\n })()}\r\n </div>\r\n </PageLayoutContent>\r\n </PageLayout>\r\n );\r\n};"],"names":["_jsxs","_jsx"],"mappings":"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"}
1
+ {"version":3,"file":"SingleProductView.js","sources":["../../../src/components/SingleProductView/SingleProductView.tsx"],"sourcesContent":["import React, { useState } from 'react';\r\nimport {\r\n PageLayout,\r\n PageHeader,\r\n PageLayoutContent,\r\n} from '../PageLayout';\r\nimport { Badge } from '../Badge';\r\nimport { Button } from '../Button';\r\nimport { Card } from '../Card';\r\nimport { Input } from '../Input';\r\nimport { Avatar, AvatarImage, AvatarFallback } from '../Avatar';\r\nimport { Modal } from '../Modal';\r\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../Tabs';\r\nimport { Star, ShoppingCart, Heart, Share2, CheckCircle } from 'lucide-react';\r\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\r\nimport { useToggle } from '../../hooks/useToggle';\r\nimport { cn } from '../../utils/cn';\r\n\r\nexport interface ProductReview {\r\n user: string;\r\n avatar?: string;\r\n rating: number;\r\n comment: string;\r\n date: string;\r\n}\r\n\r\nexport interface ProductData {\r\n id: string;\r\n name: string;\r\n description: string;\r\n images: string[];\r\n price: number;\r\n oldPrice?: number;\r\n discount?: string;\r\n inStock: boolean;\r\n features: string[];\r\n colors?: string[];\r\n reviews?: ProductReview[];\r\n}\r\n\r\nexport interface SingleProductViewProps {\r\n product: ProductData;\r\n onAddToCart?: (productId: string) => void;\r\n onWishlist?: (productId: string) => void;\r\n onShare?: (productId: string) => void;\r\n showReviews?: boolean;\r\n showColorOptions?: boolean;\r\n className?: string;\r\n}\r\n\r\nexport const SingleProductView: React.FC<SingleProductViewProps> = ({\r\n product,\r\n onAddToCart,\r\n onWishlist,\r\n onShare,\r\n showReviews = true,\r\n showColorOptions = true,\r\n className,\r\n}) => {\r\n const [selectedImage, setSelectedImage] = useState(product.images[0]);\r\n const [imageModalOpen, toggleImageModal] = useToggle(false);\r\n const [selectedColor, setSelectedColor] = useState(\r\n product.colors ? product.colors[0] : undefined\r\n );\r\n const { currentBreakpoint, isBelow } = useBreakpoint();\r\n const isMobile = isBelow('md');\r\n\r\n return (\r\n <PageLayout variant=\"product\" maxWidth=\"xl\" className={cn(className)}>\r\n {/* Header */}\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 items-center justify-between h-16\">\r\n <div className=\"flex items-center space-x-2\">\r\n {/* <ShoppingCart className=\"h-6 w-6 text-primary-600\" />\r\n <span className=\"font-bold text-xl\">Store</span> */}\r\n </div>\r\n <div className=\"flex items-center space-x-4\">\r\n <Input\r\n placeholder=\"Search products...\"\r\n className=\"w-full sm:w-64\"\r\n />\r\n <Button variant=\"outline\">Cart</Button>\r\n </div>\r\n </div>\r\n </div>\r\n </PageHeader>\r\n\r\n {/* Product Content */}\r\n <PageLayoutContent layout=\"centered\" spacing=\"lg\">\r\n <div className=\"grid grid-cols-1 gap-8 lg:grid-cols-2 lg:gap-12\">\r\n {/* Product Images */}\r\n <div>\r\n <div\r\n className=\"aspect-square bg-gray-100 rounded-lg mb-4 flex items-center justify-center cursor-pointer w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg mx-auto\"\r\n onClick={toggleImageModal}\r\n >\r\n {selectedImage ? (\r\n <img\r\n src={selectedImage}\r\n alt={product.name}\r\n className=\"object-contain w-full h-full max-h-64 max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg\"\r\n />\r\n ) : (\r\n <div className=\"text-center text-gray-500\">\r\n <ShoppingCart className=\"h-16 w-16 mx-auto mb-2\" />\r\n <p>Product Image</p>\r\n </div>\r\n )}\r\n </div>\r\n <div className=\"grid grid-cols-4 gap-2 max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg mx-auto\">\r\n {product.images.map((img, i) => (\r\n <div\r\n key={img}\r\n className={cn(\r\n 'aspect-square bg-gray-100 rounded border-2 border-transparent hover:border-primary-500 cursor-pointer',\r\n selectedImage === img && 'border-primary-500'\r\n )}\r\n onClick={() => setSelectedImage(img)}\r\n >\r\n <img\r\n src={img}\r\n alt={`Thumbnail ${i + 1}`}\r\n className=\"object-cover h-full w-full rounded\"\r\n />\r\n </div>\r\n ))}\r\n </div>\r\n <Modal open={imageModalOpen} onOpenChange={toggleImageModal}>\r\n <div className=\"flex items-center justify-center p-4\">\r\n <img\r\n src={selectedImage}\r\n alt={product.name}\r\n className=\"object-contain w-full h-full max-h-96 max-w-lg\"\r\n />\r\n </div>\r\n </Modal>\r\n </div>\r\n\r\n {/* Product Details */}\r\n <div className=\"px-2 sm:px-0\">\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 <Badge variant=\"outline\">Free Shipping</Badge>\r\n </div>\r\n\r\n <h1 className=\"text-3xl font-bold text-gray-900 mb-4\">\r\n {product.name}\r\n </h1>\r\n\r\n <div className=\"flex items-center space-x-2 mb-4\">\r\n <div className=\"flex items-center\">\r\n {[1, 2, 3, 4, 5].map((star) => (\r\n <Star\r\n key={star}\r\n className={cn(\r\n 'h-5 w-5',\r\n product.reviews && product.reviews.length > 0\r\n ? 'text-yellow-400 fill-current'\r\n : 'text-gray-300'\r\n )}\r\n />\r\n ))}\r\n </div>\r\n <span className=\"text-gray-600\">\r\n ({product.reviews ? product.reviews.length : 0} reviews)\r\n </span>\r\n </div>\r\n\r\n <div className=\"mb-6\">\r\n <span className=\"text-3xl font-bold text-gray-900\">\r\n ${product.price.toFixed(2)}\r\n </span>\r\n {product.oldPrice && (\r\n <span className=\"text-lg text-gray-500 line-through ml-2\">\r\n ${product.oldPrice.toFixed(2)}\r\n </span>\r\n )}\r\n {product.discount && (\r\n <Badge variant=\"danger\" className=\"ml-2\">\r\n {product.discount}\r\n </Badge>\r\n )}\r\n </div>\r\n\r\n <p className=\"text-gray-600 mb-6 leading-relaxed\">\r\n {product.description}\r\n </p>\r\n\r\n {showColorOptions && product.colors && product.colors.length > 0 && (\r\n <div className=\"space-y-4 mb-8\">\r\n <div>\r\n <label className=\"block text-sm font-medium text-gray-700 mb-2\">\r\n Color\r\n </label>\r\n <div className=\"flex flex-wrap gap-2\">\r\n {product.colors.map((color) => (\r\n <button\r\n key={color}\r\n className={cn(\r\n 'px-4 py-2 border border-gray-300 rounded-lg hover:border-primary-500 focus:border-primary-500',\r\n selectedColor === color && 'border-primary-500'\r\n )}\r\n onClick={() => setSelectedColor(color)}\r\n type=\"button\"\r\n >\r\n {color}\r\n </button>\r\n ))}\r\n </div>\r\n </div>\r\n </div>\r\n )}\r\n\r\n <div className=\"flex flex-col sm:flex-row gap-2 sm:gap-4 mb-6\">\r\n <Button\r\n variant=\"primary\"\r\n size=\"lg\"\r\n className=\"flex-1\"\r\n onClick={() => onAddToCart && onAddToCart(product.id)}\r\n disabled={!product.inStock}\r\n >\r\n <ShoppingCart className=\"mr-2 h-5 w-5\" />\r\n Add to Cart\r\n </Button>\r\n <Button\r\n variant=\"outline\"\r\n size=\"lg\"\r\n onClick={() => onWishlist && onWishlist(product.id)}\r\n >\r\n <Heart className=\"h-5 w-5\" />\r\n </Button>\r\n <Button\r\n variant=\"outline\"\r\n size=\"lg\"\r\n onClick={() => onShare && onShare(product.id)}\r\n >\r\n <Share2 className=\"h-5 w-5\" />\r\n </Button>\r\n </div>\r\n\r\n <div className=\"border-t pt-6\">\r\n <h3 className=\"font-semibold text-gray-900 mb-3\">Key Features</h3>\r\n <ul className=\"space-y-2 text-gray-600\">\r\n {product.features.map((feature, idx) => (\r\n <li key={idx} className=\"flex items-center\">\r\n <CheckCircle className=\"h-4 w-4 text-green-500 mr-2\" />\r\n {feature}\r\n </li>\r\n ))}\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n {/* Tabs for Details/Reviews */}\r\n <div className=\"mt-8 sm:mt-12\">\r\n {(() => {\r\n const [tabValue, setTabValue] = useState('details');\r\n return (\r\n <Tabs value={tabValue} onValueChange={setTabValue}>\r\n <TabsList>\r\n <TabsTrigger value=\"details\">Details</TabsTrigger>\r\n {showReviews && <TabsTrigger value=\"reviews\">Reviews</TabsTrigger>}\r\n </TabsList>\r\n <TabsContent value=\"details\">\r\n <div>\r\n <h4 className=\"font-semibold text-gray-900 mb-2\">\r\n Product Details\r\n </h4>\r\n <p className=\"text-gray-600\">{product.description}</p>\r\n </div>\r\n </TabsContent>\r\n {showReviews && (\r\n <TabsContent value=\"reviews\">\r\n <div>\r\n <h4 className=\"font-semibold text-gray-900 mb-4\">\r\n Customer Reviews\r\n </h4>\r\n {product.reviews && product.reviews.length > 0 ? (\r\n <div className=\"space-y-6\">\r\n {product.reviews.map((review, idx) => (\r\n <Card key={idx} className=\"p-4\">\r\n <div className=\"flex flex-col sm:flex-row sm:items-center sm:space-x-3 mb-2 gap-2\">\r\n <Avatar size=\"sm\">\r\n {review.avatar ? (\r\n <AvatarImage src={review.avatar} />\r\n ) : (\r\n <AvatarFallback>\r\n {review.user[0]}\r\n </AvatarFallback>\r\n )}\r\n </Avatar>\r\n <span className=\"font-medium text-gray-900\">\r\n {review.user}\r\n </span>\r\n <span className=\"text-xs text-gray-500\">\r\n {review.date}\r\n </span>\r\n </div>\r\n <div className=\"flex items-center mb-2\">\r\n {[1, 2, 3, 4, 5].map((star) => (\r\n <Star\r\n key={star}\r\n className={cn(\r\n 'h-4 w-4',\r\n review.rating >= star\r\n ? 'text-yellow-400 fill-current'\r\n : 'text-gray-300'\r\n )}\r\n />\r\n ))}\r\n </div>\r\n <p className=\"text-gray-700\">{review.comment}</p>\r\n </Card>\r\n ))}\r\n </div>\r\n ) : (\r\n <p className=\"text-gray-500\">No reviews yet.</p>\r\n )}\r\n </div>\r\n </TabsContent>\r\n )}\r\n </Tabs>\r\n );\r\n })()}\r\n </div>\r\n </PageLayoutContent>\r\n </PageLayout>\r\n );\r\n};"],"names":["_jsxs","_jsx"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@beyondcorp/beyond-ui",
3
- "version": "1.1.55",
3
+ "version": "1.1.59",
4
4
  "description": "A comprehensive React UI component library built with TypeScript, TailwindCSS, and CVA",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",