@rudra-studio/rudra-layout 1.0.16 → 1.0.18

package/components/AspectRatio/index.d.ts

@@ -0,0 +1,64 @@
+import { default as React } from 'react';
+export type AspectRatioElement = "div" | "section" | "figure";
+export interface AspectRatioProps extends Omit<React.HTMLAttributes<HTMLElement>, "children" | "className"> {
+    children?: React.ReactNode;
+    /** @select|div|section|figure */
+    as?: AspectRatioElement;
+    /**
+     * @type|class
+     * @schema [
+     *   {
+     *     "key":"Aspect Ratio",
+     *     "prefix":"aspect",
+     *     "type":"select",
+     *     "options":[
+     *       {"key":"auto","label":"Auto"},
+     *       {"key":"square","label":"1:1 Square"},
+     *       {"key":"video","label":"16:9 Video"},
+     *       {"key":"[4/3]","label":"4:3"},
+     *       {"key":"[3/2]","label":"3:2"},
+     *       {"key":"[21/9]","label":"21:9"},
+     *       {"key":"[9/16]","label":"9:16 Portrait"}
+     *     ]
+     *   },
+     *   {
+     *     "key":"Width",
+     *     "prefix":"w",
+     *     "type":"select",
+     *     "options":[
+     *       {"key":"auto","label":"Auto"},
+     *       {"key":"full","label":"Full Width"},
+     *       {"key":"1/2","label":"50%"},
+     *       {"key":"2/3","label":"66%"},
+     *       {"key":"3/4","label":"75%"}
+     *     ]
+     *   },
+     *   {
+     *     "key":"Overflow",
+     *     "prefix":"overflow",
+     *     "type":"select",
+     *     "options":[
+     *       {"key":"visible","label":"Visible"},
+     *       {"key":"hidden","label":"Hidden"},
+     *       {"key":"auto","label":"Auto"}
+     *     ]
+     *   },
+     *   {
+     *     "key":"Radius",
+     *     "prefix":"rounded",
+     *     "type":"select",
+     *     "options":[
+     *       {"key":"none","label":"None"},
+     *       {"key":"sm","label":"Small"},
+     *       {"key":"md","label":"Medium"},
+     *       {"key":"lg","label":"Large"},
+     *       {"key":"xl","label":"Extra Large"},
+     *       {"key":"2xl","label":"2XL"},
+     *       {"key":"full","label":"Full"}
+     *     ]
+     *   }
+     * ]
+     */
+    className?: string;
+}
+export default function AspectRatio({ children, as, className, ...props }: AspectRatioProps): import("react/jsx-runtime").JSX.Element;

package/components/AspectRatio/index.js

@@ -0,0 +1,12 @@
+import "react";
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/AspectRatio/index.tsx
+function t({ children: t, as: n = "div", className: r = "", ...i }) {
+	return /* @__PURE__ */ e(n, {
+		...i,
+		className: ["relative w-full overflow-hidden", r].filter(Boolean).join(" "),
+		children: t
+	});
+}
+//#endregion
+export { t as default };

package/components/Container/index.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+export type ContainerElement = "div" | "main" | "section" | "article" | "aside" | "header" | "footer";
+export type ContainerMaxWidth = "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "none";
+export interface ContainerProps extends Omit<React.HTMLAttributes<HTMLElement>, "children" | "className"> {
+    children?: React.ReactNode;
+    /** @select|div|main|section|article|aside|header|footer */
+    as?: ContainerElement;
+    /** @select|sm|md|lg|xl|2xl|full|none */
+    maxWidth?: ContainerMaxWidth;
+    centered?: boolean;
+    /**
+     * @type|class
+     * @schema [{"key":"Width","prefix":"w","type":"select","options":[{"key":"auto","label":"Auto"},{"key":"full","label":"Full Width"},{"key":"screen","label":"Screen"}]},{"key":"Padding X","prefix":"px","type":"select","options":[{"key":"0","label":"None"},{"key":"2","label":"Small"},{"key":"4","label":"Medium"},{"key":"6","label":"Large"},{"key":"8","label":"Extra Large"},{"key":"12","label":"2XL"}]},{"key":"Padding Y","prefix":"py","type":"select","options":[{"key":"0","label":"None"},{"key":"2","label":"Small"},{"key":"4","label":"Medium"},{"key":"6","label":"Large"},{"key":"8","label":"Extra Large"},{"key":"12","label":"2XL"}]},{"key":"Background","prefix":"bg","type":"select","options":[{"key":"transparent","label":"Transparent"},{"key":"white","label":"White"},{"key":"gray-50","label":"Gray 50"},{"key":"gray-100","label":"Gray 100"},{"key":"gray-900","label":"Gray 900"},{"key":"black","label":"Black"}]},{"key":"Min Height","prefix":"min-h","type":"select","options":[{"key":"0","label":"None"},{"key":"full","label":"Full"},{"key":"screen","label":"Screen"}]}]
+     */
+    className?: string;
+}
+export default function Container({ children, as, maxWidth, centered, className, ...props }: ContainerProps): import("react/jsx-runtime").JSX.Element;

package/components/Container/index.js

@@ -0,0 +1,27 @@
+import "react";
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/Container/index.tsx
+var t = {
+	sm: "max-w-screen-sm",
+	md: "max-w-screen-md",
+	lg: "max-w-screen-lg",
+	xl: "max-w-screen-xl",
+	"2xl": "max-w-screen-2xl",
+	full: "max-w-full",
+	none: ""
+};
+function n({ children: n, as: r = "div", maxWidth: i = "xl", centered: a = !0, className: o = "", ...s }) {
+	let c = r, l = [
+		"w-full",
+		t[i],
+		a ? "mx-auto" : "",
+		o
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ e(c, {
+		...s,
+		className: l,
+		children: n
+	});
+}
+//#endregion
+export { n as default };

package/components/Flex/index.d.ts

@@ -0,0 +1,98 @@
+import { default as React } from 'react';
+export type FlexElement = "div" | "section" | "article" | "main" | "aside" | "nav";
+export interface FlexProps extends Omit<React.HTMLAttributes<HTMLElement>, "children" | "className"> {
+    children?: React.ReactNode;
+    /** @select|div|section|article|main|aside|nav */
+    as?: FlexElement;
+    /**
+     * @type|class
+     * @schema [
+     *   {
+     *     "key":"Direction",
+     *     "prefix":"flex",
+     *     "type":"select",
+     *     "options":[
+     *       {"key":"row","label":"Row"},
+     *       {"key":"row-reverse","label":"Row Reverse"},
+     *       {"key":"col","label":"Column"},
+     *       {"key":"col-reverse","label":"Column Reverse"}
+     *     ]
+     *   },
+     *   {
+     *     "key":"Align",
+     *     "prefix":"items",
+     *     "type":"select",
+     *     "options":[
+     *       {"key":"start","label":"Start"},
+     *       {"key":"center","label":"Center"},
+     *       {"key":"end","label":"End"},
+     *       {"key":"stretch","label":"Stretch"},
+     *       {"key":"baseline","label":"Baseline"}
+     *     ]
+     *   },
+     *   {
+     *     "key":"Justify",
+     *     "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":"evenly","label":"Space Evenly"}
+     *     ]
+     *   },
+     *   {
+     *     "key":"Wrap",
+     *     "prefix":"flex",
+     *     "type":"select",
+     *     "options":[
+     *       {"key":"nowrap","label":"No Wrap"},
+     *       {"key":"wrap","label":"Wrap"},
+     *       {"key":"wrap-reverse","label":"Wrap Reverse"}
+     *     ]
+     *   },
+     *   {
+     *     "key":"Gap",
+     *     "prefix":"gap",
+     *     "type":"select",
+     *     "options":[
+     *       {"key":"0","label":"None"},
+     *       {"key":"1","label":"1"},
+     *       {"key":"2","label":"2"},
+     *       {"key":"3","label":"3"},
+     *       {"key":"4","label":"4"},
+     *       {"key":"6","label":"6"},
+     *       {"key":"8","label":"8"},
+     *       {"key":"10","label":"10"},
+     *       {"key":"12","label":"12"}
+     *     ]
+     *   },
+     *   {
+     *     "key":"Width",
+     *     "prefix":"w",
+     *     "type":"select",
+     *     "options":[
+     *       {"key":"auto","label":"Auto"},
+     *       {"key":"full","label":"Full"},
+     *       {"key":"screen","label":"Screen"}
+     *     ]
+     *   },
+     *   {
+     *     "key":"Padding",
+     *     "prefix":"p",
+     *     "type":"select",
+     *     "options":[
+     *       {"key":"0","label":"None"},
+     *       {"key":"2","label":"Small"},
+     *       {"key":"4","label":"Medium"},
+     *       {"key":"6","label":"Large"},
+     *       {"key":"8","label":"Extra Large"}
+     *     ]
+     *   }
+     * ]
+     */
+    className?: string;
+}
+export default function Flex({ children, as, className, ...props }: FlexProps): import("react/jsx-runtime").JSX.Element;

package/components/Flex/index.js

@@ -0,0 +1,12 @@
+import "react";
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/Flex/index.tsx
+function t({ children: t, as: n = "div", className: r = "", ...i }) {
+	return /* @__PURE__ */ e(n, {
+		...i,
+		className: ["flex", r].filter(Boolean).join(" "),
+		children: t
+	});
+}
+//#endregion
+export { t as default };

package/components/Grid/index.d.ts

@@ -1,31 +1,138 @@
 import { default as React } from 'react';
-export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
+export type GridElement = "div" | "section" | "article" | "main" | "aside";
+export interface GridProps extends Omit<React.HTMLAttributes<HTMLElement>, "children" | "className"> {
     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)"}
+    /** @select|div|section|article|main|aside */
+    as?: GridElement;
+    /**
+     * @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":"5","label":"5 Columns"},
+     *       {"key":"6","label":"6 Columns"},
+     *       {"key":"12","label":"12 Columns"}
+     *     ]
+     *   },
+     *   {
+     *     "key":"Rows",
+     *     "prefix":"grid-rows",
+     *     "type":"select",
+     *     "options":[
+     *       {"key":"1","label":"1 Row"},
+     *       {"key":"2","label":"2 Rows"},
+     *       {"key":"3","label":"3 Rows"},
+     *       {"key":"4","label":"4 Rows"},
+     *       {"key":"5","label":"5 Rows"},
+     *       {"key":"6","label":"6 Rows"}
+     *     ]
+     *   },
+     *   {
+     *     "key":"Gap",
+     *     "prefix":"gap",
+     *     "type":"select",
+     *     "options":[
+     *       {"key":"0","label":"None"},
+     *       {"key":"1","label":"1"},
+     *       {"key":"2","label":"2"},
+     *       {"key":"3","label":"3"},
+     *       {"key":"4","label":"4"},
+     *       {"key":"6","label":"6"},
+     *       {"key":"8","label":"8"},
+     *       {"key":"10","label":"10"},
+     *       {"key":"12","label":"12"}
+     *     ]
+     *   },
+     *   {
+     *     "key":"Column Gap",
+     *     "prefix":"gap-x",
+     *     "type":"select",
+     *     "options":[
+     *       {"key":"0","label":"None"},
+     *       {"key":"2","label":"Small"},
+     *       {"key":"4","label":"Medium"},
+     *       {"key":"6","label":"Large"},
+     *       {"key":"8","label":"Extra Large"}
+     *     ]
+     *   },
+     *   {
+     *     "key":"Row Gap",
+     *     "prefix":"gap-y",
+     *     "type":"select",
+     *     "options":[
+     *       {"key":"0","label":"None"},
+     *       {"key":"2","label":"Small"},
+     *       {"key":"4","label":"Medium"},
+     *       {"key":"6","label":"Large"},
+     *       {"key":"8","label":"Extra Large"}
+     *     ]
+     *   },
+     *   {
+     *     "key":"Align Items",
+     *     "prefix":"items",
+     *     "type":"select",
+     *     "options":[
+     *       {"key":"start","label":"Start"},
+     *       {"key":"center","label":"Center"},
+     *       {"key":"end","label":"End"},
+     *       {"key":"stretch","label":"Stretch"}
+     *     ]
+     *   },
+     *   {
+     *     "key":"Justify Items",
+     *     "prefix":"justify-items",
+     *     "type":"select",
+     *     "options":[
+     *       {"key":"start","label":"Start"},
+     *       {"key":"center","label":"Center"},
+     *       {"key":"end","label":"End"},
+     *       {"key":"stretch","label":"Stretch"}
+     *     ]
+     *   },
+     *   {
+     *     "key":"Auto Flow",
+     *     "prefix":"grid-flow",
+     *     "type":"select",
+     *     "options":[
+     *       {"key":"row","label":"Row"},
+     *       {"key":"col","label":"Column"},
+     *       {"key":"dense","label":"Dense"},
+     *       {"key":"row-dense","label":"Row Dense"},
+     *       {"key":"col-dense","label":"Column Dense"}
+     *     ]
+     *   },
+     *   {
+     *     "key":"Width",
+     *     "prefix":"w",
+     *     "type":"select",
+     *     "options":[
+     *       {"key":"auto","label":"Auto"},
+     *       {"key":"full","label":"Full Width"},
+     *       {"key":"screen","label":"Screen"}
+     *     ]
+     *   },
+     *   {
+     *     "key":"Padding",
+     *     "prefix":"p",
+     *     "type":"select",
+     *     "options":[
+     *       {"key":"0","label":"None"},
+     *       {"key":"2","label":"Small"},
+     *       {"key":"4","label":"Medium"},
+     *       {"key":"6","label":"Large"},
+     *       {"key":"8","label":"Extra Large"},
+     *       {"key":"12","label":"2XL"}
+     *     ]
+     *   }
      * ]
-     * },{
-     * "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({ className, children, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;
+export default function Grid({ children, as, className, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;

package/components/Grid/index.js

@@ -1,11 +1,11 @@
 import "react";
 import { jsx as e } from "react/jsx-runtime";
 //#region src/components/Grid/index.tsx
-function t({ className: t = "", children: n, ...r }) {
-	return /* @__PURE__ */ e("div", {
-		className: `grid w-full ${t}`.trim(),
-		...r,
-		children: n
+function t({ children: t, as: n = "div", className: r = "", ...i }) {
+	return /* @__PURE__ */ e(n, {
+		...i,
+		className: ["grid", r].filter(Boolean).join(" "),
+		children: t
 	});
 }
 //#endregion

package/components/ScrollArea/index.d.ts

@@ -0,0 +1,104 @@
+import { default as React } from 'react';
+export type ScrollAreaElement = "div" | "section" | "article" | "aside";
+export interface ScrollAreaProps extends Omit<React.HTMLAttributes<HTMLElement>, "children" | "className"> {
+    children?: React.ReactNode;
+    /** @select|div|section|article|aside */
+    as?: ScrollAreaElement;
+    /**
+     * @type|class
+     * @schema [
+     *   {
+     *     "key":"Overflow X",
+     *     "prefix":"overflow-x",
+     *     "type":"select",
+     *     "options":[
+     *       {"key":"auto","label":"Auto"},
+     *       {"key":"scroll","label":"Scroll"},
+     *       {"key":"hidden","label":"Hidden"},
+     *       {"key":"visible","label":"Visible"}
+     *     ]
+     *   },
+     *   {
+     *     "key":"Overflow Y",
+     *     "prefix":"overflow-y",
+     *     "type":"select",
+     *     "options":[
+     *       {"key":"auto","label":"Auto"},
+     *       {"key":"scroll","label":"Scroll"},
+     *       {"key":"hidden","label":"Hidden"},
+     *       {"key":"visible","label":"Visible"}
+     *     ]
+     *   },
+     *   {
+     *     "key":"Width",
+     *     "prefix":"w",
+     *     "type":"select",
+     *     "options":[
+     *       {"key":"auto","label":"Auto"},
+     *       {"key":"full","label":"Full Width"},
+     *       {"key":"screen","label":"Screen"}
+     *     ]
+     *   },
+     *   {
+     *     "key":"Height",
+     *     "prefix":"h",
+     *     "type":"select",
+     *     "options":[
+     *       {"key":"auto","label":"Auto"},
+     *       {"key":"32","label":"Small"},
+     *       {"key":"48","label":"Medium"},
+     *       {"key":"64","label":"Large"},
+     *       {"key":"96","label":"Extra Large"},
+     *       {"key":"full","label":"Full Height"},
+     *       {"key":"screen","label":"Screen"}
+     *     ]
+     *   },
+     *   {
+     *     "key":"Max Height",
+     *     "prefix":"max-h",
+     *     "type":"select",
+     *     "options":[
+     *       {"key":"32","label":"Small"},
+     *       {"key":"48","label":"Medium"},
+     *       {"key":"64","label":"Large"},
+     *       {"key":"96","label":"Extra Large"},
+     *       {"key":"screen","label":"Screen"}
+     *     ]
+     *   },
+     *   {
+     *     "key":"Padding",
+     *     "prefix":"p",
+     *     "type":"select",
+     *     "options":[
+     *       {"key":"0","label":"None"},
+     *       {"key":"2","label":"Small"},
+     *       {"key":"4","label":"Medium"},
+     *       {"key":"6","label":"Large"},
+     *       {"key":"8","label":"Extra Large"}
+     *     ]
+     *   },
+     *   {
+     *     "key":"Scroll Snap",
+     *     "prefix":"snap",
+     *     "type":"select",
+     *     "options":[
+     *       {"key":"none","label":"None"},
+     *       {"key":"x","label":"Horizontal"},
+     *       {"key":"y","label":"Vertical"},
+     *       {"key":"both","label":"Both"}
+     *     ]
+     *   },
+     *   {
+     *     "key":"Scroll Behavior",
+     *     "prefix":"scroll",
+     *     "type":"select",
+     *     "options":[
+     *       {"key":"auto","label":"Auto"},
+     *       {"key":"smooth","label":"Smooth"}
+     *     ]
+     *   }
+     * ]
+     */
+    className?: string;
+}
+export default function ScrollArea({ children, as, className, ...props }: ScrollAreaProps): import("react/jsx-runtime").JSX.Element;

package/components/ScrollArea/index.js

@@ -0,0 +1,12 @@
+import "react";
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/ScrollArea/index.tsx
+function t({ children: t, as: n = "div", className: r = "", ...i }) {
+	return /* @__PURE__ */ e(n, {
+		...i,
+		className: ["overflow-auto", r].filter(Boolean).join(" "),
+		children: t
+	});
+}
+//#endregion
+export { t as default };

package/components/Section/index.d.ts

@@ -0,0 +1,111 @@
+import { default as React } from 'react';
+export type SectionElement = "section" | "div" | "main" | "article" | "aside";
+export interface SectionProps extends Omit<React.HTMLAttributes<HTMLElement>, "children" | "className"> {
+    children?: React.ReactNode;
+    /** @select|section|div|main|article|aside */
+    as?: SectionElement;
+    /**
+     * @type|class
+     * @schema [
+     *   {
+     *     "key":"Width",
+     *     "prefix":"w",
+     *     "type":"select",
+     *     "options":[
+     *       {"key":"auto","label":"Auto"},
+     *       {"key":"full","label":"Full Width"},
+     *       {"key":"screen","label":"Screen"}
+     *     ]
+     *   },
+     *   {
+     *     "key":"Min Height",
+     *     "prefix":"min-h",
+     *     "type":"select",
+     *     "options":[
+     *       {"key":"0","label":"None"},
+     *       {"key":"full","label":"Full"},
+     *       {"key":"screen","label":"Screen"}
+     *     ]
+     *   },
+     *   {
+     *     "key":"Padding X",
+     *     "prefix":"px",
+     *     "type":"select",
+     *     "options":[
+     *       {"key":"0","label":"None"},
+     *       {"key":"2","label":"Small"},
+     *       {"key":"4","label":"Medium"},
+     *       {"key":"6","label":"Large"},
+     *       {"key":"8","label":"Extra Large"},
+     *       {"key":"12","label":"2XL"},
+     *       {"key":"16","label":"3XL"}
+     *     ]
+     *   },
+     *   {
+     *     "key":"Padding Y",
+     *     "prefix":"py",
+     *     "type":"select",
+     *     "options":[
+     *       {"key":"0","label":"None"},
+     *       {"key":"2","label":"Small"},
+     *       {"key":"4","label":"Medium"},
+     *       {"key":"6","label":"Large"},
+     *       {"key":"8","label":"Extra Large"},
+     *       {"key":"12","label":"2XL"},
+     *       {"key":"16","label":"3XL"},
+     *       {"key":"20","label":"4XL"},
+     *       {"key":"24","label":"5XL"}
+     *     ]
+     *   },
+     *   {
+     *     "key":"Background",
+     *     "prefix":"bg",
+     *     "type":"select",
+     *     "options":[
+     *       {"key":"transparent","label":"Transparent"},
+     *       {"key":"white","label":"White"},
+     *       {"key":"gray-50","label":"Gray 50"},
+     *       {"key":"gray-100","label":"Gray 100"},
+     *       {"key":"gray-900","label":"Gray 900"},
+     *       {"key":"black","label":"Black"}
+     *     ]
+     *   },
+     *   {
+     *     "key":"Text Color",
+     *     "prefix":"text",
+     *     "type":"select",
+     *     "options":[
+     *       {"key":"gray-900","label":"Dark"},
+     *       {"key":"gray-700","label":"Gray"},
+     *       {"key":"white","label":"White"},
+     *       {"key":"black","label":"Black"}
+     *     ]
+     *   },
+     *   {
+     *     "key":"Overflow",
+     *     "prefix":"overflow",
+     *     "type":"select",
+     *     "options":[
+     *       {"key":"visible","label":"Visible"},
+     *       {"key":"hidden","label":"Hidden"},
+     *       {"key":"auto","label":"Auto"},
+     *       {"key":"scroll","label":"Scroll"}
+     *     ]
+     *   },
+     *   {
+     *     "key":"Position",
+     *     "prefix":"",
+     *     "type":"select",
+     *     "options":[
+     *       {"key":"static","label":"Static"},
+     *       {"key":"relative","label":"Relative"},
+     *       {"key":"absolute","label":"Absolute"},
+     *       {"key":"fixed","label":"Fixed"},
+     *       {"key":"sticky","label":"Sticky"}
+     *     ]
+     *   }
+     * ]
+     */
+    className?: string;
+}
+export default function Section({ children, as, className, ...props }: SectionProps): import("react/jsx-runtime").JSX.Element;

package/components/Section/index.js

@@ -0,0 +1,12 @@
+import "react";
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/Section/index.tsx
+function t({ children: t, as: n = "section", className: r = "", ...i }) {
+	return /* @__PURE__ */ e(n, {
+		...i,
+		className: ["w-full", r].filter(Boolean).join(" "),
+		children: t
+	});
+}
+//#endregion
+export { t as default };

package/components/Stack/index.d.ts

@@ -1,57 +1,26 @@
 import { default as React } from 'react';
-export interface StackProps extends React.HTMLAttributes<HTMLDivElement> {
+export type StackElement = "div" | "section" | "article" | "main" | "aside" | "nav";
+export type StackDirection = "vertical" | "horizontal";
+export type StackGap = "0" | "1" | "2" | "3" | "4" | "6" | "8" | "10" | "12";
+export type StackAlign = "start" | "center" | "end" | "stretch" | "baseline";
+export type StackJustify = "start" | "center" | "end" | "between" | "around" | "evenly";
+export interface StackProps extends Omit<React.HTMLAttributes<HTMLElement>, "children" | "className"> {
     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"}
-     * ]
-     * }]
+    /** @select|div|section|article|main|aside|nav */
+    as?: StackElement;
+    /** @select|vertical|horizontal */
+    direction?: StackDirection;
+    /** @select|0|1|2|3|4|6|8|10|12 */
+    gap?: StackGap;
+    /** @select|start|center|end|stretch|baseline */
+    align?: StackAlign;
+    /** @select|start|center|end|between|around|evenly */
+    justify?: StackJustify;
+    wrap?: boolean;
+    /**
+     * @type|class
+     * @schema [{"key":"Width","prefix":"w","type":"select","options":[{"key":"auto","label":"Auto"},{"key":"full","label":"Full Width"},{"key":"screen","label":"Screen"}]},{"key":"Height","prefix":"h","type":"select","options":[{"key":"auto","label":"Auto"},{"key":"full","label":"Full Height"},{"key":"screen","label":"Screen"}]},{"key":"Padding","prefix":"p","type":"select","options":[{"key":"0","label":"None"},{"key":"2","label":"Small"},{"key":"4","label":"Medium"},{"key":"6","label":"Large"},{"key":"8","label":"Extra Large"},{"key":"12","label":"2XL"}]},{"key":"Background","prefix":"bg","type":"select","options":[{"key":"transparent","label":"Transparent"},{"key":"white","label":"White"},{"key":"gray-50","label":"Gray 50"},{"key":"gray-100","label":"Gray 100"},{"key":"gray-900","label":"Gray 900"},{"key":"black","label":"Black"}]}]
      */
     className?: string;
 }
-export default function Stack({ className, children, ...props }: StackProps): import("react/jsx-runtime").JSX.Element;
+export default function Stack({ children, as, direction, gap, align, justify, wrap, className, ...props }: StackProps): import("react/jsx-runtime").JSX.Element;

package/components/Stack/index.js

@@ -1,12 +1,48 @@
 import "react";
 import { jsx as e } from "react/jsx-runtime";
 //#region src/components/Stack/index.tsx
-function t({ className: t = "", children: n, ...r }) {
-	return /* @__PURE__ */ e("div", {
-		className: `flex w-full ${t}`.trim(),
-		...r,
-		children: n
+var t = {
+	vertical: "flex-col",
+	horizontal: "flex-row"
+}, n = {
+	0: "gap-0",
+	1: "gap-1",
+	2: "gap-2",
+	3: "gap-3",
+	4: "gap-4",
+	6: "gap-6",
+	8: "gap-8",
+	10: "gap-10",
+	12: "gap-12"
+}, r = {
+	start: "items-start",
+	center: "items-center",
+	end: "items-end",
+	stretch: "items-stretch",
+	baseline: "items-baseline"
+}, i = {
+	start: "justify-start",
+	center: "justify-center",
+	end: "justify-end",
+	between: "justify-between",
+	around: "justify-around",
+	evenly: "justify-evenly"
+};
+function a({ children: a, as: o = "div", direction: s = "vertical", gap: c = "4", align: l = "stretch", justify: u = "start", wrap: d = !1, className: f = "", ...p }) {
+	let m = o, h = [
+		"flex",
+		t[s],
+		n[c],
+		r[l],
+		i[u],
+		d ? "flex-wrap" : "flex-nowrap",
+		f
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ e(m, {
+		...p,
+		className: h,
+		children: a
 	});
 }
 //#endregion
-export { t as default };
+export { a as default };

package/index.d.ts

@@ -1,16 +1,26 @@
+export type { AspectRatioElement, AspectRatioProps } from './components/AspectRatio';
+export { default as AspectRatio } from './components/AspectRatio';
 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 { ContainerElement, ContainerMaxWidth, ContainerProps } from './components/Container';
+export { default as Container } from './components/Container';
 export type { RepeaterCarouselProps } from './components/DataCarousel';
 export { default as RepeaterCarousel } from './components/DataCarousel';
-export type { GridProps } from './components/Grid';
+export type { FlexElement, FlexProps } from './components/Flex';
+export { default as Flex } from './components/Flex';
+export type { GridElement, GridProps } from './components/Grid';
 export { default as Grid } from './components/Grid';
 export type { RepeaterProps } from './components/Repeater';
 export { default as Repeater } from './components/Repeater';
 export type { RepeaterTableProps } from './components/RepeaterTable';
 export { default as RepeaterTable } from './components/RepeaterTable';
-export type { StackProps } from './components/Stack';
+export type { ScrollAreaElement, ScrollAreaProps } from './components/ScrollArea';
+export { default as ScrollArea } from './components/ScrollArea';
+export type { SectionElement, SectionProps } from './components/Section';
+export { default as Section } from './components/Section';
+export type { StackAlign, StackDirection, StackElement, StackGap, StackJustify, StackProps } from './components/Stack';
 export { default as Stack } from './components/Stack';
 export type { ComplexGridProps } from './components/StructuredGrid';
 export { default as ComplexGrid } from './components/StructuredGrid';

package/index.js

@@ -1,13 +1,15 @@
-/* empty css       */
-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: }.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){}
+import e from "./components/AspectRatio/index.js";
+import t from "./components/Box/index.js";
+import n from "./components/Carousel/index.js";
+import r from "./components/Container/index.js";
+import i from "./components/DataCarousel/index.js";
+import a from "./components/Flex/index.js";
+import o from "./components/Grid/index.js";
+import s from "./components/Repeater/index.js";
+import c from "./components/RepeaterTable/index.js";
+import l from "./components/ScrollArea/index.js";
+import u from "./components/Section/index.js";
+import d from "./components/Stack/index.js";
+import f from "./components/StructuredGrid/index.js";
+import p from "./components/Table/index.js";
+export { e as AspectRatio, t as Box, f as ComplexGrid, r as Container, p as DataTable, a as Flex, o as Grid, s as Repeater, i as RepeaterCarousel, c as RepeaterTable, n as RudraCarousel, l as ScrollArea, u as Section, d as Stack };

package/package.json

@@ -12,7 +12,7 @@
     "autoprefixer": "^10.4.0",
     "postcss": "^8.4.0",
     "sass": "^1.72.0",
-    "tailwindcss": "^3.4.0"
+    "tailwindcss": "^4.0.0"
   },
   "exports": {
     ".": {
@@ -32,7 +32,7 @@
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "tailwindcss": ">=3.0.0"
+    "tailwindcss": "^4.0.0"
   },
   "publishConfig": {
     "access": "public"
@@ -42,5 +42,5 @@
   },
   "types": "./index.d.ts",
   "unpkg": "./index.umd.js",
-  "version": "1.0.16"
+  "version": "1.0.18"
 }