linkedunion-design-kit 1.9.6-beta.0 → 1.9.6-beta.1

package/dist/build/types/validator.js

@@ -0,0 +1,12 @@
+// This file is generated automatically by Next.js
+// Do not edit this file manually
+// This file validates that all pages and layouts export the correct types
+// Validate ../../app/page.tsx
+{
+    var handler = {};
+}
+// Validate ../../app/layout.tsx
+{
+    var handler = {};
+}
+export {};

package/dist/index.d.ts

@@ -29,3 +29,5 @@ export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuIte
 export { Badge } from "./src/components/Badge/Badge";
 export { default as Combobox } from "./src/components/Dropdown/Combobox/Combobox";
 export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis, } from "./src/components/Pagination/pagination";
+export { Skeleton } from "./src/components/Skeleton/skeleton";
+export { Tabs as VerticalTabs, TabsContent as VerticalTabsContent, TabsList as VerticalTabsList, tabSizes as verticalTabsSize, TabsTrigger as VerticalTabsTrigger, TabsHeading as VerticalTabsHeading, } from "./src/components/VerticalTabs/VerticalTabs";

package/dist/index.js

@@ -29,3 +29,5 @@ export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuIte
 export { Badge } from "./src/components/Badge/Badge";
 export { default as Combobox } from "./src/components/Dropdown/Combobox/Combobox";
 export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis, } from "./src/components/Pagination/pagination";
+export { Skeleton } from "./src/components/Skeleton/skeleton";
+export { Tabs as VerticalTabs, TabsContent as VerticalTabsContent, TabsList as VerticalTabsList, tabSizes as verticalTabsSize, TabsTrigger as VerticalTabsTrigger, TabsHeading as VerticalTabsHeading, } from "./src/components/VerticalTabs/VerticalTabs";

package/dist/src/components/Badge/Badge.stories.d.ts

@@ -56,8 +56,8 @@ declare const meta: {
         shape: {
             control: {
                 type: "select";
-                options: string[];
             };
+            options: string[];
             description: string;
             table: {
                 type: {

package/dist/src/components/Badge/Badge.stories.js

@@ -54,8 +54,8 @@ var meta = {
         shape: {
             control: {
                 type: "select",
-                options: Object.keys(badgeStyles.shape),
             },
+            options: Object.keys(badgeStyles.shape),
             description: "The shape of the badge.",
             table: {
                 type: { summary: "string" },

package/dist/src/components/Button/Button/Button.module.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
 .rounded-sm {
   border-radius: var(--radius-sm, 0.25rem);
 }

package/dist/src/components/Card/MultipleNews/MultiNews.js

@@ -35,12 +35,12 @@ export var MultipleNewsCard = function (props) {
     };
     // Horizontal layout
     if (orientation === "horizontal") {
-        return (_jsxs("div", { className: "!p-5 bg-white rounded-2xl flex ".concat(mediaPosition === "right" ? "flex-row-reverse" : "", " !gap-5 items-center shadow-lg ").concat(editor === null || editor === void 0 ? void 0 : editor.card), children: [_jsx(CardMedia, { className: "max-w-48 aspect-square rounded-lg" }), _jsxs("div", { className: "flex flex-col !gap-5 w-full", children: [_jsx(CardContent, {}), _jsx(ActionButton, {})] })] }));
+        return (_jsxs("div", { className: "!p-5 bg-white rounded-2xl flex max-sm:flex-col ".concat(mediaPosition === "right" ? "flex-row-reverse" : "", " !gap-5 items-center shadow-lg ").concat(editor === null || editor === void 0 ? void 0 : editor.card), children: [_jsx(CardMedia, { className: "w-full sm:max-w-48 aspect-square rounded-lg" }), _jsxs("div", { className: "flex flex-col !gap-5 w-full", children: [_jsx(CardContent, {}), _jsx(ActionButton, {})] })] }));
     }
     // Vertical layout
     return (_jsxs("div", { className: "!p-4 bg-white rounded-2xl flex flex-col !gap-5 max-w-md shadow-lg ".concat(editor === null || editor === void 0 ? void 0 : editor.card), children: [_jsxs("div", { className: "flex ".concat(mediaPosition === "top" ? "flex-col" : "flex-col-reverse", " !gap-4"), children: [mediaPosition === "middle" && (_jsx(Body, { variant: "body-lg", className: "text-gray-600 line-clamp-2  h-14 ".concat(editor === null || editor === void 0 ? void 0 : editor.cardText), dangerouslySetInnerHTML: {
                             __html: item.description || "",
-                        } })), _jsx(CardMedia, { className: "aspect-16/10" }), _jsxs("div", { className: "flex flex-col !gap-1", children: [_jsx(Heading, { variant: "h4-700", className: "line-clamp-1 capitalize ".concat(editor === null || editor === void 0 ? void 0 : editor.cardTitle), children: item === null || item === void 0 ? void 0 : item.title }), (item === null || item === void 0 ? void 0 : item.short_description) && (_jsx(Body, { variant: mediaPosition === "middle" ? "body-lg-500" : "body-xl", className: "".concat(item.description ? "line-clamp-1 text-gray-600" : "line-clamp-2 h-14 text-gray-600", "   ").concat(editor === null || editor === void 0 ? void 0 : editor.shortDescription), children: item === null || item === void 0 ? void 0 : item.short_description })), mediaPosition !== "middle" && (_jsx(Body, { variant: "body-lg", className: "text-gray-600 line-clamp-2 ".concat(editor === null || editor === void 0 ? void 0 : editor.cardText), dangerouslySetInnerHTML: {
+                        } })), _jsx(CardMedia, { className: "aspect-16/10" }), _jsxs("div", { className: "flex flex-col !gap-1", children: [_jsx(Heading, { variant: "h4-700", className: "line-clamp-1 capitalize ".concat(editor === null || editor === void 0 ? void 0 : editor.cardTitle), children: item === null || item === void 0 ? void 0 : item.title }), (item === null || item === void 0 ? void 0 : item.short_description) && (_jsx(Body, { variant: mediaPosition === "middle" ? "body-lg-500" : "body-xl", className: "".concat(item.description || mediaPosition === "middle" ? "line-clamp-1 text-gray-600" : "line-clamp-2 h-14 text-gray-600", "   ").concat(editor === null || editor === void 0 ? void 0 : editor.shortDescription), children: item === null || item === void 0 ? void 0 : item.short_description })), mediaPosition !== "middle" && (_jsx(Body, { variant: "body-lg", className: "text-gray-600 line-clamp-2 ".concat(editor === null || editor === void 0 ? void 0 : editor.cardText), dangerouslySetInnerHTML: {
                                     __html: item.description || "",
                                 } }))] })] }), _jsx(ActionButton, {})] }));
 };

package/dist/src/components/Pagination/pagination.js

@@ -27,22 +27,22 @@ import { buttonVariants } from "../Button/Button/Button";
 import LUIcon from "../Icons/LUIcon";
 var Pagination = function (_a) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("nav", __assign({ role: "navigation", "aria-label": "pagination", className: cn("mx-auto flex w-full justify-center", className) }, props)));
+    return (_jsx("nav", __assign({ role: "navigation", "aria-label": "pagination", "data-slot": "pagination", className: cn("mx-auto flex w-full justify-center", className) }, props)));
 };
 Pagination.displayName = "Pagination";
 var PaginationContent = React.forwardRef(function (_a, ref) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("ul", __assign({ ref: ref, className: cn("flex flex-row items-center gap-1", className) }, props)));
+    return (_jsx("ul", __assign({ ref: ref, "data-slot": "pagination", className: cn("flex flex-row items-center gap-1", className) }, props)));
 });
 PaginationContent.displayName = "PaginationContent";
 var PaginationItem = React.forwardRef(function (_a, ref) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("li", __assign({ ref: ref, className: cn("", className) }, props)));
+    return (_jsx("li", __assign({ ref: ref, "data-slot": "pagination", className: cn("", className) }, props)));
 });
 PaginationItem.displayName = "PaginationItem";
 var PaginationLink = function (_a) {
     var className = _a.className, isActive = _a.isActive, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.color, color = _c === void 0 ? "gray" : _c, _d = _a.variant, variant = _d === void 0 ? "ghost" : _d, props = __rest(_a, ["className", "isActive", "size", "color", "variant"]);
-    return (_jsx("a", __assign({ "aria-current": isActive ? "page" : undefined, className: cn(buttonVariants({
+    return (_jsx("a", __assign({ "aria-current": isActive ? "page" : undefined, "data-slot": "pagination", className: cn(buttonVariants({
             variant: isActive ? (variant === "link" ? variant : "fill") : variant,
             size: size,
             color: color,
@@ -51,18 +51,18 @@ var PaginationLink = function (_a) {
 PaginationLink.displayName = "PaginationLink";
 var PaginationPrevious = function (_a) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsxs(PaginationLink, __assign({ "aria-label": "Go to previous page", size: "md", className: cn("gap-1 pl-2.5", className) }, props, { children: [_jsx(LUIcon, { icon: "arrow-left" }), _jsx("span", { children: "Previous" })] })));
+    return (_jsxs(PaginationLink, __assign({ "aria-label": "Go to previous page", size: "md", "data-slot": "pagination", className: cn("gap-1 pl-2.5", className) }, props, { children: [_jsx(LUIcon, { icon: "arrow-left" }), _jsx("span", { children: "Previous" })] })));
 };
 PaginationPrevious.displayName = "PaginationPrevious";
 var PaginationNext = function (_a) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsxs(PaginationLink, __assign({ "aria-label": "Go to next page", size: "md", className: cn("gap-1 pr-2.5", className) }, props, { children: [_jsx("span", { children: "Next" }), _jsx(LUIcon, { icon: "arrow-right" })] })));
+    return (_jsxs(PaginationLink, __assign({ "aria-label": "Go to next page", size: "md", "data-slot": "pagination", className: cn("gap-1 pr-2.5", className) }, props, { children: [_jsx("span", { children: "Next" }), _jsx(LUIcon, { icon: "arrow-right" })] })));
 };
 PaginationNext.displayName = "PaginationNext";
 var PaginationEllipsis = function (_a) {
     var color = _a.color, props = __rest(_a, ["color"]);
     return (_jsxs(_Fragment, { children: [_jsx(LUIcon, __assign({ icon: "ellipsis-horizontal" // Always use ellipsis-horizontal
-                , color: color }, props)), _jsx("span", { className: "sr-only", children: "More pages" })] }));
+                , color: color, "data-slot": "pagination" }, props)), _jsx("span", { className: "sr-only", children: "More pages" })] }));
 };
 PaginationEllipsis.displayName = "PaginationEllipsis";
 export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis, };

package/dist/src/components/Skeleton/skeleton.stories.d.ts

@@ -1,7 +1,9 @@
 import { Meta } from "@storybook/react";
+declare const SKELETON_VARIANTS: string[];
+type SkeletonVariant = (typeof SKELETON_VARIANTS)[number];
 interface SkeletonStoryArgs {
     className?: string;
-    variant?: "default" | "button" | "input" | "avatar" | "badge" | "card" | "tableRow" | "checkbox" | "switch" | "select" | "icon" | "text" | "heading" | "image";
+    variant?: SkeletonVariant;
     size?: string;
     columns?: number;
     lines?: number;

package/dist/src/components/Skeleton/skeleton.stories.js

@@ -18,6 +18,25 @@ import { comboboxSizes } from "../Dropdown/Combobox";
 import { iconSize as LUIconSizes } from "../Icons";
 import { checkboxSize } from "../Checkbox/checkbox";
 import { size as SwitchSizes } from "../Switch/switch";
+import { Body } from "../Typography/Body/body";
+import { Heading } from "../Typography/Heading/heading";
+// Dynamically define Skeleton variants
+var SKELETON_VARIANTS = [
+    "default",
+    "button",
+    "input",
+    "avatar",
+    "badge",
+    "card",
+    "tableRow",
+    "checkbox",
+    "switch",
+    "select",
+    "icon",
+    "text",
+    "heading",
+    "image",
+];
 var meta = {
     title: "Components/Skeleton",
     component: Skeleton,
@@ -44,22 +63,7 @@ var meta = {
     argTypes: {
         variant: {
             control: { type: "select" },
-            options: [
-                "default",
-                "button",
-                "input",
-                "avatar",
-                "badge",
-                "card",
-                "tableRow",
-                "checkbox",
-                "switch",
-                "select",
-                "icon",
-                "text",
-                "heading",
-                "image",
-            ],
+            options: SKELETON_VARIANTS,
             description: "Select the skeleton component variant",
             table: {
                 defaultValue: { summary: "default" },
@@ -127,17 +131,20 @@ var meta = {
     decorators: [
         function (Story, context) {
             var currentVariant = context.args.variant;
-            var variantsWithSize = [
-                "button",
-                "avatar",
-                "badge",
-                "input",
-                "tableRow",
-                "select",
-                "icon",
-                "text",
-                "heading",
-            ];
+            // Dynamically determine which variants support size
+            var variantsWithSize = SKELETON_VARIANTS.filter(function (v) {
+                return [
+                    "button",
+                    "avatar",
+                    "badge",
+                    "input",
+                    "tableRow",
+                    "select",
+                    "icon",
+                    "text",
+                    "heading",
+                ].includes(v);
+            });
             if (context.argTypes && context.argTypes.size) {
                 // Hide size control for variants that don't support it
                 if (!variantsWithSize.includes(currentVariant !== null && currentVariant !== void 0 ? currentVariant : "")) {
@@ -277,7 +284,7 @@ var Template = function (args) {
 };
 export var Default = Template.bind({});
 // Button Skeletons - All Sizes
-export var ButtonSkeletons = function () { return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Button Skeleton Sizes" }), _jsx("div", { className: "flex flex-col gap-4", children: Object.keys(buttonStyles.size).map(function (size) { return (_jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: size.toUpperCase() }), _jsx(Skeleton.Button, { size: size })] }, size)); }) })] }), _jsxs("div", { children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Custom Width" }), _jsx(Skeleton.Button, { className: "w-64" })] })] })); };
+export var ButtonSkeletons = function () { return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx(Heading, { variant: "h4", children: "Button Skeleton Sizes" }), _jsx("div", { className: "flex flex-col gap-4", children: Object.keys(buttonStyles.size).map(function (size) { return (_jsxs("div", { children: [_jsx("p", { children: size.toUpperCase() }), _jsx(Skeleton.Button, { size: size })] }, size)); }) })] }), _jsxs("div", { children: [_jsx(Heading, { variant: "h4", children: "Custom Width" }), _jsx(Skeleton.Button, { className: "w-64" })] })] })); };
 ButtonSkeletons.parameters = {
     docs: {
         description: {
@@ -286,7 +293,7 @@ ButtonSkeletons.parameters = {
     },
 };
 // Input Skeletons - All Sizes
-export var InputSkeletons = function () { return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Small Input" }), _jsx(Skeleton.Input, { size: "sm" })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Medium Input" }), _jsx(Skeleton.Input, { size: "md" })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Large Input (Default)" }), _jsx(Skeleton.Input, { size: "lg" })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Custom Width" }), _jsx(Skeleton.Input, { className: "w-1/2" })] })] })); };
+export var InputSkeletons = function () { return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx(Body, { children: "Small Input" }), _jsx(Skeleton.Input, { size: "sm" })] }), _jsxs("div", { children: [_jsx(Body, { children: "Medium Input" }), _jsx(Skeleton.Input, { size: "md" })] }), _jsxs("div", { children: [_jsx(Body, { children: "Large Input (Default)" }), _jsx(Skeleton.Input, { size: "lg" })] }), _jsxs("div", { children: [_jsx(Body, { children: "Custom Width" }), _jsx(Skeleton.Input, { className: "w-1/2" })] })] })); };
 InputSkeletons.parameters = {
     docs: {
         description: {
@@ -295,7 +302,10 @@ InputSkeletons.parameters = {
     },
 };
 // Avatar Skeletons - All Sizes
-export var AvatarSkeletons = function () { return (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "flex items-center gap-4 flex-wrap", children: ["4xs", "3xs", "2xs", "xs", "sm", "md", "lg", "xl"].map(function (size) { return (_jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx(Skeleton.Avatar, { size: size }), _jsx("span", { className: "text-xs text-gray-500", children: size })] }, size)); }) }), _jsx("div", { className: "flex items-center gap-4 flex-wrap", children: ["2xl", "3xl", "4xl", "5xl", "huge", "massive"].map(function (size) { return (_jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx(Skeleton.Avatar, { size: size }), _jsx("span", { className: "text-xs text-gray-500", children: size })] }, size)); }) })] })); };
+export var AvatarSkeletons = function () {
+    var allAvatarSizes = Object.keys(avatarSize);
+    return (_jsx("div", { className: "space-y-4", children: _jsx("div", { className: "flex items-center gap-4 flex-wrap", children: allAvatarSizes.map(function (size) { return (_jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx(Skeleton.Avatar, { size: size }), _jsx("span", { className: "text-xs text-gray-500", children: size })] }, size)); }) }) }));
+};
 AvatarSkeletons.parameters = {
     docs: {
         description: {
@@ -304,7 +314,7 @@ AvatarSkeletons.parameters = {
     },
 };
 // Badge Skeletons - All Sizes
-export var BadgeSkeletons = function () { return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Small Badge" }), _jsx(Skeleton.Badge, { size: "sm" })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Medium Badge (Default)" }), _jsx(Skeleton.Badge, { size: "md" })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Large Badge" }), _jsx(Skeleton.Badge, { size: "lg" })] })] })); };
+export var BadgeSkeletons = function () { return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx(Body, { children: "Small Badge" }), _jsx(Skeleton.Badge, { size: "sm" })] }), _jsxs("div", { children: [_jsx(Body, { children: "Medium Badge (Default)" }), _jsx(Skeleton.Badge, { size: "md" })] }), _jsxs("div", { children: [_jsx(Body, { children: "Large Badge" }), _jsx(Skeleton.Badge, { size: "lg" })] })] })); };
 BadgeSkeletons.parameters = {
     docs: {
         description: {
@@ -313,7 +323,7 @@ BadgeSkeletons.parameters = {
     },
 };
 // Card Skeleton
-export var CardSkeleton = function () { return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Default Card Skeleton" }), _jsx(Skeleton.Card, {})] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Custom Height" }), _jsx(Skeleton.Card, { className: "h-64" })] })] })); };
+export var CardSkeleton = function () { return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx(Body, { children: "Default Card Skeleton" }), _jsx(Skeleton.Card, {})] }), _jsxs("div", { children: [_jsx(Body, { children: "Custom Height" }), _jsx(Skeleton.Card, { className: "h-64" })] })] })); };
 CardSkeleton.parameters = {
     docs: {
         description: {
@@ -322,7 +332,7 @@ CardSkeleton.parameters = {
     },
 };
 // Table Row Skeletons
-export var TableRowSkeletons = function () { return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "3 Columns - Small" }), _jsx(Skeleton.TableRow, { columns: 3, size: "sm" })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "4 Columns - Medium" }), _jsx(Skeleton.TableRow, { columns: 4, size: "md" })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "5 Columns - Large" }), _jsx(Skeleton.TableRow, { columns: 5, size: "lg" })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Full Table Example" }), _jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton.TableRow, { columns: 4, size: "md" }), _jsx(Skeleton.TableRow, { columns: 4, size: "md" }), _jsx(Skeleton.TableRow, { columns: 4, size: "md" })] })] })] })); };
+export var TableRowSkeletons = function () { return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx(Body, { children: "3 Columns - Small" }), _jsx(Skeleton.TableRow, { columns: 3, size: "sm" })] }), _jsxs("div", { children: [_jsx(Body, { children: "4 Columns - Medium" }), _jsx(Skeleton.TableRow, { columns: 4, size: "md" })] }), _jsxs("div", { children: [_jsx(Body, { children: "5 Columns - Large" }), _jsx(Skeleton.TableRow, { columns: 5, size: "lg" })] }), _jsxs("div", { children: [_jsx(Body, { children: "Full Table Example" }), _jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton.TableRow, { columns: 4, size: "md" }), _jsx(Skeleton.TableRow, { columns: 4, size: "md" }), _jsx(Skeleton.TableRow, { columns: 4, size: "md" })] })] })] })); };
 TableRowSkeletons.parameters = {
     docs: {
         description: {
@@ -331,7 +341,7 @@ TableRowSkeletons.parameters = {
     },
 };
 // Form Elements Skeletons
-export var FormElementsSkeletons = function () { return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Checkbox" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Skeleton.Checkbox, {}), _jsx(Skeleton, { className: "h-4 w-24" })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Switch" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Skeleton.Switch, {}), _jsx(Skeleton, { className: "h-4 w-32" })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Select/Dropdown" }), _jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton.Select, { size: "sm" }), _jsx(Skeleton.Select, { size: "md" }), _jsx(Skeleton.Select, { size: "lg" })] })] })] })); };
+export var FormElementsSkeletons = function () { return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx(Heading, { variant: "h4", children: "Checkbox" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Skeleton.Checkbox, {}), _jsx(Skeleton, { className: "h-4 w-24" })] })] }), _jsxs("div", { children: [_jsx(Heading, { variant: "h4", children: "Switch" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Skeleton.Switch, {}), _jsx(Skeleton, { className: "h-4 w-32" })] })] }), _jsxs("div", { children: [_jsx(Heading, { variant: "h4", children: "Select/Dropdown" }), _jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton.Select, { size: "sm" }), _jsx(Skeleton.Select, { size: "md" }), _jsx(Skeleton.Select, { size: "lg" })] })] })] })); };
 FormElementsSkeletons.parameters = {
     docs: {
         description: {
@@ -349,7 +359,7 @@ IconSkeletons.parameters = {
     },
 };
 // Text Skeletons
-export var TextSkeletons = function () { return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Text Sizes" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Extra Small (xs)" }), _jsx(Skeleton.Text, { lines: 1, size: "xs" })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Small (sm)" }), _jsx(Skeleton.Text, { lines: 1, size: "sm" })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Medium (md) - Default" }), _jsx(Skeleton.Text, { lines: 1, size: "md" })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Large (lg)" }), _jsx(Skeleton.Text, { lines: 1, size: "lg" })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Extra Large (xl)" }), _jsx(Skeleton.Text, { lines: 1, size: "xl" })] })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Multi-line Text" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Two Lines" }), _jsx(Skeleton.Text, { lines: 2 })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Three Lines" }), _jsx(Skeleton.Text, { lines: 3 })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Five Lines" }), _jsx(Skeleton.Text, { lines: 5 })] })] })] })] })); };
+export var TextSkeletons = function () { return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx(Heading, { variant: "h4", children: "Text Sizes" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx(Body, { children: "Extra Small (xs)" }), _jsx(Skeleton.Text, { lines: 1, size: "xs" })] }), _jsxs("div", { children: [_jsx(Body, { children: "Small (sm)" }), _jsx(Skeleton.Text, { lines: 1, size: "sm" })] }), _jsxs("div", { children: [_jsx(Body, { children: "Medium (md) - Default" }), _jsx(Skeleton.Text, { lines: 1, size: "md" })] }), _jsxs("div", { children: [_jsx(Body, { children: "Large (lg)" }), _jsx(Skeleton.Text, { lines: 1, size: "lg" })] }), _jsxs("div", { children: [_jsx(Body, { children: "Extra Large (xl)" }), _jsx(Skeleton.Text, { lines: 1, size: "xl" })] })] })] }), _jsxs("div", { children: [_jsx(Heading, { variant: "h4", children: "Multi-line Text" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx(Body, { children: "Two Lines" }), _jsx(Skeleton.Text, { lines: 2 })] }), _jsxs("div", { children: [_jsx(Body, { children: "Three Lines" }), _jsx(Skeleton.Text, { lines: 3 })] }), _jsxs("div", { children: [_jsx(Body, { children: "Five Lines" }), _jsx(Skeleton.Text, { lines: 5 })] })] })] })] })); };
 TextSkeletons.parameters = {
     docs: {
         description: {
@@ -358,7 +368,7 @@ TextSkeletons.parameters = {
     },
 };
 // Heading Skeletons
-export var HeadingSkeletons = function () { return (_jsx("div", { className: "space-y-6", children: _jsxs("div", { children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Heading Sizes" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "H1 - Largest" }), _jsx(Skeleton.Heading, { size: "h1" })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "H2 - Default" }), _jsx(Skeleton.Heading, { size: "h2" })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "H3" }), _jsx(Skeleton.Heading, { size: "h3" })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "H4" }), _jsx(Skeleton.Heading, { size: "h4" })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "H5" }), _jsx(Skeleton.Heading, { size: "h5" })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "H6 - Smallest" }), _jsx(Skeleton.Heading, { size: "h6" })] })] })] }) })); };
+export var HeadingSkeletons = function () { return (_jsx("div", { className: "space-y-6", children: _jsxs("div", { children: [_jsx(Heading, { variant: "h4", children: "Heading Sizes" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx(Body, { children: "H1 - Largest" }), _jsx(Skeleton.Heading, { size: "h1" })] }), _jsxs("div", { children: [_jsx(Body, { children: "H2 - Default" }), _jsx(Skeleton.Heading, { size: "h2" })] }), _jsxs("div", { children: [_jsx(Body, { children: "H3" }), _jsx(Skeleton.Heading, { size: "h3" })] }), _jsxs("div", { children: [_jsx(Body, { children: "H4" }), _jsx(Skeleton.Heading, { size: "h4" })] }), _jsxs("div", { children: [_jsx(Body, { children: "H5" }), _jsx(Skeleton.Heading, { size: "h5" })] }), _jsxs("div", { children: [_jsx(Body, { children: "H6 - Smallest" }), _jsx(Skeleton.Heading, { size: "h6" })] })] })] }) })); };
 HeadingSkeletons.parameters = {
     docs: {
         description: {
@@ -367,7 +377,7 @@ HeadingSkeletons.parameters = {
     },
 };
 // Image Skeletons
-export var ImageSkeletons = function () { return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Square Aspect Ratio" }), _jsx("div", { className: "w-64", children: _jsx(Skeleton.Image, { aspectRatio: "square" }) })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Video Aspect Ratio (16:9)" }), _jsx("div", { className: "w-64", children: _jsx(Skeleton.Image, { aspectRatio: "video" }) })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Portrait Aspect Ratio (3:4)" }), _jsx("div", { className: "w-48", children: _jsx(Skeleton.Image, { aspectRatio: "portrait" }) })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Icon Scale Variations" }), _jsxs("div", { className: "flex gap-6 flex-wrap", children: [_jsxs("div", { className: "w-40", children: [_jsx("p", { className: "text-xs mb-1", children: "Scale: sm" }), _jsx(Skeleton.Image, { aspectRatio: "square" })] }), _jsxs("div", { className: "w-40", children: [_jsx("p", { className: "text-xs mb-1", children: "Scale: md" }), _jsx(Skeleton.Image, { aspectRatio: "square" })] }), _jsxs("div", { className: "w-40", children: [_jsx("p", { className: "text-xs mb-1", children: "Scale: lg" }), _jsx(Skeleton.Image, { aspectRatio: "square" })] }), _jsxs("div", { className: "w-40", children: [_jsx("p", { className: "text-xs mb-1", children: "Scale: auto (responsive)" }), _jsx(Skeleton.Image, { aspectRatio: "square" })] })] })] })] })); };
+export var ImageSkeletons = function () { return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx(Body, { children: "Square Aspect Ratio" }), _jsx("div", { className: "w-64", children: _jsx(Skeleton.Image, { aspectRatio: "square" }) })] }), _jsxs("div", { children: [_jsx(Body, { children: "Video Aspect Ratio (16:9)" }), _jsx("div", { className: "w-64", children: _jsx(Skeleton.Image, { aspectRatio: "video" }) })] }), _jsxs("div", { children: [_jsx(Body, { children: "Portrait Aspect Ratio (3:4)" }), _jsx("div", { className: "w-48", children: _jsx(Skeleton.Image, { aspectRatio: "portrait" }) })] }), _jsxs("div", { children: [_jsx(Body, { children: "Icon Scale Variations" }), _jsxs("div", { className: "flex gap-6 flex-wrap", children: [_jsxs("div", { className: "w-40", children: [_jsx(Body, { children: "Scale: sm" }), _jsx(Skeleton.Image, { aspectRatio: "square" })] }), _jsxs("div", { className: "w-40", children: [_jsx(Body, { children: "Scale: md" }), _jsx(Skeleton.Image, { aspectRatio: "square" })] }), _jsxs("div", { className: "w-40", children: [_jsx(Body, { children: "Scale: lg" }), _jsx(Skeleton.Image, { aspectRatio: "square" })] }), _jsxs("div", { className: "w-40", children: [_jsx(Body, { children: "Scale: auto (responsive)" }), _jsx(Skeleton.Image, { aspectRatio: "square" })] })] })] })] })); };
 ImageSkeletons.parameters = {
     docs: {
         description: {
@@ -394,7 +404,7 @@ CompleteFormExample.parameters = {
     },
 };
 // All Variants Together
-export var AllVariants = function () { return (_jsxs("div", { className: "space-y-8", children: [_jsxs("div", { children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Buttons" }), _jsxs("div", { className: "flex gap-4", children: [_jsx(Skeleton.Button, { size: "sm" }), _jsx(Skeleton.Button, { size: "md" }), _jsx(Skeleton.Button, { size: "lg" })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Inputs & Selects" }), _jsxs("div", { className: "space-y-2 max-w-md", children: [_jsx(Skeleton.Input, { size: "sm" }), _jsx(Skeleton.Input, { size: "md" }), _jsx(Skeleton.Select, { size: "lg" })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Avatars" }), _jsxs("div", { className: "flex gap-4 items-center", children: [_jsx(Skeleton.Avatar, { size: "sm" }), _jsx(Skeleton.Avatar, { size: "md" }), _jsx(Skeleton.Avatar, { size: "lg" }), _jsx(Skeleton.Avatar, { size: "xl" })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Badges" }), _jsxs("div", { className: "flex gap-4 items-center", children: [_jsx(Skeleton.Badge, { size: "sm" }), _jsx(Skeleton.Badge, { size: "md" }), _jsx(Skeleton.Badge, { size: "lg" })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Form Controls" }), _jsxs("div", { className: "flex gap-4 items-center", children: [_jsx(Skeleton.Checkbox, {}), _jsx(Skeleton.Switch, {}), _jsx(Skeleton.Icon, { size: "md" })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Text" }), _jsx("div", { className: "max-w-md", children: _jsx(Skeleton.Text, { lines: 3 }) })] }), _jsxs("div", { children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Images" }), _jsxs("div", { className: "flex gap-4", children: [_jsx("div", { className: "w-32", children: _jsx(Skeleton.Image, { aspectRatio: "square" }) }), _jsx("div", { className: "w-48", children: _jsx(Skeleton.Image, { aspectRatio: "video" }) })] })] })] })); };
+export var AllVariants = function () { return (_jsxs("div", { className: "space-y-8", children: [_jsxs("div", { children: [_jsx(Heading, { variant: "h4", children: "Buttons" }), _jsxs("div", { className: "flex gap-4", children: [_jsx(Skeleton.Button, { size: "sm" }), _jsx(Skeleton.Button, { size: "md" }), _jsx(Skeleton.Button, { size: "lg" })] })] }), _jsxs("div", { children: [_jsx(Heading, { variant: "h4", children: "Inputs & Selects" }), _jsxs("div", { className: "space-y-2 max-w-md", children: [_jsx(Skeleton.Input, { size: "sm" }), _jsx(Skeleton.Input, { size: "md" }), _jsx(Skeleton.Select, { size: "lg" })] })] }), _jsxs("div", { children: [_jsx(Heading, { variant: "h4", children: "Avatars" }), _jsxs("div", { className: "flex gap-4 items-center", children: [_jsx(Skeleton.Avatar, { size: "sm" }), _jsx(Skeleton.Avatar, { size: "md" }), _jsx(Skeleton.Avatar, { size: "lg" }), _jsx(Skeleton.Avatar, { size: "xl" })] })] }), _jsxs("div", { children: [_jsx(Heading, { variant: "h4", children: "Badges" }), _jsxs("div", { className: "flex gap-4 items-center", children: [_jsx(Skeleton.Badge, { size: "sm" }), _jsx(Skeleton.Badge, { size: "md" }), _jsx(Skeleton.Badge, { size: "lg" })] })] }), _jsxs("div", { children: [_jsx(Heading, { variant: "h4", children: "Form Controls" }), _jsxs("div", { className: "flex gap-4 items-center", children: [_jsx(Skeleton.Checkbox, {}), _jsx(Skeleton.Switch, {}), _jsx(Skeleton.Icon, { size: "md" })] })] }), _jsxs("div", { children: [_jsx(Heading, { variant: "h4", children: "Text" }), _jsx("div", { className: "max-w-md", children: _jsx(Skeleton.Text, { lines: 3 }) })] }), _jsxs("div", { children: [_jsx(Heading, { variant: "h4", children: "Images" }), _jsxs("div", { className: "flex gap-4", children: [_jsx("div", { className: "w-32", children: _jsx(Skeleton.Image, { aspectRatio: "square" }) }), _jsx("div", { className: "w-48", children: _jsx(Skeleton.Image, { aspectRatio: "video" }) })] })] })] })); };
 AllVariants.parameters = {
     docs: {
         description: {

package/dist/src/components/Title/Title.module.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
 .main-title {
   position: relative;
   z-index: 10;

package/dist/src/components/Typography/Heading/heading.module.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
 .h1 {
   margin: calc(var(--spacing, 0.25rem) * 0);
   font-size: var(--text-5xl, 3rem);

package/dist/src/components/VerticalTabs/VerticalTabs.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+export declare const tabSizes: {
+    lg: string;
+    md: string;
+    sm: string;
+};
+type TabsProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {
+    size?: keyof typeof tabSizes;
+};
+declare const Tabs: React.FC<TabsProps>;
+declare const TabsHeading: React.FC<{
+    children: React.ReactNode;
+}>;
+declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Tabs, TabsList, TabsTrigger, TabsContent, TabsHeading };

package/dist/src/components/VerticalTabs/VerticalTabs.js

@@ -0,0 +1,60 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cn } from "../../lib/utils";
+import { Heading } from "../Typography/Heading/heading";
+export var tabSizes = {
+    lg: "!px-5 !py-3 !text-base font-normal",
+    md: "!px-5 !py-2.5 !text-sm font-normal",
+    sm: "!px-3 !py-2 !text-sm font-normal",
+};
+var TabsContext = React.createContext({
+    size: "md",
+});
+var Tabs = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? "md" : _b, children = _a.children, props = __rest(_a, ["size", "children"]);
+    return (_jsx(TabsContext.Provider, { value: { size: size }, children: _jsx(TabsPrimitive.Root, __assign({}, props, { children: children })) }));
+};
+var TabsHeading = function (_a) {
+    var children = _a.children;
+    return (_jsx(Heading, { variant: "h6-500", className: "bg-gray-900 !px-5 !py-3 rounded-t-md !text-gray-50 shadow-lg", children: children }));
+};
+var TabsList = React.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx(TabsPrimitive.List, __assign({ ref: ref, className: cn("flex flex-col h-full items-start justify-start bg-gray-50 text-gray-950 !p-1 shadow-lg", className) }, props)));
+});
+TabsList.displayName = TabsPrimitive.List.displayName;
+var TabsTrigger = React.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    var size = React.useContext(TabsContext).size;
+    return (_jsx(TabsPrimitive.Trigger, __assign({ ref: ref, className: cn("inline-flex items-center justify-start whitespace-nowrap !rounded-md font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 w-full text-left !text-gray-950 hover:bg-gray-50 data-[state=active]:!text-gray-50 data-[state=active]:bg-gray-950", tabSizes[size], className) }, props)));
+});
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+var TabsContent = React.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx(TabsPrimitive.Content, __assign({ ref: ref, className: cn("mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", className) }, props)));
+});
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+export { Tabs, TabsList, TabsTrigger, TabsContent, TabsHeading };

package/dist/src/components/VerticalTabs/VerticalTabs.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta } from "@storybook/react";
+declare const _default: Meta;
+export default _default;
+export declare const _VerticalTabs: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, any>;
+export declare const VerticalTabsSmall: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, any>;
+export declare const VerticalTabsMedium: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, any>;
+export declare const VerticalTabsLarge: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, any>;
+export declare const VerticalTabsWithoutHeading: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, any>;
+export declare const VerticalTabsWithIcon: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, any>;
+export declare const VerticalTabsWithBadge: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, any>;
+export declare const VerticalTabsWithIconAndBadge: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, any>;

package/dist/src/components/VerticalTabs/VerticalTabs.stories.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tabs, TabsContent, TabsList, tabSizes, TabsTrigger, TabsHeading, } from "./VerticalTabs";
+import LUIcon from "../Icons/LUIcon";
+import { Badge } from "../Badge/Badge";
+export default {
+    title: "Components/VerticalTabs",
+    component: Tabs,
+    tags: ["autodocs"],
+    argTypes: {
+        children: {
+            description: "Pass `TabList` components as children. Each item includes an `TabsTrigger` (the clickable label) and `TabsContent`. You can customize both with any valid React nodes \n\nFor more details and usage examples, refer to the [ShadCN Tabs documentation](https://ui.shadcn.com/docs/components/tabs).",
+            table: {
+                type: { summary: "React.ReactNode" },
+            },
+        },
+        heading: {
+            description: "Optional heading displayed at the top of the Tabs.",
+            table: {
+                type: { summary: "string" },
+            },
+        },
+        size: {
+            control: { type: "select" },
+            options: Object.keys(tabSizes),
+            description: "Size of the Tabs component",
+            table: {
+                type: { summary: Object.keys(tabSizes).join(" | ") },
+                defaultValue: { summary: "md" },
+            },
+        },
+    },
+};
+var Template = function (args) { return (_jsxs(Tabs, { defaultValue: "account", size: args.size, children: [args.heading && _jsx(TabsHeading, { children: args.heading }), _jsx(TabsList, { children: args.triggers }), _jsx(TabsContent, { value: "account", children: "Account Settings" }), _jsx(TabsContent, { value: "password", children: "Change Password" })] })); };
+export var _VerticalTabs = Template.bind({});
+_VerticalTabs.args = {
+    heading: "Tab Title",
+    triggers: [
+        _jsx(TabsTrigger, { value: "account", children: "Account" }, "account"),
+        _jsx(TabsTrigger, { value: "password", children: "Password" }, "password"),
+    ],
+    size: "md",
+};
+export var VerticalTabsSmall = Template.bind({});
+VerticalTabsSmall.args = {
+    heading: "Sm Tabs",
+    triggers: [
+        _jsx(TabsTrigger, { value: "account", children: "Account" }, "account"),
+        _jsx(TabsTrigger, { value: "password", children: "Password" }, "password"),
+    ],
+    size: "sm",
+};
+export var VerticalTabsMedium = Template.bind({});
+VerticalTabsMedium.args = {
+    heading: "Md Tabs",
+    triggers: [
+        _jsx(TabsTrigger, { value: "account", children: "Account" }, "account"),
+        _jsx(TabsTrigger, { value: "password", children: "Password" }, "password"),
+    ],
+    size: "md",
+};
+export var VerticalTabsLarge = Template.bind({});
+VerticalTabsLarge.args = {
+    heading: "Lg Tabs",
+    triggers: [
+        _jsx(TabsTrigger, { value: "account", children: "Account" }, "account"),
+        _jsx(TabsTrigger, { value: "password", children: "Password" }, "password"),
+    ],
+    size: "lg",
+};
+export var VerticalTabsWithoutHeading = Template.bind({});
+VerticalTabsWithoutHeading.args = {
+    triggers: [
+        _jsxs(TabsTrigger, { value: "account", children: [_jsx(LUIcon, { icon: "user", size: "md", className: "mr-1" }), "Account"] }, "account"),
+        _jsxs(TabsTrigger, { value: "password", children: [_jsx(LUIcon, { icon: "lock", size: "md", className: "mr-1" }), "Password"] }, "password"),
+    ],
+};
+export var VerticalTabsWithIcon = Template.bind({});
+VerticalTabsWithIcon.args = {
+    heading: "Tab Title",
+    triggers: [
+        _jsxs(TabsTrigger, { value: "account", children: [_jsx(LUIcon, { icon: "user", size: "md", className: "mr-1" }), "Account"] }, "account"),
+        _jsxs(TabsTrigger, { value: "password", children: [_jsx(LUIcon, { icon: "lock", size: "md", className: "mr-1" }), "Password"] }, "password"),
+    ],
+};
+export var VerticalTabsWithBadge = Template.bind({});
+VerticalTabsWithBadge.args = {
+    heading: "Tab Title",
+    triggers: [
+        _jsxs(TabsTrigger, { value: "account", children: ["Account", _jsx(Badge, { size: "sm", color: "gray", className: "ms-auto", children: "03" })] }, "account"),
+        _jsxs(TabsTrigger, { value: "password", children: ["Password", _jsx(Badge, { size: "sm", color: "gray", className: "ms-auto", children: "01" })] }, "password"),
+    ],
+};
+export var VerticalTabsWithIconAndBadge = Template.bind({});
+VerticalTabsWithIconAndBadge.args = {
+    heading: "Tab Title",
+    triggers: [
+        _jsxs(TabsTrigger, { value: "account", children: [_jsx(LUIcon, { icon: "user", size: "md", className: "mr-1" }), "Account", _jsx(Badge, { size: "sm", color: "gray", className: "ms-auto", children: "03" })] }, "account"),
+        _jsxs(TabsTrigger, { value: "password", children: [_jsx(LUIcon, { icon: "lock", size: "md", className: "mr-1" }), "Password", _jsx(Badge, { size: "sm", color: "gray", className: "ms-auto", children: "01" })] }, "password"),
+    ],
+};

package/dist/src/components/VerticalTabs/VerticalTabs.test.d.ts

@@ -0,0 +1 @@
+export {};