@rudra-studio/rudra-layout 1.0.13 → 1.0.15

package/components/Box/index.d.ts

@@ -0,0 +1,64 @@
+import { default as React } from 'react';
+export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    /**
+     * The Custom Attributes Dictionary
+     * We use additionalProperties to tell the schema it's a dynamic key-value object
+     * @type|complex
+     * @schema {"type":"object"}
+     */
+    customAttributes?: Record<string, string>;
+    /** * @type|class
+     * @schema [{
+     * "key": "Direction",
+     * "prefix": "flex",
+     * "type": "select",
+     * "options": [
+     * {"key": "row", "label": "Row"},
+     * {"key": "col", "label": "Column"}
+     * ]
+     * },{
+     * "key": "Wrap Content",
+     * "prefix": "flex",
+     * "type": "select",
+     * "options": [
+     * {"key": "wrap", "label": "Wrap"},
+     * {"key": "nowrap", "label": "No Wrap"}
+     * ]
+     * },{
+     * "key": "Justify (Main Axis)",
+     * "prefix": "justify",
+     * "type": "select",
+     * "options": [
+     * {"key": "start", "label": "Start"},
+     * {"key": "center", "label": "Center"},
+     * {"key": "end", "label": "End"},
+     * {"key": "between", "label": "Space Between"}
+     * ]
+     * },{
+     * "key": "Align (Cross Axis)",
+     * "prefix": "items",
+     * "type": "select",
+     * "options": [
+     * {"key": "start", "label": "Start"},
+     * {"key": "center", "label": "Center"},
+     * {"key": "end", "label": "End"},
+     * {"key": "stretch", "label": "Stretch"}
+     * ]
+     * },{
+     * "key": "Gap",
+     * "prefix": "gap",
+     * "type": "select",
+     * "options": [
+     * {"key": "0", "label": "None (0px)"},
+     * {"key": "2", "label": "Small (8px)"},
+     * {"key": "4", "label": "Medium (16px)"},
+     * {"key": "6", "label": "Large (24px)"},
+     * {"key": "8", "label": "Extra Large (32px)"}
+     * ]
+     * }]
+     */
+    className?: string;
+}
+export declare const Box: React.FC<BoxProps>;
+export default Box;

package/components/Box/index.js

@@ -0,0 +1,11 @@
+import "react";
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/Box/index.tsx
+var t = ({ children: t, customAttributes: n = {}, className: r = "", ...i }) => /* @__PURE__ */ e("div", {
+	className: `flex ${r}`.trim(),
+	...n,
+	...i,
+	children: t
+});
+//#endregion
+export { t as default };

package/components/Carousel/index.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+export interface RudraCarouselProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /** * @select|inline-arrows|bottom-controls */
+    variant?: 'inline-arrows' | 'bottom-controls';
+    /** * @select|one|multiple|fractional */
+    itemsPerView?: 'one' | 'multiple' | 'fractional';
+    /** * @select|none|sm|md|lg */
+    gap?: 'none' | 'sm' | 'md' | 'lg';
+    /** * @class|[{
+     * "key": "Outer Margin",
+     * "prefix": "m",
+     * "type": "select",
+     * "options": [
+     * {"key": "0", "label": "None"},
+     * {"key": "4", "label": "Medium"},
+     * {"key": "8", "label": "Large"}
+     * ]
+     * }]
+     */
+    className?: string;
+}
+declare const RudraCarousel: React.FC<RudraCarouselProps>;
+export default RudraCarousel;

package/components/Carousel/index.js

@@ -0,0 +1,93 @@
+import e, { useEffect as t, useRef as n, useState as r } from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { ChevronLeft as s, ChevronRight as c } from "lucide-react";
+//#region src/components/Carousel/index.tsx
+var l = ({ children: l, variant: u = "inline-arrows", itemsPerView: d = "one", gap: f = "md", className: p = "", ...m }) => {
+	let h = n(null), [g, _] = r(!0), [v, y] = r(!1), [b, x] = r(0), S = e.Children.toArray(l), C = S.length, w = {
+		one: "w-full",
+		multiple: "w-full sm:w-[calc(50%-1rem)] md:w-[calc(33.333%-1rem)] lg:w-[calc(25%-1rem)]",
+		fractional: "w-[85%] sm:w-[38%] md:w-[28%] lg:w-[21%]"
+	}, T = {
+		none: "gap-0",
+		sm: "gap-2",
+		md: "gap-4",
+		lg: "gap-8"
+	}, E = () => {
+		if (!h.current) return;
+		let { scrollLeft: e, scrollWidth: t, clientWidth: n } = h.current;
+		_(e <= 10), y(Math.ceil(e + n) >= t - 10);
+		let r = t - n;
+		x(r > 0 ? Math.round(e / r * (C - 1)) : 0);
+	};
+	t(() => {
+		E();
+	}, [l, d]);
+	let D = (e) => {
+		if (!h.current) return;
+		let t = h.current.clientWidth * .8;
+		h.current.scrollBy({
+			left: e === "left" ? -t : t,
+			behavior: "smooth"
+		});
+	}, O = (e) => {
+		if (!h.current) return;
+		let { scrollWidth: t, clientWidth: n } = h.current, r = t - n;
+		h.current.scrollTo({
+			left: r * (e / (C - 1 || 1)),
+			behavior: "smooth"
+		});
+	};
+	return C === 0 ? null : /* @__PURE__ */ o("div", {
+		className: `relative w-full flex flex-col group ${p}`.trim(),
+		...m,
+		children: [
+			/* @__PURE__ */ a("div", {
+				ref: h,
+				onScroll: E,
+				className: `flex ${T[f]} overflow-x-auto snap-x snap-mandatory [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] relative z-10 py-4`,
+				children: S.map((e, t) => /* @__PURE__ */ a("div", {
+					className: `shrink-0 snap-center sm:snap-start transition-transform ${w[d] || w.one}`,
+					children: e
+				}, t))
+			}),
+			u === "inline-arrows" && /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("button", {
+				onClick: () => D("left"),
+				disabled: g,
+				className: "absolute left-0 sm:-left-4 top-1/2 -translate-y-1/2 z-20 w-10 h-10 bg-white border border-slate-200 shadow-lg rounded-full flex items-center justify-center text-slate-600 transition-all duration-300 hover:bg-slate-50 hover:scale-110 disabled:opacity-0 disabled:pointer-events-none",
+				children: /* @__PURE__ */ a(s, { size: 20 })
+			}), /* @__PURE__ */ a("button", {
+				onClick: () => D("right"),
+				disabled: v,
+				className: "absolute right-0 sm:-right-4 top-1/2 -translate-y-1/2 z-20 w-10 h-10 bg-white border border-slate-200 shadow-lg rounded-full flex items-center justify-center text-slate-600 transition-all duration-300 hover:bg-slate-50 hover:scale-110 disabled:opacity-0 disabled:pointer-events-none",
+				children: /* @__PURE__ */ a(c, { size: 20 })
+			})] }),
+			u === "bottom-controls" && /* @__PURE__ */ o("div", {
+				className: "flex items-center justify-between w-full mt-4 px-2",
+				children: [
+					/* @__PURE__ */ a("button", {
+						onClick: () => D("left"),
+						disabled: g,
+						className: "w-8 h-8 flex items-center justify-center text-slate-400 hover:text-blue-600 hover:bg-blue-50 rounded-full transition-colors disabled:opacity-30 disabled:pointer-events-none",
+						children: /* @__PURE__ */ a(s, { size: 20 })
+					}),
+					/* @__PURE__ */ a("div", {
+						className: "flex items-center gap-2",
+						children: Array.from({ length: C }).map((e, t) => /* @__PURE__ */ a("button", {
+							onClick: () => O(t),
+							className: `transition-all duration-300 rounded-full ${b === t ? "w-6 h-1.5 bg-blue-600" : "w-1.5 h-1.5 bg-slate-300 hover:bg-slate-400"}`,
+							"aria-label": `Go to slide ${t + 1}`
+						}, t))
+					}),
+					/* @__PURE__ */ a("button", {
+						onClick: () => D("right"),
+						disabled: v,
+						className: "w-8 h-8 flex items-center justify-center text-slate-400 hover:text-blue-600 hover:bg-blue-50 rounded-full transition-colors disabled:opacity-30 disabled:pointer-events-none",
+						children: /* @__PURE__ */ a(c, { size: 20 })
+					})
+				]
+			})
+		]
+	});
+};
+//#endregion
+export { l as default };

package/components/DataCarousel/index.d.ts

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+export interface RepeaterCarouselProps extends React.HTMLAttributes<HTMLDivElement> {
+    items?: any[];
+    children?: React.ReactNode | ((context: {
+        item: any;
+        index: number;
+    }) => React.ReactNode);
+    /** * @select|inline-arrows|bottom-controls
+     */
+    variant?: 'inline-arrows' | 'bottom-controls';
+    /** * @select|one|multiple|fractional
+     */
+    itemsPerView?: 'one' | 'multiple' | 'fractional';
+    /** * @type|class
+     * @schema [{
+     * "key": "Outer Margin",
+     * "prefix": "m",
+     * "type": "select",
+     * "options": [
+     * {"key": "0", "label": "None"},
+     * {"key": "4", "label": "Medium"}
+     * ]
+     * },{
+     * "key": "Gap",
+     * "prefix": "gap",
+     * "type": "select",
+     * "options": [
+     * {"key": "0", "label": "None (0px)"},
+     * {"key": "2", "label": "Small (8px)"},
+     * {"key": "4", "label": "Medium (16px)"},
+     * {"key": "8", "label": "Large (32px)"}
+     * ]
+     * }]
+     */
+    className?: string;
+}
+declare const RepeaterCarousel: React.FC<RepeaterCarouselProps>;
+export default RepeaterCarousel;

package/components/DataCarousel/index.js

@@ -0,0 +1,95 @@
+import { useEffect as e, useRef as t, useState as n } from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { ChevronLeft as o, ChevronRight as s } from "lucide-react";
+//#region src/components/DataCarousel/index.tsx
+var c = ({ items: c = [], children: l, variant: u = "inline-arrows", itemsPerView: d = "one", gap: f = "md", className: p = "" }) => {
+	let m = t(null), [h, g] = n(!0), [_, v] = n(!1), [y, b] = n(0), x = c?.length || 0, S = {
+		one: "w-full",
+		multiple: "w-full sm:w-[calc(50%-1rem)] md:w-[calc(33.333%-1rem)] lg:w-[calc(25%-1rem)]",
+		fractional: "w-[85%] sm:w-[38%] md:w-[28%] lg:w-[21%]"
+	}, C = {
+		none: "gap-0",
+		sm: "gap-2",
+		md: "gap-4",
+		lg: "gap-8"
+	}, w = () => {
+		if (!m.current) return;
+		let { scrollLeft: e, scrollWidth: t, clientWidth: n } = m.current;
+		g(e <= 10), v(Math.ceil(e + n) >= t - 10);
+		let r = t - n;
+		b(r > 0 ? Math.round(e / r * (x - 1)) : 0);
+	};
+	e(() => {
+		w();
+	}, [c, d]);
+	let T = (e) => {
+		if (!m.current) return;
+		let t = m.current.clientWidth * .8;
+		m.current.scrollBy({
+			left: e === "left" ? -t : t,
+			behavior: "smooth"
+		});
+	}, E = (e) => {
+		if (!m.current) return;
+		let { scrollWidth: t, clientWidth: n } = m.current, r = t - n;
+		m.current.scrollTo({
+			left: r * (e / (x - 1 || 1)),
+			behavior: "smooth"
+		});
+	};
+	return x === 0 ? null : /* @__PURE__ */ a("div", {
+		className: `relative w-full flex flex-col group ${p}`.trim(),
+		children: [
+			/* @__PURE__ */ i("div", {
+				ref: m,
+				onScroll: w,
+				className: `flex ${C[f]} overflow-x-auto snap-x snap-mandatory [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] relative z-10 py-4`,
+				children: c.map((e, t) => /* @__PURE__ */ i("div", {
+					className: `shrink-0 snap-center sm:snap-start transition-transform ${S[d]}`,
+					children: typeof l == "function" ? l({
+						item: e,
+						index: t
+					}) : l
+				}, t))
+			}),
+			u === "inline-arrows" && /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("button", {
+				onClick: () => T("left"),
+				disabled: h,
+				className: "absolute left-0 sm:-left-4 top-1/2 -translate-y-1/2 z-20 w-10 h-10 bg-white border border-slate-200 shadow-lg rounded-full flex items-center justify-center text-slate-600 transition-all duration-300 hover:bg-slate-50 hover:scale-110 disabled:opacity-0 disabled:pointer-events-none",
+				children: /* @__PURE__ */ i(o, { size: 20 })
+			}), /* @__PURE__ */ i("button", {
+				onClick: () => T("right"),
+				disabled: _,
+				className: "absolute right-0 sm:-right-4 top-1/2 -translate-y-1/2 z-20 w-10 h-10 bg-white border border-slate-200 shadow-lg rounded-full flex items-center justify-center text-slate-600 transition-all duration-300 hover:bg-slate-50 hover:scale-110 disabled:opacity-0 disabled:pointer-events-none",
+				children: /* @__PURE__ */ i(s, { size: 20 })
+			})] }),
+			u === "bottom-controls" && /* @__PURE__ */ a("div", {
+				className: "flex items-center justify-between w-full mt-4 px-2",
+				children: [
+					/* @__PURE__ */ i("button", {
+						onClick: () => T("left"),
+						disabled: h,
+						className: "w-8 h-8 flex items-center justify-center text-slate-400 hover:text-blue-600 hover:bg-blue-50 rounded-full transition-colors disabled:opacity-30 disabled:pointer-events-none",
+						children: /* @__PURE__ */ i(o, { size: 20 })
+					}),
+					/* @__PURE__ */ i("div", {
+						className: "flex items-center gap-2",
+						children: Array.from({ length: x }).map((e, t) => /* @__PURE__ */ i("button", {
+							onClick: () => E(t),
+							className: `transition-all duration-300 rounded-full ${y === t ? "w-6 h-1.5 bg-blue-600" : "w-1.5 h-1.5 bg-slate-300 hover:bg-slate-400"}`,
+							"aria-label": `Go to slide ${t + 1}`
+						}, t))
+					}),
+					/* @__PURE__ */ i("button", {
+						onClick: () => T("right"),
+						disabled: _,
+						className: "w-8 h-8 flex items-center justify-center text-slate-400 hover:text-blue-600 hover:bg-blue-50 rounded-full transition-colors disabled:opacity-30 disabled:pointer-events-none",
+						children: /* @__PURE__ */ i(s, { size: 20 })
+					})
+				]
+			})
+		]
+	});
+};
+//#endregion
+export { c as default };

package/components/Grid/index.d.ts

@@ -1,7 +1,31 @@
 import { default as React } from 'react';
 export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
-    columns?: '1' | '2' | '3' | '4' | 'auto-fit';
-    gap?: 'sm' | 'md' | 'lg' | 'xl';
     children?: React.ReactNode;
+    /** @type|class
+     * @schema [{
+     * "key": "Columns",
+     * "prefix": "grid-cols",
+     * "type": "select",
+     * "options": [
+     * {"key": "1", "label": "1 Column"},
+     * {"key": "2", "label": "2 Columns"},
+     * {"key": "3", "label": "3 Columns"},
+     * {"key": "4", "label": "4 Columns"},
+     * {"key": "[repeat(auto-fit,minmax(250px,1fr))]", "label": "Auto-Fit (Cards)"}
+     * ]
+     * },{
+     * "key": "Gap",
+     * "prefix": "gap",
+     * "type": "select",
+     * "options": [
+     * {"key": "0", "label": "None (0px)"},
+     * {"key": "4", "label": "Small (16px)"},
+     * {"key": "6", "label": "Medium (24px)"},
+     * {"key": "8", "label": "Large (32px)"},
+     * {"key": "12", "label": "Extra Large (48px)"}
+     * ]
+     * }]
+     */
+    className?: string;
 }
-export default function Grid({ columns, gap, className, children, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;
+export default function Grid({ className, children, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;

package/components/Grid/index.js

@@ -1,22 +1,11 @@
 import "react";
 import { jsx as e } from "react/jsx-runtime";
 //#region src/components/Grid/index.tsx
-function t({ columns: t = "3", gap: n = "md", className: r = "", children: i, ...a }) {
+function t({ className: t = "", children: n, ...r }) {
 	return /* @__PURE__ */ e("div", {
-		className: `grid w-full ${{
-			1: "grid-cols-1",
-			2: "grid-cols-1 md:grid-cols-2",
-			3: "grid-cols-1 md:grid-cols-3",
-			4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
-			"auto-fit": "grid-cols-[repeat(auto-fit,minmax(250px,1fr))]"
-		}[t]} ${{
-			sm: "gap-4",
-			md: "gap-6",
-			lg: "gap-8",
-			xl: "gap-12"
-		}[n]} ${r}`,
-		...a,
-		children: i
+		className: `grid w-full ${t}`.trim(),
+		...r,
+		children: n
 	});
 }
 //#endregion

package/components/Repeater/index.d.ts

@@ -1,12 +1,45 @@
 import { default as React } from 'react';
 export interface RepeaterProps extends React.HTMLAttributes<HTMLDivElement> {
     items?: any[];
-    layout?: 'grid' | 'stack';
-    columns?: number;
-    gap?: 'sm' | 'md' | 'lg';
     children?: React.ReactNode | ((context: {
         item: any;
         index: number;
     }) => React.ReactNode);
+    /** * @type|class
+     * @schema [{
+     * "key": "Layout",
+     * "prefix": "",
+     * "type": "select",
+     * "options": [
+     * {"key": "grid", "label": "Grid"},
+     * {"key": "flex flex-col", "label": "Stack (Vertical)"}
+     * ]
+     * },{
+     * "key": "Columns (Grid Only)",
+     * "prefix": "grid-cols",
+     * "type": "select",
+     * "options": [
+     * {"key": "1", "label": "1 Column"},
+     * {"key": "2", "label": "2 Columns"},
+     * {"key": "3", "label": "3 Columns"},
+     * {"key": "4", "label": "4 Columns"},
+     * {"key": "5", "label": "5 Columns"},
+     * {"key": "6", "label": "6 Columns"},
+     * {"key": "[repeat(auto-fit,minmax(250px,1fr))]", "label": "Auto-Fit Cards"}
+     * ]
+     * },{
+     * "key": "Gap",
+     * "prefix": "gap",
+     * "type": "select",
+     * "options": [
+     * {"key": "0", "label": "None (0px)"},
+     * {"key": "4", "label": "Small (16px)"},
+     * {"key": "6", "label": "Medium (24px)"},
+     * {"key": "8", "label": "Large (32px)"},
+     * {"key": "12", "label": "Extra Large (48px)"}
+     * ]
+     * }]
+     */
+    className?: string;
 }
-export default function Repeater({ items, layout, columns, gap, className, children, ...props }: RepeaterProps): import("react/jsx-runtime").JSX.Element;
+export default function Repeater({ items, className, children, ...props }: RepeaterProps): import("react/jsx-runtime").JSX.Element;

package/components/Repeater/index.js

@@ -1,36 +1,27 @@
 import e from "react";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/components/Repeater/index.tsx
-function r({ items: r = [], layout: i = "grid", columns: a = "4", gap: o = "md", className: s = "", children: c, ...l }) {
-	let u = Array.isArray(r) ? r : [], d = {
-		sm: "gap-4",
-		md: "gap-6",
-		lg: "gap-8"
-	}, f = i === "grid" ? `grid ${{
-		1: "grid-cols-1",
-		2: "grid-cols-1 sm:grid-cols-2",
-		3: "grid-cols-1 md:grid-cols-3",
-		4: "grid-cols-1 md:grid-cols-2 xl:grid-cols-4"
-	}[a]} ${d[o]}` : `flex flex-col w-full ${d[o]}`;
-	return u.length === 0 ? /* @__PURE__ */ n("div", {
-		className: `w-full p-8 border-2 border-dashed border-purple-200 bg-purple-50 rounded-lg flex flex-col items-center justify-center text-purple-600 ${s}`,
+function r({ items: r = [], className: i = "", children: a, ...o }) {
+	let s = Array.isArray(r) ? r : [];
+	return s.length === 0 ? /* @__PURE__ */ n("div", {
+		className: "w-full p-8 border-2 border-dashed border-purple-200 bg-purple-50 rounded-lg flex flex-col items-center justify-center text-purple-600",
 		children: [/* @__PURE__ */ t("span", {
 			className: "text-sm font-medium mb-2 opacity-70",
 			children: "Repeater (No Data Bound)"
 		}), /* @__PURE__ */ t("div", {
-			className: "mt-4 w-full p-4 border border-dashed border-purple-300 rounded bg-white",
-			children: typeof c == "function" ? c({
+			className: `mt-4 w-full p-4 border border-dashed border-purple-300 rounded bg-white ${i}`,
+			children: typeof a == "function" ? a({
 				item: null,
 				index: 0
-			}) : c
+			}) : a
 		})]
 	}) : /* @__PURE__ */ t("div", {
-		className: `${f} ${s}`,
-		...l,
-		children: u.map((n, r) => /* @__PURE__ */ t(e.Fragment, { children: typeof c == "function" ? c({
+		className: `w-full ${i}`.trim(),
+		...o,
+		children: s.map((n, r) => /* @__PURE__ */ t(e.Fragment, { children: typeof a == "function" ? a({
 			item: n,
 			index: r
-		}) : c }, n?.id || r))
+		}) : a }, n?.id || r))
 	});
 }
 //#endregion

package/components/RepeaterTable/index.js

@@ -1,7 +1,7 @@
 import e, { useEffect as t, useMemo as n, useRef as r, useState as i } from "react";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { flexRender as s, getCoreRowModel as c, getExpandedRowModel as l, getFilteredRowModel as u, getPaginationRowModel as d, useReactTable as f } from "@tanstack/react-table";
-import { ChevronDown as p, ChevronLeft as m, ChevronRight as h, ChevronsLeft as g, ChevronsRight as _, LayoutTemplate as v, Search as y } from "lucide-react";
+import { ChevronDown as s, ChevronLeft as c, ChevronRight as l, ChevronsLeft as u, ChevronsRight as d, LayoutTemplate as f, Search as p } from "lucide-react";
+import { flexRender as m, getCoreRowModel as h, getExpandedRowModel as g, getFilteredRowModel as _, getPaginationRowModel as v, useReactTable as y } from "@tanstack/react-table";
 //#region src/components/RepeaterTable/index.tsx
 function b({ data: b = [], columns: x = [], expandedContent: S, pageSize: C = 5, globalFilterPlaceholder: w = "Search anywhere...", className: T = "" }) {
 	let [E, D] = i([]), [O, k] = i(""), [A, j] = i({}), M = r(x);
@@ -16,7 +16,7 @@ function b({ data: b = [], columns: x = [], expandedContent: S, pageSize: C = 5,
 			children: e.label
 		}),
 		cell: ({ row: n }) => {
-			let r = M.current?.[t]?.template, i = t === 0, s = {
+			let r = M.current?.[t]?.template, i = t === 0, c = {
 				item: n.original,
 				index: n.index,
 				isExpanded: n.getIsExpanded(),
@@ -27,13 +27,13 @@ function b({ data: b = [], columns: x = [], expandedContent: S, pageSize: C = 5,
 				children: [i && S && /* @__PURE__ */ a("button", {
 					onClick: n.getToggleExpandedHandler(),
 					className: "p-1 hover:bg-slate-200 dark:hover:bg-white/10 rounded text-slate-500 transition-colors shrink-0",
-					children: n.getIsExpanded() ? /* @__PURE__ */ a(p, { size: 16 }) : /* @__PURE__ */ a(h, { size: 16 })
+					children: n.getIsExpanded() ? /* @__PURE__ */ a(s, { size: 16 }) : /* @__PURE__ */ a(l, { size: 16 })
 				}), /* @__PURE__ */ a("div", {
 					className: "flex-1 w-full min-w-0",
-					children: typeof r == "function" ? r(s) : r || /* @__PURE__ */ o("div", {
+					children: typeof r == "function" ? r(c) : r || /* @__PURE__ */ o("div", {
 						className: "py-2 px-3 border border-dashed border-slate-300 dark:border-slate-700 rounded text-slate-400 dark:text-slate-500 text-xs italic flex items-center gap-2",
 						children: [
-							/* @__PURE__ */ a(v, { size: 12 }),
+							/* @__PURE__ */ a(f, { size: 12 }),
 							" Drop ",
 							e.label,
 							" Cell"
@@ -42,7 +42,7 @@ function b({ data: b = [], columns: x = [], expandedContent: S, pageSize: C = 5,
 				})]
 			});
 		}
-	})), [x?.length, S]), P = f({
+	})), [x?.length, S]), P = y({
 		data: Array.isArray(b) ? b : [],
 		columns: N,
 		state: {
@@ -54,10 +54,10 @@ function b({ data: b = [], columns: x = [], expandedContent: S, pageSize: C = 5,
 		onSortingChange: D,
 		onExpandedChange: j,
 		onGlobalFilterChange: k,
-		getCoreRowModel: c(),
-		getFilteredRowModel: u(),
-		getPaginationRowModel: d(),
-		getExpandedRowModel: l(),
+		getCoreRowModel: h(),
+		getFilteredRowModel: _(),
+		getPaginationRowModel: v(),
+		getExpandedRowModel: g(),
 		globalFilterFn: (e, t, n) => {
 			let r = String(n).toLowerCase();
 			return Object.values(e.original).some((e) => String(e).toLowerCase().includes(r));
@@ -67,7 +67,7 @@ function b({ data: b = [], columns: x = [], expandedContent: S, pageSize: C = 5,
 		P.setPageSize(C);
 	}, [C, P]), b.length === 0 && (!x || x.length === 0) ? /* @__PURE__ */ o("div", {
 		className: "w-full p-12 border-2 border-dashed border-slate-200 dark:border-slate-800 bg-white dark:bg-[#0A0A0A] rounded-2xl flex flex-col items-center justify-center text-slate-400",
-		children: [/* @__PURE__ */ a(v, {
+		children: [/* @__PURE__ */ a(f, {
 			size: 32,
 			className: "mb-4 opacity-50"
 		}), /* @__PURE__ */ a("p", {
@@ -79,7 +79,7 @@ function b({ data: b = [], columns: x = [], expandedContent: S, pageSize: C = 5,
 		children: [
 			/* @__PURE__ */ o("div", {
 				className: "relative w-full sm:w-96",
-				children: [/* @__PURE__ */ a(y, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400 dark:text-slate-500" }), /* @__PURE__ */ a("input", {
+				children: [/* @__PURE__ */ a(p, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400 dark:text-slate-500" }), /* @__PURE__ */ a("input", {
 					value: O ?? "",
 					onChange: (e) => k(e.target.value),
 					placeholder: w,
@@ -96,7 +96,7 @@ function b({ data: b = [], columns: x = [], expandedContent: S, pageSize: C = 5,
 							className: "bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10 text-slate-500 dark:text-slate-400 tracking-wider",
 							children: P.getHeaderGroups().map((e) => /* @__PURE__ */ a("tr", { children: e.headers.map((e) => /* @__PURE__ */ a("th", {
 								className: "px-6 py-4 whitespace-nowrap",
-								children: s(e.column.columnDef.header, e.getContext())
+								children: m(e.column.columnDef.header, e.getContext())
 							}, e.id)) }, e.id))
 						}), /* @__PURE__ */ a("tbody", {
 							className: "divide-y divide-slate-200 dark:divide-white/5",
@@ -104,7 +104,7 @@ function b({ data: b = [], columns: x = [], expandedContent: S, pageSize: C = 5,
 								className: "hover:bg-slate-50 dark:hover:bg-white/5 transition-colors group",
 								children: t.getVisibleCells().map((e) => /* @__PURE__ */ a("td", {
 									className: "px-6 py-4 text-slate-700 dark:text-slate-300",
-									children: s(e.column.columnDef.cell, e.getContext())
+									children: m(e.column.columnDef.cell, e.getContext())
 								}, e.id))
 							}), t.getIsExpanded() && S && /* @__PURE__ */ a("tr", {
 								className: "bg-slate-50/50 dark:bg-white/[0.02]",
@@ -150,25 +150,25 @@ function b({ data: b = [], columns: x = [], expandedContent: S, pageSize: C = 5,
 							onClick: () => P.setPageIndex(0),
 							disabled: !P.getCanPreviousPage(),
 							className: "p-1.5 rounded-lg text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5 disabled:opacity-30 transition-colors",
-							children: /* @__PURE__ */ a(g, { size: 16 })
+							children: /* @__PURE__ */ a(u, { size: 16 })
 						}),
 						/* @__PURE__ */ a("button", {
 							onClick: () => P.previousPage(),
 							disabled: !P.getCanPreviousPage(),
 							className: "p-1.5 rounded-lg text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5 disabled:opacity-30 transition-colors",
-							children: /* @__PURE__ */ a(m, { size: 16 })
+							children: /* @__PURE__ */ a(c, { size: 16 })
 						}),
 						/* @__PURE__ */ a("button", {
 							onClick: () => P.nextPage(),
 							disabled: !P.getCanNextPage(),
 							className: "p-1.5 rounded-lg text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5 disabled:opacity-30 transition-colors",
-							children: /* @__PURE__ */ a(h, { size: 16 })
+							children: /* @__PURE__ */ a(l, { size: 16 })
 						}),
 						/* @__PURE__ */ a("button", {
 							onClick: () => P.setPageIndex(P.getPageCount() - 1),
 							disabled: !P.getCanNextPage(),
 							className: "p-1.5 rounded-lg text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5 disabled:opacity-30 transition-colors",
-							children: /* @__PURE__ */ a(_, { size: 16 })
+							children: /* @__PURE__ */ a(d, { size: 16 })
 						})
 					]
 				})]

package/components/Stack/index.d.ts

@@ -1,10 +1,57 @@
 import { default as React } from 'react';
 export interface StackProps extends React.HTMLAttributes<HTMLDivElement> {
-    direction?: 'row' | 'col';
-    align?: 'start' | 'center' | 'end' | 'stretch';
-    justify?: 'start' | 'center' | 'end' | 'between' | 'around';
-    gap?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
-    wrap?: boolean;
     children?: React.ReactNode;
+    /** *@type|class
+     * @schema [{
+     * "key": "Direction",
+     * "prefix": "flex",
+     * "type": "select",
+     * "options": [
+     * {"key": "row", "label": "Row"},
+     * {"key": "col", "label": "Column"}
+     * ]
+     * },{
+     * "key": "Align Items (Cross Axis)",
+     * "prefix": "items",
+     * "type": "select",
+     * "options": [
+     * {"key": "start", "label": "Start"},
+     * {"key": "center", "label": "Center"},
+     * {"key": "end", "label": "End"},
+     * {"key": "stretch", "label": "Stretch"}
+     * ]
+     * },{
+     * "key": "Justify Content (Main Axis)",
+     * "prefix": "justify",
+     * "type": "select",
+     * "options": [
+     * {"key": "start", "label": "Start"},
+     * {"key": "center", "label": "Center"},
+     * {"key": "end", "label": "End"},
+     * {"key": "between", "label": "Space Between"},
+     * {"key": "around", "label": "Space Around"}
+     * ]
+     * },{
+     * "key": "Gap",
+     * "prefix": "gap",
+     * "type": "select",
+     * "options": [
+     * {"key": "0", "label": "None (0px)"},
+     * {"key": "2", "label": "Small (8px)"},
+     * {"key": "4", "label": "Medium (16px)"},
+     * {"key": "8", "label": "Large (32px)"},
+     * {"key": "12", "label": "Extra Large (48px)"}
+     * ]
+     * },{
+     * "key": "Wrap Content",
+     * "prefix": "flex",
+     * "type": "select",
+     * "options": [
+     * {"key": "wrap", "label": "Wrap"},
+     * {"key": "nowrap", "label": "No Wrap"}
+     * ]
+     * }]
+     */
+    className?: string;
 }
-export default function Stack({ direction, align, justify, gap, wrap, className, children, ...props }: StackProps): import("react/jsx-runtime").JSX.Element;
+export default function Stack({ className, children, ...props }: StackProps): import("react/jsx-runtime").JSX.Element;

package/components/Stack/index.js

@@ -1,28 +1,11 @@
 import "react";
 import { jsx as e } from "react/jsx-runtime";
 //#region src/components/Stack/index.tsx
-function t({ direction: t = "col", align: n = "stretch", justify: r = "start", gap: i = "md", wrap: a = !1, className: o = "", children: s, ...c }) {
+function t({ className: t = "", children: n, ...r }) {
 	return /* @__PURE__ */ e("div", {
-		className: `flex w-full ${t === "row" ? "flex-row" : "flex-col"} ${a ? "flex-wrap" : "flex-nowrap"} ${{
-			start: "items-start",
-			center: "items-center",
-			end: "items-end",
-			stretch: "items-stretch"
-		}[n]} ${{
-			start: "justify-start",
-			center: "justify-center",
-			end: "justify-end",
-			between: "justify-between",
-			around: "justify-around"
-		}[r]} ${{
-			none: "gap-0",
-			sm: "gap-2",
-			md: "gap-4",
-			lg: "gap-8",
-			xl: "gap-12"
-		}[i]} ${o}`,
-		...c,
-		children: s
+		className: `flex w-full ${t}`.trim(),
+		...r,
+		children: n
 	});
 }
 //#endregion

package/components/StructuredGrid/index.d.ts

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+export interface ComplexGridProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The data defining the names of the slots and their dropped content */
+    gridData?: {
+        name: string;
+        node: React.ReactNode;
+    }[];
+    templateColumns?: string;
+    templateRows?: string;
+    templateAreas?: string;
+    minHeight?: string;
+    /** * @type|class
+     * @schema [{
+     * "key": "Gap",
+     * "prefix": "gap",
+     * "type": "select",
+     * "options": [
+     * {"key": "0", "label": "None (0px)"},
+     * {"key": "4", "label": "Small (16px)"},
+     * {"key": "6", "label": "Medium (24px)"},
+     * {"key": "8", "label": "Large (32px)"},
+     * {"key": "12", "label": "Extra Large (48px)"}
+     * ]
+     * }]
+     */
+    className?: string;
+}
+export declare const ComplexGrid: React.FC<ComplexGridProps>;
+export default ComplexGrid;

package/components/StructuredGrid/index.js

@@ -0,0 +1,41 @@
+import { useMemo as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/StructuredGrid/index.tsx
+var r = ({ gridData: r = [], templateColumns: i = "1fr 1fr", templateRows: a = "auto auto", templateAreas: o = "\"area1 area2\" \"area3 area4\"", minHeight: s = "300px", className: c = "", ...l }) => {
+	let u = e(() => {
+		if (!o) return [];
+		let e = o.replace(/"|'/g, "").split(/\s+/).filter((e) => e.trim() !== "" && e.trim() !== ".");
+		return Array.from(new Set(e));
+	}, [o]), d = (e) => r?.find((t) => t && t.name === e)?.node || null, f = {
+		display: "grid",
+		gridTemplateColumns: i,
+		gridTemplateRows: a,
+		gridTemplateAreas: o,
+		minHeight: s,
+		...l.style
+	};
+	return /* @__PURE__ */ t("div", {
+		className: `w-full grid ${c}`.trim(),
+		style: f,
+		...l,
+		children: u.map((e) => {
+			let r = d(e), i = !r;
+			return /* @__PURE__ */ n("div", {
+				style: { gridArea: e },
+				className: `
+              relative min-h-[50px] transition-colors
+              ${i ? "border border-dashed border-slate-300 bg-slate-50/50 hover:bg-slate-100 hover:border-blue-400" : ""}
+            `,
+				children: [i && /* @__PURE__ */ t("div", {
+					className: "absolute inset-0 flex items-center justify-center pointer-events-none opacity-40",
+					children: /* @__PURE__ */ t("span", {
+						className: "font-mono text-xs font-bold uppercase tracking-wider text-slate-500",
+						children: e
+					})
+				}), r]
+			}, e);
+		})
+	});
+};
+//#endregion
+export { r as default };

package/components/Table/index.js

@@ -1,7 +1,7 @@
 import { useCallback as e, useEffect as t, useRef as n, useState as r } from "react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { flexRender as o, getCoreRowModel as s, getFilteredRowModel as c, getPaginationRowModel as l, getSortedRowModel as u, useReactTable as d } from "@tanstack/react-table";
-import { ChevronDown as f, ChevronLeft as p, ChevronRight as m, ChevronUp as h, ChevronsLeft as g, ChevronsRight as _, ChevronsUpDown as v, Loader2 as y, Search as b, SlidersHorizontal as x } from "lucide-react";
+import { ChevronDown as o, ChevronLeft as s, ChevronRight as c, ChevronUp as l, ChevronsLeft as u, ChevronsRight as d, ChevronsUpDown as f, Loader2 as p, Search as m, SlidersHorizontal as h } from "lucide-react";
+import { flexRender as g, getCoreRowModel as _, getFilteredRowModel as v, getPaginationRowModel as y, getSortedRowModel as b, useReactTable as x } from "@tanstack/react-table";
 //#region src/components/Table/index.tsx
 function S({ columns: S = [], data: C = [], pageSize: w = 10, mode: T = "pagination", onLoadMore: E, isFetching: D = !1, hasMore: O = !1, globalFilterPlaceholder: k = "Search all records..." }) {
 	let [A, j] = r([]), [M, N] = r([]), [P, F] = r(""), [I, L] = r(!1), R = n(null), z = e((e) => {
@@ -12,7 +12,7 @@ function S({ columns: S = [], data: C = [], pageSize: w = 10, mode: T = "paginat
 		D,
 		O,
 		E
-	]), B = d({
+	]), B = x({
 		data: C,
 		columns: S,
 		state: {
@@ -25,10 +25,10 @@ function S({ columns: S = [], data: C = [], pageSize: w = 10, mode: T = "paginat
 		onColumnFiltersChange: N,
 		onGlobalFilterChange: F,
 		globalFilterFn: "includesString",
-		getCoreRowModel: s(),
-		getFilteredRowModel: c(),
-		getSortedRowModel: u(),
-		getPaginationRowModel: T === "pagination" ? l() : void 0
+		getCoreRowModel: _(),
+		getFilteredRowModel: v(),
+		getSortedRowModel: b(),
+		getPaginationRowModel: T === "pagination" ? y() : void 0
 	});
 	return t(() => {
 		B.setPageSize(w);
@@ -39,7 +39,7 @@ function S({ columns: S = [], data: C = [], pageSize: w = 10, mode: T = "paginat
 				className: "flex flex-col sm:flex-row items-center justify-between gap-4",
 				children: [/* @__PURE__ */ a("div", {
 					className: "relative w-full sm:w-96",
-					children: [/* @__PURE__ */ i(b, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400 dark:text-slate-500" }), /* @__PURE__ */ i("input", {
+					children: [/* @__PURE__ */ i(m, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400 dark:text-slate-500" }), /* @__PURE__ */ i("input", {
 						value: P ?? "",
 						onChange: (e) => F(e.target.value),
 						placeholder: k,
@@ -48,7 +48,7 @@ function S({ columns: S = [], data: C = [], pageSize: w = 10, mode: T = "paginat
 				}), /* @__PURE__ */ a("button", {
 					onClick: () => L(!I),
 					className: `flex items-center gap-2 px-4 py-2 border rounded-xl text-sm font-medium transition-colors w-full sm:w-auto shadow-sm dark:shadow-none ${I ? "bg-blue-50 dark:bg-white/10 border-blue-200 dark:border-white/20 text-blue-700 dark:text-white" : "border-slate-200 dark:border-white/10 bg-white dark:bg-[#0A0A0A] hover:bg-slate-50 dark:hover:bg-white/5 text-slate-700 dark:text-slate-300"}`,
-					children: [/* @__PURE__ */ i(x, { size: 14 }), /* @__PURE__ */ i("span", { children: "Filters" })]
+					children: [/* @__PURE__ */ i(h, { size: 14 }), /* @__PURE__ */ i("span", { children: "Filters" })]
 				})]
 			}),
 			/* @__PURE__ */ a("div", {
@@ -66,16 +66,16 @@ function S({ columns: S = [], data: C = [], pageSize: w = 10, mode: T = "paginat
 									children: [/* @__PURE__ */ a("div", {
 										className: e.column.getCanSort() ? "cursor-pointer select-none flex items-center gap-2 hover:text-slate-900 dark:hover:text-white transition-colors" : "flex items-center gap-2",
 										onClick: e.column.getToggleSortingHandler(),
-										children: [o(e.column.columnDef.header, e.getContext()), {
-											asc: /* @__PURE__ */ i(h, {
+										children: [g(e.column.columnDef.header, e.getContext()), {
+											asc: /* @__PURE__ */ i(l, {
 												size: 14,
 												className: "text-blue-500 dark:text-cyan-400"
 											}),
-											desc: /* @__PURE__ */ i(f, {
+											desc: /* @__PURE__ */ i(o, {
 												size: 14,
 												className: "text-blue-500 dark:text-cyan-400"
 											})
-										}[e.column.getIsSorted()] ?? (e.column.getCanSort() ? /* @__PURE__ */ i(v, {
+										}[e.column.getIsSorted()] ?? (e.column.getCanSort() ? /* @__PURE__ */ i(f, {
 											size: 14,
 											className: "opacity-0 group-hover:opacity-50"
 										}) : null)]
@@ -95,7 +95,7 @@ function S({ columns: S = [], data: C = [], pageSize: w = 10, mode: T = "paginat
 								className: "hover:bg-slate-50 dark:hover:bg-white/5 transition-colors group",
 								children: e.getVisibleCells().map((e) => /* @__PURE__ */ i("td", {
 									className: "px-6 py-4 text-slate-700 dark:text-slate-300 whitespace-nowrap",
-									children: o(e.column.columnDef.cell, e.getContext())
+									children: g(e.column.columnDef.cell, e.getContext())
 								}, e.id))
 							}, e.id)) : /* @__PURE__ */ i("tr", { children: /* @__PURE__ */ i("td", {
 								colSpan: S.length,
@@ -109,7 +109,7 @@ function S({ columns: S = [], data: C = [], pageSize: w = 10, mode: T = "paginat
 					className: "flex items-center justify-center p-4 text-slate-500 border-t border-slate-200 dark:border-white/10",
 					children: D ? /* @__PURE__ */ a("span", {
 						className: "flex items-center gap-2 text-sm",
-						children: [/* @__PURE__ */ i(y, {
+						children: [/* @__PURE__ */ i(p, {
 							className: "animate-spin",
 							size: 14
 						}), " Loading more..."]
@@ -146,25 +146,25 @@ function S({ columns: S = [], data: C = [], pageSize: w = 10, mode: T = "paginat
 							onClick: () => B.setPageIndex(0),
 							disabled: !B.getCanPreviousPage(),
 							className: "p-1.5 rounded-lg text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5 disabled:opacity-30 transition-colors",
-							children: /* @__PURE__ */ i(g, { size: 16 })
+							children: /* @__PURE__ */ i(u, { size: 16 })
 						}),
 						/* @__PURE__ */ i("button", {
 							onClick: () => B.previousPage(),
 							disabled: !B.getCanPreviousPage(),
 							className: "p-1.5 rounded-lg text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5 disabled:opacity-30 transition-colors",
-							children: /* @__PURE__ */ i(p, { size: 16 })
+							children: /* @__PURE__ */ i(s, { size: 16 })
 						}),
 						/* @__PURE__ */ i("button", {
 							onClick: () => B.nextPage(),
 							disabled: !B.getCanNextPage(),
 							className: "p-1.5 rounded-lg text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5 disabled:opacity-30 transition-colors",
-							children: /* @__PURE__ */ i(m, { size: 16 })
+							children: /* @__PURE__ */ i(c, { size: 16 })
 						}),
 						/* @__PURE__ */ i("button", {
 							onClick: () => B.setPageIndex(B.getPageCount() - 1),
 							disabled: !B.getCanNextPage(),
 							className: "p-1.5 rounded-lg text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5 disabled:opacity-30 transition-colors",
-							children: /* @__PURE__ */ i(_, { size: 16 })
+							children: /* @__PURE__ */ i(d, { size: 16 })
 						})
 					]
 				})]

package/index.d.ts

@@ -1,3 +1,9 @@
+export type { BoxProps } from './components/Box';
+export { default as Box } from './components/Box';
+export type { RudraCarouselProps } from './components/Carousel';
+export { default as RudraCarousel } from './components/Carousel';
+export type { RepeaterCarouselProps } from './components/DataCarousel';
+export { default as RepeaterCarousel } from './components/DataCarousel';
 export type { GridProps } from './components/Grid';
 export { default as Grid } from './components/Grid';
 export type { RepeaterProps } from './components/Repeater';
@@ -6,5 +12,7 @@ export type { RepeaterTableProps } from './components/RepeaterTable';
 export { default as RepeaterTable } from './components/RepeaterTable';
 export type { StackProps } from './components/Stack';
 export { default as Stack } from './components/Stack';
+export type { ComplexGridProps } from './components/StructuredGrid';
+export { default as ComplexGrid } from './components/StructuredGrid';
 export type { DataTableProps } from './components/Table';
 export { default as DataTable } from './components/Table';

package/index.js

@@ -1,9 +1,13 @@
 /* empty css       */
-import e from "./components/Grid/index.js";
-import t from "./components/Repeater/index.js";
-import n from "./components/RepeaterTable/index.js";
-import r from "./components/Stack/index.js";
-import i from "./components/Table/index.js";
-export { i as DataTable, e as Grid, t as Repeater, n as RepeaterTable, r as Stack };
+import e from "./components/Box/index.js";
+import t from "./components/Carousel/index.js";
+import n from "./components/DataCarousel/index.js";
+import r from "./components/Grid/index.js";
+import i from "./components/Repeater/index.js";
+import a from "./components/RepeaterTable/index.js";
+import o from "./components/Stack/index.js";
+import s from "./components/StructuredGrid/index.js";
+import c from "./components/Table/index.js";
+export { e as Box, s as ComplexGrid, c as DataTable, r as Grid, i as Repeater, n as RepeaterCarousel, a as RepeaterTable, t as RudraCarousel, o as Stack };
 
-try{if(typeof document!=="undefined"){const e=document.createElement("style");e.textContent="*,:before,:after{box-sizing:border-box;border:0 solid #e5e7eb}:before,:after{--tw-content:\"\"}html,:host{-webkit-text-size-adjust:100%;tab-size:4;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{line-height:inherit;margin:0}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-feature-settings:normal;font-variation-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-feature-settings:inherit;font-variation-settings:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:#0000;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{margin:0;padding:0;list-style:none}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder{opacity:1;color:#9ca3af}textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after,::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.absolute{position:absolute}.relative{position:relative}.left-3{left:.75rem}.top-1\\/2{top:50%}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mt-4{margin-top:1rem}.flex{display:flex}.\\!table{display:table!important}.table{display:table}.grid{display:grid}.h-4{height:1rem}.w-4{width:1rem}.w-full{width:100%}.min-w-0{min-width:0}.min-w-\\[120px\\]{min-width:120px}.flex-1{flex:1}.shrink-0{flex-shrink:0}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:1s linear infinite spin}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;user-select:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-\\[repeat\\(auto-fit\\,minmax\\(250px\\,1fr\\)\\)\\]{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.gap-0{gap:0}.gap-1{gap:.25rem}.gap-1\\.5{gap:.375rem}.gap-12{gap:3rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}.divide-slate-200>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(226 232 240/var(--tw-divide-opacity))}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-blue-200{--tw-border-opacity:1;border-color:rgb(191 219 254/var(--tw-border-opacity))}.border-purple-200{--tw-border-opacity:1;border-color:rgb(233 213 255/var(--tw-border-opacity))}.border-purple-300{--tw-border-opacity:1;border-color:rgb(216 180 254/var(--tw-border-opacity))}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity))}.border-slate-300{--tw-border-opacity:1;border-color:rgb(203 213 225/var(--tw-border-opacity))}.bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity))}.bg-purple-50{--tw-bg-opacity:1;background-color:rgb(250 245 255/var(--tw-bg-opacity))}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity))}.bg-slate-50\\/50{background-color:#f8fafc80}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.p-0{padding:0}.p-1{padding:.25rem}.p-1\\.5{padding:.375rem}.p-12{padding:3rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\\.5{padding-top:.375rem;padding-bottom:.375rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pl-10{padding-left:2.5rem}.pr-4{padding-right:1rem}.text-left{text-align:left}.text-center{text-align:center}.align-top{vertical-align:top}.text-\\[10px\\]{font-size:10px}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.normal-case{text-transform:none}.italic{font-style:italic}.tracking-wider{letter-spacing:.05em}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity))}.text-blue-700{--tw-text-opacity:1;color:rgb(29 78 216/var(--tw-text-opacity))}.text-purple-600{--tw-text-opacity:1;color:rgb(147 51 234/var(--tw-text-opacity))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity))}.text-slate-700{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity))}.text-slate-900{--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity))}.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-70{opacity:.7}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 #0000000d;--tw-shadow-colored:inset 0 2px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.outline-none{outline-offset:2px;outline:2px solid #0000}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.placeholder\\:text-slate-400::placeholder{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.hover\\:bg-slate-100:hover{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity))}.hover\\:bg-slate-200:hover{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity))}.hover\\:bg-slate-50:hover{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity))}.hover\\:text-slate-900:hover{--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity))}.focus\\:border-blue-500:focus{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity))}.focus\\:outline-none:focus{outline-offset:2px;outline:2px solid #0000}.disabled\\:opacity-30:disabled{opacity:.3}.group:hover .group-hover\\:opacity-50{opacity:.5}@media (width>=640px){.sm\\:w-96{width:24rem}.sm\\:w-auto{width:auto}.sm\\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\\:flex-row{flex-direction:row}}@media (width>=768px){.md\\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width>=1024px){.lg\\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (width>=1280px){.xl\\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (prefers-color-scheme:dark){.dark\\:divide-white\\/5>:not([hidden])~:not([hidden]){border-color:#ffffff0d}.dark\\:border-slate-700{--tw-border-opacity:1;border-color:rgb(51 65 85/var(--tw-border-opacity))}.dark\\:border-slate-800{--tw-border-opacity:1;border-color:rgb(30 41 59/var(--tw-border-opacity))}.dark\\:border-white\\/10{border-color:#ffffff1a}.dark\\:border-white\\/20{border-color:#fff3}.dark\\:border-white\\/5{border-color:#ffffff0d}.dark\\:bg-\\[\\#0A0A0A\\]{--tw-bg-opacity:1;background-color:rgb(10 10 10/var(--tw-bg-opacity))}.dark\\:bg-black\\/40{background-color:#0006}.dark\\:bg-white\\/10{background-color:#ffffff1a}.dark\\:bg-white\\/5{background-color:#ffffff0d}.dark\\:bg-white\\/\\[0\\.02\\]{background-color:#ffffff05}.dark\\:text-cyan-400{--tw-text-opacity:1;color:rgb(34 211 238/var(--tw-text-opacity))}.dark\\:text-slate-200{--tw-text-opacity:1;color:rgb(226 232 240/var(--tw-text-opacity))}.dark\\:text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity))}.dark\\:text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.dark\\:text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity))}.dark\\:text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.dark\\:shadow-none{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.dark\\:placeholder\\:text-slate-600::placeholder{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity))}.dark\\:hover\\:bg-white\\/10:hover{background-color:#ffffff1a}.dark\\:hover\\:bg-white\\/5:hover{background-color:#ffffff0d}.dark\\:hover\\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.dark\\:focus\\:border-cyan-500\\/50:focus{border-color:#06b6d480}}";const target = window.__RUDRA_SHADOW_ROOT__ || document.head; target.appendChild(e);}}catch(err){}
+try{if(typeof document!=="undefined"){const e=document.createElement("style");e.textContent="*,:before,:after{box-sizing:border-box;border:0 solid #e5e7eb}:before,:after{--tw-content:\"\"}html,:host{-webkit-text-size-adjust:100%;tab-size:4;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{line-height:inherit;margin:0}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-feature-settings:normal;font-variation-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-feature-settings:inherit;font-variation-settings:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:#0000;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{margin:0;padding:0;list-style:none}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder{opacity:1;color:#9ca3af}textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after,::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.left-0{left:0}.left-3{left:.75rem}.right-0{right:0}.top-1\\/2{top:50%}.z-10{z-index:10}.z-20{z-index:20}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mt-4{margin-top:1rem}.inline{display:inline}.flex{display:flex}.\\!table{display:table!important}.table{display:table}.grid{display:grid}.h-1{height:.25rem}.h-1\\.5{height:.375rem}.h-10{height:2.5rem}.h-4{height:1rem}.h-8{height:2rem}.min-h-\\[50px\\]{min-height:50px}.w-1{width:.25rem}.w-1\\.5{width:.375rem}.w-10{width:2.5rem}.w-4{width:1rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-\\[85\\%\\]{width:85%}.w-full{width:100%}.min-w-0{min-width:0}.min-w-\\[120px\\]{min-width:120px}.flex-1{flex:1}.shrink-0{flex-shrink:0}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:1s linear infinite spin}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;user-select:none}.snap-x{scroll-snap-type:x var(--tw-scroll-snap-strictness)}.snap-mandatory{--tw-scroll-snap-strictness:mandatory}.snap-center{scroll-snap-align:center}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-nowrap{flex-wrap:nowrap}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-1{gap:.25rem}.gap-1\\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}.divide-slate-200>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(226 232 240/var(--tw-divide-opacity))}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-blue-200{--tw-border-opacity:1;border-color:rgb(191 219 254/var(--tw-border-opacity))}.border-purple-200{--tw-border-opacity:1;border-color:rgb(233 213 255/var(--tw-border-opacity))}.border-purple-300{--tw-border-opacity:1;border-color:rgb(216 180 254/var(--tw-border-opacity))}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity))}.border-slate-300{--tw-border-opacity:1;border-color:rgb(203 213 225/var(--tw-border-opacity))}.bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity))}.bg-purple-50{--tw-bg-opacity:1;background-color:rgb(250 245 255/var(--tw-bg-opacity))}.bg-slate-300{--tw-bg-opacity:1;background-color:rgb(203 213 225/var(--tw-bg-opacity))}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity))}.bg-slate-50\\/50{background-color:#f8fafc80}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.p-0{padding:0}.p-1{padding:.25rem}.p-1\\.5{padding:.375rem}.p-12{padding:3rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\\.5{padding-top:.375rem;padding-bottom:.375rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pl-10{padding-left:2.5rem}.pr-4{padding-right:1rem}.text-left{text-align:left}.text-center{text-align:center}.align-top{vertical-align:top}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-\\[10px\\]{font-size:10px}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.normal-case{text-transform:none}.italic{font-style:italic}.tracking-wider{letter-spacing:.05em}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity))}.text-blue-700{--tw-text-opacity:1;color:rgb(29 78 216/var(--tw-text-opacity))}.text-purple-600{--tw-text-opacity:1;color:rgb(147 51 234/var(--tw-text-opacity))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity))}.text-slate-700{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity))}.text-slate-900{--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity))}.opacity-0{opacity:0}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-70{opacity:.7}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 #0000000d;--tw-shadow-colored:inset 0 2px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.outline-none{outline-offset:2px;outline:2px solid #0000}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-property:transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.\\[-ms-overflow-style\\:none\\]{-ms-overflow-style:none}.\\[scrollbar-width\\:none\\]{scrollbar-width:none}.placeholder\\:text-slate-400::placeholder{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.hover\\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:border-blue-400:hover{--tw-border-opacity:1;border-color:rgb(96 165 250/var(--tw-border-opacity))}.hover\\:bg-blue-50:hover{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity))}.hover\\:bg-slate-100:hover{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity))}.hover\\:bg-slate-200:hover{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity))}.hover\\:bg-slate-400:hover{--tw-bg-opacity:1;background-color:rgb(148 163 184/var(--tw-bg-opacity))}.hover\\:bg-slate-50:hover{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity))}.hover\\:text-blue-600:hover{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity))}.hover\\:text-slate-900:hover{--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity))}.focus\\:border-blue-500:focus{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity))}.focus\\:outline-none:focus{outline-offset:2px;outline:2px solid #0000}.disabled\\:pointer-events-none:disabled{pointer-events:none}.disabled\\:opacity-0:disabled{opacity:0}.disabled\\:opacity-30:disabled{opacity:.3}.group:hover .group-hover\\:opacity-50{opacity:.5}@media (width>=640px){.sm\\:-left-4{left:-1rem}.sm\\:-right-4{right:-1rem}.sm\\:w-96{width:24rem}.sm\\:w-\\[38\\%\\]{width:38%}.sm\\:w-\\[calc\\(50\\%-1rem\\)\\]{width:calc(50% - 1rem)}.sm\\:w-auto{width:auto}.sm\\:snap-start{scroll-snap-align:start}.sm\\:flex-row{flex-direction:row}}@media (width>=768px){.md\\:w-\\[28\\%\\]{width:28%}.md\\:w-\\[calc\\(33\\.333\\%-1rem\\)\\]{width:calc(33.333% - 1rem)}.md\\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (width>=1024px){.lg\\:w-\\[21\\%\\]{width:21%}.lg\\:w-\\[calc\\(25\\%-1rem\\)\\]{width:calc(25% - 1rem)}}@media (prefers-color-scheme:dark){.dark\\:divide-white\\/5>:not([hidden])~:not([hidden]){border-color:#ffffff0d}.dark\\:border-slate-700{--tw-border-opacity:1;border-color:rgb(51 65 85/var(--tw-border-opacity))}.dark\\:border-slate-800{--tw-border-opacity:1;border-color:rgb(30 41 59/var(--tw-border-opacity))}.dark\\:border-white\\/10{border-color:#ffffff1a}.dark\\:border-white\\/20{border-color:#fff3}.dark\\:border-white\\/5{border-color:#ffffff0d}.dark\\:bg-\\[\\#0A0A0A\\]{--tw-bg-opacity:1;background-color:rgb(10 10 10/var(--tw-bg-opacity))}.dark\\:bg-black\\/40{background-color:#0006}.dark\\:bg-white\\/10{background-color:#ffffff1a}.dark\\:bg-white\\/5{background-color:#ffffff0d}.dark\\:bg-white\\/\\[0\\.02\\]{background-color:#ffffff05}.dark\\:text-cyan-400{--tw-text-opacity:1;color:rgb(34 211 238/var(--tw-text-opacity))}.dark\\:text-slate-200{--tw-text-opacity:1;color:rgb(226 232 240/var(--tw-text-opacity))}.dark\\:text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity))}.dark\\:text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.dark\\:text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity))}.dark\\:text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.dark\\:shadow-none{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.dark\\:placeholder\\:text-slate-600::placeholder{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity))}.dark\\:hover\\:bg-white\\/10:hover{background-color:#ffffff1a}.dark\\:hover\\:bg-white\\/5:hover{background-color:#ffffff0d}.dark\\:hover\\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.dark\\:focus\\:border-cyan-500\\/50:focus{border-color:#06b6d480}}.\\[\\&\\:\\:-webkit-scrollbar\\]\\:hidden::-webkit-scrollbar{display:none}";const target = window.__RUDRA_SHADOW_ROOT__ || document.head; target.appendChild(e);}}catch(err){}

package/package.json

@@ -2,7 +2,7 @@
   "dependencies": {
     "@react-three/fiber": "9.6.1",
     "@tanstack/react-table": "8",
-    "gsap": "3.12.2",
+    "gsap": "3.12.5",
     "lucide-react": "^1.8.0",
     "motion": "12.0.0",
     "tailwindcss": "3.4.4",
@@ -42,5 +42,5 @@
   },
   "types": "./index.d.ts",
   "unpkg": "./index.umd.js",
-  "version": "1.0.13"
+  "version": "1.0.15"
 }