@beyondcorp/beyond-ui 1.2.6 → 1.2.10

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.
@@ -5,7 +5,7 @@ import { Button } from '../Button/Button.js';
5
5
  import { ShoppingCart, Heart, Share2 } from 'lucide-react';
6
6
  import { cn } from '../../utils/cn.js';
7
7
 
8
- const ProductCard = ({ product, onClick, onAddToCart, onWishlist, onShare, className, }) => (jsxs(Card, { className: cn('flex flex-col h-full w-full overflow-hidden transition-all shadow-md rounded-lg', className), variant: "elevated", padding: "lg", 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" }) })] })] }));
8
+ const ProductCard = ({ product, onClick, onAddToCart, onWishlist, onShare, className, }) => (jsxs(Card, { className: cn('flex flex-col h-full w-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" }) })] })] }));
9
9
 
10
10
  export { ProductCard };
11
11
  //# sourceMappingURL=ProductCard.js.map
@@ -1 +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 w-full overflow-hidden transition-all shadow-md rounded-lg',\r\n className\r\n )}\r\n variant=\"elevated\"\r\n padding=\"lg\"\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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"}
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 w-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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"}
@@ -8,7 +8,7 @@ import { type VariantProps } from "class-variance-authority";
8
8
  * - Theme-agnostic and reusable.
9
9
  */
10
10
  declare const gridVariants: (props?: ({
11
- columns?: 1 | 2 | 3 | 12 | 4 | 6 | null | undefined;
11
+ columns?: 1 | "auto" | 2 | 3 | 12 | 4 | 6 | null | undefined;
12
12
  } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
13
13
  declare const gridItemVariants: (props?: ({
14
14
  colSpan?: 1 | 2 | 3 | 12 | 4 | 6 | null | undefined;
@@ -19,6 +19,7 @@ const gridVariants = cva("grid gap-6", {
19
19
  4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
20
20
  6: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6",
21
21
  12: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-12",
22
+ auto: "", // Will be handled by inline style
22
23
  },
23
24
  },
24
25
  defaultVariants: {
@@ -59,11 +60,16 @@ const DashboardGrid = React.forwardRef(({ className, columns, itemMinWidth, item
59
60
  const itemClass = [
60
61
  itemMinWidth && itemMinWidth.includes('[') ? `min-w-[${itemMinWidth.replace(/[^0-9a-zA-Z]/g, '')}]` : '',
61
62
  itemMaxWidth && itemMaxWidth.includes('[') ? `max-w-[${itemMaxWidth.replace(/[^0-9a-zA-Z]/g, '')}]` : '',
62
- "w-full"
63
+ // Remove w-full to prevent overflow/overlap
63
64
  ].filter(Boolean).join(' ');
64
65
  // Wrap each child with sizing constraints
65
66
  const wrappedChildren = React.Children.map(children, child => jsx("div", { className: itemClass, style: itemStyle, children: child }));
66
- return (jsx("div", { ref: ref, className: cn(gridVariants({ columns }), className), ...props, children: wrappedChildren }));
67
+ // Use auto-fit/minmax for grid-template-columns on large screens
68
+ const gridStyle = {};
69
+ if (columns === "auto" || columns === undefined) {
70
+ gridStyle.gridTemplateColumns = `repeat(auto-fit, minmax(${itemMinWidth || "220px"}, 1fr))`;
71
+ }
72
+ return (jsx("div", { ref: ref, className: cn(gridVariants({ columns: columns === "auto" ? "auto" : columns }), className), style: columns === "auto" || columns === undefined ? gridStyle : undefined, ...props, children: wrappedChildren }));
67
73
  });
68
74
  const DashboardGridItem = React.forwardRef(({ className, colSpan, rowSpan, ...props }, ref) => {
69
75
  return (jsx("div", { ref: ref, className: cn(gridItemVariants({ colSpan, rowSpan }), className), ...props }));
@@ -1 +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\",\n {\n variants: {\n columns: {\n 1: \"grid-cols-1\",\n 2: \"grid-cols-1 md:grid-cols-2\",\n 3: \"grid-cols-1 md:grid-cols-2 lg:grid-cols-3\",\n 4: \"grid-cols-1 md:grid-cols-2 lg:grid-cols-4\",\n 6: \"grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6\",\n 12: \"grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-12\",\n },\n },\n defaultVariants: {\n columns: 12,\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 VariantProps<typeof gridVariants> {\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\ninterface DashboardGridItemProps\n extends React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof gridItemVariants> {}\n\nconst DashboardGrid = React.forwardRef<HTMLDivElement, DashboardGridProps>(\n ({ className, columns, itemMinWidth, itemMaxWidth, 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 \"w-full\"\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 return (\n <div\n ref={ref}\n className={cn(gridVariants({ columns }), className)}\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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"}
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\",\n {\n variants: {\n columns: {\n 1: \"grid-cols-1\",\n 2: \"grid-cols-1 md:grid-cols-2\",\n 3: \"grid-cols-1 md:grid-cols-2 lg:grid-cols-3\",\n 4: \"grid-cols-1 md:grid-cols-2 lg:grid-cols-4\",\n 6: \"grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6\",\n 12: \"grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-12\",\n auto: \"\", // Will be handled by inline style\n },\n },\n defaultVariants: {\n columns: 12,\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 VariantProps<typeof gridVariants> {\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\ninterface DashboardGridItemProps\n extends React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof gridItemVariants> {}\n\nconst DashboardGrid = React.forwardRef<HTMLDivElement, DashboardGridProps>(\n ({ className, columns, itemMinWidth, itemMaxWidth, 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 // Remove w-full to prevent overflow/overlap\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 // Use auto-fit/minmax for grid-template-columns on large screens\n const gridStyle: React.CSSProperties = {};\n if (columns === \"auto\" || columns === undefined) {\n gridStyle.gridTemplateColumns = `repeat(auto-fit, minmax(${itemMinWidth || \"220px\"}, 1fr))`;\n }\n\n return (\n <div\n ref={ref}\n className={cn(gridVariants({ columns: columns === \"auto\" ? \"auto\" : columns }), className)}\n style={columns === \"auto\" || columns === undefined ? gridStyle : undefined}\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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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@beyondcorp/beyond-ui",
3
- "version": "1.2.06",
3
+ "version": "1.2.10",
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",