@rudra-studio/rudra-layout 1.0.14 → 1.0.16

package/components/Box/index.d.ts

@@ -1,15 +1,63 @@
 import { default as React } from 'react';
 export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
-    direction?: 'row' | 'col';
-    horizontalAlign?: 'start' | 'center' | 'end' | 'between' | 'stretch';
-    verticalAlign?: 'start' | 'center' | 'end' | 'between' | 'stretch';
-    gap?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
-    wrap?: boolean;
-    customAttributes?: {
-        name: string;
-        value: string;
-    }[];
+    /**
+     * 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>;

package/components/Box/index.js

@@ -1,42 +1,11 @@
 import "react";
 import { jsx as e } from "react/jsx-runtime";
 //#region src/components/Box/index.tsx
-var t = ({ children: t, direction: n = "row", horizontalAlign: r = "start", verticalAlign: i = "stretch", gap: a = "none", wrap: o = !1, customAttributes: s = [], className: c = "", ...l }) => {
-	let u = {
-		none: "gap-0",
-		sm: "gap-2",
-		md: "gap-4",
-		lg: "gap-6",
-		xl: "gap-8"
-	}, d = "", f = "", p = {
-		start: "justify-start",
-		center: "justify-center",
-		end: "justify-end",
-		between: "justify-between",
-		stretch: "justify-stretch"
-	}, m = {
-		start: "items-start",
-		center: "items-center",
-		end: "items-end",
-		between: "items-stretch",
-		stretch: "items-stretch"
-	};
-	n === "row" ? (d = p[r] || "justify-start", f = m[i] || "items-stretch") : (d = p[i] || "justify-start", f = m[r] || "items-stretch");
-	let h = s?.reduce((e, t) => (t && t.name && t.name.trim() !== "" && (e[t.name.trim()] = t.value), e), {});
-	return /* @__PURE__ */ e("div", {
-		className: `
-        flex 
-        ${n === "row" ? "flex-row" : "flex-col"} 
-        ${o ? "flex-wrap" : "flex-nowrap"} 
-        ${d} 
-        ${f} 
-        ${u[a]} 
-        ${c}
-      `,
-		...h,
-		...l,
-		children: t
-	});
-};
+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

@@ -1,9 +1,23 @@
 import { default as React } from 'react';
-export interface RudraCarouselProps {
-    children: React.ReactNode[];
+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>;

package/components/Carousel/index.js

@@ -2,69 +2,62 @@ 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 }) => {
-	let m = n(null), [h, g] = r(!0), [_, v] = r(!1), [y, b] = r(0), x = e.Children.count(l), S = () => {
-		switch (d) {
-			case "one": return "w-full";
-			case "multiple": return "w-full sm:w-[calc(50%-1rem)] md:w-[calc(33.333%-1rem)] lg:w-[calc(25%-1rem)]";
-			case "fractional": return "w-[85%] sm:w-[38%] md:w-[28%] lg:w-[21%]";
-			default: return "w-full";
-		}
-	}, C = () => {
-		switch (f) {
-			case "none": return "gap-0";
-			case "sm": return "gap-2";
-			case "lg": return "gap-8";
-			default: return "gap-4";
-		}
-	}, w = () => {
-		if (!m.current) return;
-		let { scrollLeft: e, scrollWidth: t, clientWidth: n } = m.current;
-		g(e <= 10), v(Math.ceil(e + n) >= t - 10);
+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;
-		if (r > 0) {
-			let t = e / r;
-			b(Math.round(t * (x - 1)));
-		} else b(0);
+		x(r > 0 ? Math.round(e / r * (C - 1)) : 0);
 	};
 	t(() => {
-		w();
+		E();
 	}, [l, d]);
-	let T = (e) => {
-		if (!m.current) return;
-		let t = m.current.clientWidth * .8;
-		m.current.scrollBy({
+	let D = (e) => {
+		if (!h.current) return;
+		let t = h.current.clientWidth * .8;
+		h.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) * (e / (x - 1 || 1));
-		m.current.scrollTo({
-			left: r,
+	}, 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 !l || x === 0 ? null : /* @__PURE__ */ o("div", {
-		className: `relative w-full flex flex-col group ${p}`,
+	return C === 0 ? null : /* @__PURE__ */ o("div", {
+		className: `relative w-full flex flex-col group ${p}`.trim(),
+		...m,
 		children: [
 			/* @__PURE__ */ a("div", {
-				ref: m,
-				onScroll: w,
-				className: `flex ${C()} overflow-x-auto snap-x snap-mandatory [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] relative z-10 py-4`,
-				children: e.Children.map(l, (e, t) => /* @__PURE__ */ a("div", {
-					className: `shrink-0 snap-center sm:snap-start transition-transform ${S()}`,
+				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: () => T("left"),
-				disabled: h,
+				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: () => T("right"),
-				disabled: _,
+				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 })
 			})] }),
@@ -72,22 +65,22 @@ var l = ({ children: l, variant: u = "inline-arrows", itemsPerView: d = "one", g
 				className: "flex items-center justify-between w-full mt-4 px-2",
 				children: [
 					/* @__PURE__ */ a("button", {
-						onClick: () => T("left"),
-						disabled: h,
+						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: x }).map((e, t) => /* @__PURE__ */ a("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"}`,
+						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: () => T("right"),
-						disabled: _,
+						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 })
 					})

package/components/DataCarousel/index.d.ts

@@ -1,12 +1,37 @@
 import { default as React } from 'react';
-export interface RepeaterCarouselProps {
-    /** The data array to iterate over */
+export interface RepeaterCarouselProps extends React.HTMLAttributes<HTMLDivElement> {
     items?: any[];
-    /** The template to render for each item in the array */
-    template?: React.ReactNode | ((payload: any) => React.ReactNode);
+    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';
-    gap?: 'none' | 'sm' | 'md' | 'lg';
+    /** * @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>;

package/components/DataCarousel/index.js

@@ -2,30 +2,22 @@ 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 = [], template: 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 = () => {
-		switch (d) {
-			case "one": return "w-full";
-			case "multiple": return "w-full sm:w-[calc(50%-1rem)] md:w-[calc(33.333%-1rem)] lg:w-[calc(25%-1rem)]";
-			case "fractional": return "w-[85%] sm:w-[38%] md:w-[28%] lg:w-[21%]";
-			default: return "w-full";
-		}
-	}, C = () => {
-		switch (f) {
-			case "none": return "gap-0";
-			case "sm": return "gap-2";
-			case "lg": return "gap-8";
-			default: return "gap-4";
-		}
+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;
-		if (r > 0) {
-			let t = e / r;
-			b(Math.round(t * (x - 1)));
-		} else b(0);
+		b(r > 0 ? Math.round(e / r * (x - 1)) : 0);
 	};
 	e(() => {
 		w();
@@ -39,25 +31,24 @@ var c = ({ items: c = [], template: l, variant: u = "inline-arrows", itemsPerVie
 		});
 	}, E = (e) => {
 		if (!m.current) return;
-		let { scrollWidth: t, clientWidth: n } = m.current, r = (t - n) * (e / (x - 1 || 1));
+		let { scrollWidth: t, clientWidth: n } = m.current, r = t - n;
 		m.current.scrollTo({
-			left: r,
+			left: r * (e / (x - 1 || 1)),
 			behavior: "smooth"
 		});
 	};
 	return x === 0 ? null : /* @__PURE__ */ a("div", {
-		className: `relative w-full flex flex-col group ${p}`,
+		className: `relative w-full flex flex-col group ${p}`.trim(),
 		children: [
 			/* @__PURE__ */ i("div", {
 				ref: m,
 				onScroll: w,
-				className: `flex ${C()} overflow-x-auto snap-x snap-mandatory [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] relative z-10 py-4`,
+				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()}`,
+					className: `shrink-0 snap-center sm:snap-start transition-transform ${S[d]}`,
 					children: typeof l == "function" ? l({
 						item: e,
-						index: t,
-						_builderIndex: t
+						index: t
 					}) : l
 				}, t))
 			}),

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/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

@@ -8,8 +8,21 @@ export interface ComplexGridProps extends React.HTMLAttributes<HTMLDivElement> {
     templateColumns?: string;
     templateRows?: string;
     templateAreas?: string;
-    gap?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
     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>;

package/components/StructuredGrid/index.js

@@ -1,31 +1,25 @@
 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\"", gap: s = "md", minHeight: c = "300px", className: l = "", ...u }) => {
-	let d = {
-		none: "gap-0",
-		sm: "gap-4",
-		md: "gap-6",
-		lg: "gap-8",
-		xl: "gap-12"
-	}, f = e(() => {
+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]), p = (e) => r?.find((t) => t && t.name === e)?.node || null, m = {
+	}, [o]), d = (e) => r?.find((t) => t && t.name === e)?.node || null, f = {
 		display: "grid",
 		gridTemplateColumns: i,
 		gridTemplateRows: a,
 		gridTemplateAreas: o,
-		minHeight: c,
-		...u.style
+		minHeight: s,
+		...l.style
 	};
 	return /* @__PURE__ */ t("div", {
-		className: `w-full ${d[s]} ${l}`,
-		style: m,
-		...u,
-		children: f.map((e) => {
-			let r = p(e), i = !r;
+		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: `

package/index.js

@@ -10,4 +10,4 @@ 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: }.container{width:100%}@media (width>=640px){.container{max-width:640px}}@media (width>=768px){.container{max-width:768px}}@media (width>=1024px){.container{max-width:1024px}}@media (width>=1280px){.container{max-width:1280px}}@media (width>=1536px){.container{max-width:1536px}}.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-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}.justify-stretch{justify-content:stretch}.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-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\\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.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-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\\:w-\\[21\\%\\]{width:21%}.lg\\:w-\\[calc\\(25\\%-1rem\\)\\]{width:calc(25% - 1rem)}.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}}.\\[\\&\\:\\:-webkit-scrollbar\\]\\:hidden::-webkit-scrollbar{display:none}";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.14"
+  "version": "1.0.16"
 }