@beyondcorp/beyond-ui 1.2.16 → 1.2.20

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.
@@ -61,7 +61,7 @@ const AllProductsView = ({ products, onProductClick, onAddToCart, onWishlist, on
61
61
  { value: 'featured', label: 'Featured' },
62
62
  { value: 'price-asc', label: 'Price: Low to High' },
63
63
  { value: 'price-desc', label: 'Price: High to Low' },
64
- ], className: "w-full sm:w-40" }))] }) }) }) }), jsx(PageLayoutContent, { layout: "centered", spacing: "lg", children: jsx(DashboardGrid, { 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)))) }) })] }));
64
+ ], 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)))) }) })] }));
65
65
  };
66
66
 
67
67
  export { AllProductsView };
@@ -1 +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 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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"}
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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"}
@@ -14,7 +14,7 @@ declare const gridItemVariants: (props?: ({
14
14
  colSpan?: 1 | 2 | 3 | 4 | 6 | 12 | null | undefined;
15
15
  rowSpan?: 1 | 2 | 3 | 4 | null | undefined;
16
16
  } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
17
- interface DashboardGridProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {
17
+ interface DashboardGridProps extends React.HTMLAttributes<HTMLDivElement> {
18
18
  /**
19
19
  * Optional min width for grid items (e.g., "220px" or Tailwind class "min-w-[220px]")
20
20
  */
@@ -23,6 +23,10 @@ interface DashboardGridProps extends React.HTMLAttributes<HTMLDivElement>, Varia
23
23
  * Optional max width for grid items (e.g., "320px" or Tailwind class "max-w-[320px]")
24
24
  */
25
25
  itemMaxWidth?: string;
26
+ /**
27
+ * Number of columns (fixed) or "auto" for responsive grid
28
+ */
29
+ columns?: number | "auto";
26
30
  }
27
31
  interface DashboardGridItemProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridItemVariants> {
28
32
  }
@@ -43,7 +43,7 @@ const gridItemVariants = cva("min-h-0", // Prevents grid items from growing unne
43
43
  rowSpan: 1,
44
44
  },
45
45
  });
46
- const DashboardGrid = React.forwardRef(({ className, itemMinWidth, itemMaxWidth, children, ...props }, ref) => {
46
+ const DashboardGrid = React.forwardRef(({ className, itemMinWidth, itemMaxWidth, columns = "auto", children, ...props }, ref) => {
47
47
  // Compose style/class for grid items
48
48
  const itemStyle = {};
49
49
  if (itemMinWidth)
@@ -57,11 +57,16 @@ const DashboardGrid = React.forwardRef(({ className, itemMinWidth, itemMaxWidth,
57
57
  ].filter(Boolean).join(' ');
58
58
  // Wrap each child with sizing constraints
59
59
  const wrappedChildren = React.Children.map(children, child => jsx("div", { className: itemClass, style: itemStyle, children: child }));
60
- // Always use auto-fit/minmax for grid-template-columns
61
- const gridStyle = {
62
- gridTemplateColumns: `repeat(auto-fit, minmax(${itemMinWidth || "220px"}, 1fr))`
63
- };
64
- return (jsx("div", { ref: ref, className: cn(gridVariants({ columns: "auto" }), className), style: gridStyle, ...props, children: wrappedChildren }));
60
+ // If columns is a number, use grid-cols-* Tailwind class
61
+ let gridClass = "grid gap-6 w-full";
62
+ let gridStyle = {};
63
+ if (typeof columns === "number") {
64
+ gridClass += ` grid-cols-${columns}`;
65
+ }
66
+ else {
67
+ gridStyle.gridTemplateColumns = `repeat(auto-fit, minmax(${itemMinWidth || "220px"}, 1fr))`;
68
+ }
69
+ return (jsx("div", { ref: ref, className: cn(gridClass, className), style: gridStyle, ...props, children: wrappedChildren }));
65
70
  });
66
71
  const DashboardGridItem = React.forwardRef(({ className, colSpan, rowSpan, ...props }, ref) => {
67
72
  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 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 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, 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 ].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 // Always use auto-fit/minmax for grid-template-columns\n const gridStyle: React.CSSProperties = {\n gridTemplateColumns: `repeat(auto-fit, minmax(${itemMinWidth || \"220px\"}, 1fr))`\n };\n\n return (\n <div\n ref={ref}\n className={cn(gridVariants({ columns: \"auto\" }), 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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"}
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 if (typeof columns === \"number\") {\n gridClass += ` grid-cols-${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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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@beyondcorp/beyond-ui",
3
- "version": "1.2.16",
3
+ "version": "1.2.20",
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",