@beyondcorp/beyond-ui 1.2.8 → 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.
|
@@ -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
|
-
|
|
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
|
-
|
|
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
|
|
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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"}
|