linkedunion-design-kit 1.11.6 → 1.11.8

package/dist/src/components/Typography/Caption/{Caption.stories.js → Caption.stories.jsx}

@@ -1,15 +1,3 @@
-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);
-};
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Dummy_Para } from "../../../utils/constants";
 import { Caption, variantClasses, } from "../../../components/Typography/Caption/caption";
 export default {
@@ -17,7 +5,7 @@ export default {
     component: Caption,
     tags: ["autodocs"],
 };
-var Template = function (args) { return _jsx(Caption, __assign({}, args)); };
+var Template = function (args) { return <Caption {...args}></Caption>; };
 export var _Caption = Template.bind({});
 _Caption.args = {
     children: Dummy_Para,

package/dist/src/components/Typography/Caption/caption.d.ts

@@ -4,5 +4,5 @@ type CaptionProps = React.HTMLAttributes<HTMLTableCaptionElement> & {
     variant?: CaptionVariant;
 };
 export declare const variantClasses: Record<CaptionVariant, string>;
-declare function Caption({ className, children, variant, ...props }: CaptionProps): import("react/jsx-runtime").JSX.Element;
+declare function Caption({ className, children, variant, ...props }: CaptionProps): React.JSX.Element;
 export { Caption };

package/dist/src/components/Typography/Caption/{caption.js → caption.jsx}

@@ -1,14 +1,3 @@
-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)
@@ -20,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
 import { cn } from "../../../lib/utils";
 export var variantClasses = {
     sm: "text-xs",
@@ -29,6 +18,8 @@ export var variantClasses = {
 };
 function Caption(_a) {
     var className = _a.className, children = _a.children, _b = _a.variant, variant = _b === void 0 ? "md" : _b, props = __rest(_a, ["className", "children", "variant"]);
-    return (_jsx("p", __assign({ className: cn("!font-normal !leading-normal m-0 inline", variantClasses[variant], className) }, props, { children: children })));
+    return (<p className={cn("!font-normal !leading-normal m-0 inline", variantClasses[variant], className)} {...props}>
+      {children}
+    </p>);
 }
 export { Caption };

package/dist/src/components/Typography/Display/{Display.stories.js → Display.stories.jsx}

@@ -1,15 +1,3 @@
-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);
-};
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Dummy_Para } from "../../../utils/constants";
 import { Display, variant } from "../../../components/Typography/Display/display";
 export default {
@@ -17,7 +5,7 @@ export default {
     component: Display,
     tags: ["autodocs"],
 };
-var Template = function (args) { return _jsx(Display, __assign({}, args)); };
+var Template = function (args) { return <Display {...args}></Display>; };
 export var _Display = Template.bind({});
 _Display.args = {
     children: Dummy_Para,

package/dist/src/components/Typography/Display/display.d.ts

@@ -11,5 +11,5 @@ declare const displayVariants: (props?: ({
 type DisplayProps = React.HTMLProps<HTMLDivElement> & VariantProps<typeof displayVariants> & {
     variant?: keyof typeof variant;
 };
-declare function Display({ className, variant, children, ...props }: DisplayProps): import("react/jsx-runtime").JSX.Element;
+declare function Display({ className, variant, children, ...props }: DisplayProps): React.JSX.Element;
 export { Display, displayVariants };

package/dist/src/components/Typography/Display/{display.js → display.jsx}

@@ -1,14 +1,3 @@
-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)
@@ -20,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../../lib/utils";
 export var variant = {
@@ -43,6 +32,8 @@ function Display(_a) {
     if (variant === null || variant === void 0 ? void 0 : variant.startsWith("display")) {
         Tag = "div";
     }
-    return (_jsx(Tag, __assign({ className: cn(displayVariants({ variant: variant, className: className })) }, props, { children: children })));
+    return (<Tag className={cn(displayVariants({ variant: variant, className: className }))} {...props}>
+      {children}
+    </Tag>);
 }
 export { Display, displayVariants };

package/dist/src/components/Typography/Heading/Heading.stories.d.ts

@@ -3,27 +3,27 @@ declare const _default: Meta;
 export default _default;
 export declare const _Heading: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/react").Args>;
 export declare const H1Variants: {
-    (): import("react/jsx-runtime").JSX.Element;
+    (): import("react").JSX.Element;
     storyName: string;
 };
 export declare const H2Variants: {
-    (): import("react/jsx-runtime").JSX.Element;
+    (): import("react").JSX.Element;
     storyName: string;
 };
 export declare const H3Variants: {
-    (): import("react/jsx-runtime").JSX.Element;
+    (): import("react").JSX.Element;
     storyName: string;
 };
 export declare const H4Variants: {
-    (): import("react/jsx-runtime").JSX.Element;
+    (): import("react").JSX.Element;
     storyName: string;
 };
 export declare const H5Variants: {
-    (): import("react/jsx-runtime").JSX.Element;
+    (): import("react").JSX.Element;
     storyName: string;
 };
 export declare const H6Variants: {
-    (): import("react/jsx-runtime").JSX.Element;
+    (): import("react").JSX.Element;
     storyName: string;
 };
 export declare const WithCustomClassName: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/react").Args>;

package/dist/src/components/Typography/Heading/Heading.stories.jsx

@@ -0,0 +1,85 @@
+import { Dummy_Para, Dummy_Title } from "../../../utils/constants";
+import { Heading, variant } from "./heading";
+export default {
+    title: "Components/Typography/Heading",
+    component: Heading,
+    tags: ["autodocs"],
+};
+var Template = function (args) { return <Heading {...args}></Heading>; };
+export var _Heading = Template.bind({});
+_Heading.args = {
+    children: Dummy_Para,
+    variant: "h2",
+};
+_Heading.argTypes = {
+    variant: {
+        control: { type: "select" },
+        options: Object.keys(variant),
+        description: "Heading Variant",
+        table: {
+            defaultValue: { summary: "h2" },
+            type: { summary: "string" },
+        },
+    },
+};
+// Single story for h1 and all h1 variants
+export var H1Variants = function () { return (<div className="flex flex-col gap-4">
+    <Heading variant="h1">{"".concat(Dummy_Title, " (h1)")}</Heading>
+    <Heading variant="h1-500">{"".concat(Dummy_Title, " (h1-500)")}</Heading>
+    <Heading variant="h1-600">{"".concat(Dummy_Title, " (h1-600)")}</Heading>
+    <Heading variant="h1-700">{"".concat(Dummy_Title, " (h1-700)")}</Heading>
+  </div>); };
+H1Variants.storyName = "H1 & All H1 Variants";
+// Single story for h2 and all h2 variants
+export var H2Variants = function () { return (<div className="flex flex-col gap-4">
+    <Heading variant="h2">{"".concat(Dummy_Title, " (h2)")}</Heading>
+    <Heading variant="h2-500">{"".concat(Dummy_Title, " (h2-500)")}</Heading>
+    <Heading variant="h2-600">{"".concat(Dummy_Title, " (h2-600)")}</Heading>
+    <Heading variant="h2-700">{"".concat(Dummy_Title, " (h2-700)")}</Heading>
+  </div>); };
+H2Variants.storyName = "H2 & All H2 Variants";
+// Single story for h3 and all h3 variants
+export var H3Variants = function () { return (<div className="flex flex-col gap-4">
+    <Heading variant="h3">{"".concat(Dummy_Title, " (h3)")}</Heading>
+    <Heading variant="h3-500">{"".concat(Dummy_Title, " (h3-500)")}</Heading>
+    <Heading variant="h3-600">{"".concat(Dummy_Title, " (h3-600)")}</Heading>
+    <Heading variant="h3-700">{"".concat(Dummy_Title, " (h3-700)")}</Heading>
+  </div>); };
+H3Variants.storyName = "H3 & All H3 Variants";
+// Single story for h4 and all h4 variants
+export var H4Variants = function () { return (<div className="flex flex-col gap-4">
+    <Heading variant="h4">{"".concat(Dummy_Title, " (h4)")}</Heading>
+    <Heading variant="h4-500">{"".concat(Dummy_Title, " (h4-500)")}</Heading>
+    <Heading variant="h4-600">{"".concat(Dummy_Title, " (h4-600)")}</Heading>
+    <Heading variant="h4-700">{"".concat(Dummy_Title, " (h4-700)")}</Heading>
+  </div>); };
+H4Variants.storyName = "H4 & All H4 Variants";
+// Single story for h5 and all h5 variants
+export var H5Variants = function () { return (<div className="flex flex-col gap-4">
+    <Heading variant="h5">{"".concat(Dummy_Title, " (h5)")}</Heading>
+    <Heading variant="h5-500">{"".concat(Dummy_Title, " (h5-500)")}</Heading>
+    <Heading variant="h5-600">{"".concat(Dummy_Title, " (h5-600)")}</Heading>
+    <Heading variant="h5-700">{"".concat(Dummy_Title, " (h5-700)")}</Heading>
+  </div>); };
+H5Variants.storyName = "H5 & All H5 Variants";
+// Single story for h6 and all h6 variants
+export var H6Variants = function () { return (<div className="flex flex-col gap-4">
+    <Heading variant="h6">{"".concat(Dummy_Title, " (h6)")}</Heading>
+    <Heading variant="h6-500">{"".concat(Dummy_Title, " (h6-500)")}</Heading>
+    <Heading variant="h6-600">{"".concat(Dummy_Title, " (h6-600)")}</Heading>
+    <Heading variant="h6-700">{"".concat(Dummy_Title, " (h6-700)")}</Heading>
+  </div>); };
+H6Variants.storyName = "H6 & All H6 Variants";
+export var WithCustomClassName = Template.bind({});
+WithCustomClassName.args = {
+    children: "Heading with custom className (red text)",
+    variant: "h2",
+    className: "text-red-500 underline",
+};
+WithCustomClassName.parameters = {
+    docs: {
+        description: {
+            story: "Demonstrates the usage of the className prop to apply custom styles.",
+        },
+    },
+};

package/dist/src/components/Typography/Heading/{heading.js → heading.jsx}

@@ -1,14 +1,3 @@
-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)
@@ -20,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
 import styles from "./heading.module.css";
 import { cn } from "../../../lib/utils";
 export var variant = {
@@ -55,8 +44,10 @@ var Heading = function (_a) {
     if (variant && typeof variant === "string" && variant.startsWith("h")) {
         Tag = variant.split("-")[0];
     }
-    return (_jsx(Tag, __assign({ className: cn(styles.heading, typeof variant === "string" && styles["".concat(variant)]
+    return (<Tag className={cn(styles.heading, typeof variant === "string" && styles["".concat(variant)]
             ? styles["".concat(variant)]
-            : styles["h2"], className) }, props, { children: children })));
+            : styles["h2"], className)} {...props}>
+      {children}
+    </Tag>);
 };
 export { Heading };

package/dist/src/components/VerticalTabs/{VerticalTabs.js → VerticalTabs.jsx}

@@ -1,14 +1,3 @@
-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)
@@ -20,7 +9,6 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     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";
@@ -35,26 +23,30 @@ var TabsContext = React.createContext({
 });
 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 })) }));
+    return (<TabsContext.Provider value={{ size: size }}>
+      <TabsPrimitive.Root {...props}>{children}</TabsPrimitive.Root>
+    </TabsContext.Provider>);
 };
 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 }));
+    return (<Heading variant="h6-500" className="bg-gray-900 !px-5 !py-3 rounded-t-md !text-gray-50 shadow-lg">
+    {children}
+  </Heading>);
 };
 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)));
+    return (<TabsPrimitive.List 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)));
+    return (<TabsPrimitive.Trigger 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)));
+    return (<TabsPrimitive.Content 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.jsx

@@ -0,0 +1,154 @@
+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 (<Tabs defaultValue="account" size={args.size}>
+    {args.heading && <TabsHeading>{args.heading}</TabsHeading>}
+    <TabsList>{args.triggers}</TabsList>
+    <TabsContent value="account">Account Settings</TabsContent>
+    <TabsContent value="password">Change Password</TabsContent>
+  </Tabs>); };
+export var _VerticalTabs = Template.bind({});
+_VerticalTabs.args = {
+    heading: "Tab Title",
+    triggers: [
+        <TabsTrigger key="account" value="account">
+      Account
+    </TabsTrigger>,
+        <TabsTrigger key="password" value="password">
+      Password
+    </TabsTrigger>,
+    ],
+    size: "md",
+};
+export var VerticalTabsSmall = Template.bind({});
+VerticalTabsSmall.args = {
+    heading: "Sm Tabs",
+    triggers: [
+        <TabsTrigger key="account" value="account">
+      Account
+    </TabsTrigger>,
+        <TabsTrigger key="password" value="password">
+      Password
+    </TabsTrigger>,
+    ],
+    size: "sm",
+};
+export var VerticalTabsMedium = Template.bind({});
+VerticalTabsMedium.args = {
+    heading: "Md Tabs",
+    triggers: [
+        <TabsTrigger key="account" value="account">
+      Account
+    </TabsTrigger>,
+        <TabsTrigger key="password" value="password">
+      Password
+    </TabsTrigger>,
+    ],
+    size: "md",
+};
+export var VerticalTabsLarge = Template.bind({});
+VerticalTabsLarge.args = {
+    heading: "Lg Tabs",
+    triggers: [
+        <TabsTrigger key="account" value="account">
+      Account
+    </TabsTrigger>,
+        <TabsTrigger key="password" value="password">
+      Password
+    </TabsTrigger>,
+    ],
+    size: "lg",
+};
+export var VerticalTabsWithoutHeading = Template.bind({});
+VerticalTabsWithoutHeading.args = {
+    triggers: [
+        <TabsTrigger key="account" value="account">
+      <LUIcon icon="user" size="md" className="mr-1"/>
+      Account
+    </TabsTrigger>,
+        <TabsTrigger key="password" value="password">
+      <LUIcon icon="lock" size="md" className="mr-1"/>
+      Password
+    </TabsTrigger>,
+    ],
+};
+export var VerticalTabsWithIcon = Template.bind({});
+VerticalTabsWithIcon.args = {
+    heading: "Tab Title",
+    triggers: [
+        <TabsTrigger key="account" value="account">
+      <LUIcon icon="user" size="md" className="mr-1"/>
+      Account
+    </TabsTrigger>,
+        <TabsTrigger key="password" value="password">
+      <LUIcon icon="lock" size="md" className="mr-1"/>
+      Password
+    </TabsTrigger>,
+    ],
+};
+export var VerticalTabsWithBadge = Template.bind({});
+VerticalTabsWithBadge.args = {
+    heading: "Tab Title",
+    triggers: [
+        <TabsTrigger key="account" value="account">
+      Account
+      <Badge size="sm" color="gray" className="ms-auto">
+        03
+      </Badge>
+    </TabsTrigger>,
+        <TabsTrigger key="password" value="password">
+      Password
+      <Badge size="sm" color="gray" className="ms-auto">
+        01
+      </Badge>
+    </TabsTrigger>,
+    ],
+};
+export var VerticalTabsWithIconAndBadge = Template.bind({});
+VerticalTabsWithIconAndBadge.args = {
+    heading: "Tab Title",
+    triggers: [
+        <TabsTrigger key="account" value="account">
+      <LUIcon icon="user" size="md" className="mr-1"/>
+      Account
+      <Badge size="sm" color="gray" className="ms-auto">
+        03
+      </Badge>
+    </TabsTrigger>,
+        <TabsTrigger key="password" value="password">
+      <LUIcon icon="lock" size="md" className="mr-1"/>
+      Password
+      <Badge size="sm" color="gray" className="ms-auto">
+        01
+      </Badge>
+    </TabsTrigger>,
+    ],
+};

package/dist/src/components/VerticalTabs/VerticalTabs.test.jsx

@@ -0,0 +1,97 @@
+import { render, screen } from "@testing-library/react";
+import { Tabs, TabsList, TabsTrigger, TabsContent, TabsHeading, tabSizes, } from "./VerticalTabs";
+var Dummy_label = "Account";
+describe("VerticalTabs Component", function () {
+    it("renders Tabs with TabsHeading", function () {
+        render(<Tabs defaultValue="account">
+        <TabsHeading>Test Heading</TabsHeading>
+        <TabsList>
+          <TabsTrigger value="account">{Dummy_label}</TabsTrigger>
+        </TabsList>
+        <TabsContent value="account">Account Settings</TabsContent>
+      </Tabs>);
+        expect(screen.getByText("Test Heading")).toBeInTheDocument();
+    });
+    it("renders TabsHeading with children", function () {
+        render(<TabsHeading>Custom Heading</TabsHeading>);
+        expect(screen.getByText("Custom Heading")).toBeInTheDocument();
+    });
+    it("renders Tabs with different sizes", function () {
+        Object.keys(tabSizes).forEach(function (size) {
+            render(<Tabs defaultValue="account" size={size}>
+          <TabsHeading>{size} Tabs</TabsHeading>
+          <TabsList>
+            <TabsTrigger value="account">Account</TabsTrigger>
+            <TabsTrigger value="password">Password</TabsTrigger>
+          </TabsList>
+          <TabsContent value="account">Account Settings</TabsContent>
+          <TabsContent value="password">Change Password</TabsContent>
+        </Tabs>);
+            expect(screen.getByText("".concat(size, " Tabs"))).toBeInTheDocument();
+        });
+    });
+    it("renders TabsList and TabsTrigger", function () {
+        render(<Tabs defaultValue="account">
+        <TabsList>
+          <TabsTrigger value="account">{Dummy_label}</TabsTrigger>
+        </TabsList>
+        <TabsContent value="account">Account Settings</TabsContent>
+      </Tabs>);
+        expect(screen.getByText(Dummy_label)).toBeInTheDocument();
+    });
+    it("renders TabsContent when trigger is active", function () {
+        render(<Tabs defaultValue="account">
+        <TabsList>
+          <TabsTrigger value="account">{Dummy_label}</TabsTrigger>
+          <TabsTrigger value="password">Password</TabsTrigger>
+        </TabsList>
+        <TabsContent value="account">Account Settings</TabsContent>
+        <TabsContent value="password">Change Password</TabsContent>
+      </Tabs>);
+        expect(screen.getByText("Account Settings")).toBeInTheDocument();
+        expect(screen.queryByText("Change Password")).not.toBeInTheDocument();
+    });
+    it("renders without heading prop", function () {
+        render(<Tabs defaultValue="account">
+        <TabsList>
+          <TabsTrigger value="account">{Dummy_label}</TabsTrigger>
+        </TabsList>
+        <TabsContent value="account">Account Settings</TabsContent>
+      </Tabs>);
+        expect(screen.queryByText("Test Heading")).not.toBeInTheDocument();
+    });
+    it("renders only active tab content", function () {
+        render(<Tabs defaultValue="account">
+        <TabsList>
+          <TabsTrigger value="account">Account</TabsTrigger>
+          <TabsTrigger value="password">Password</TabsTrigger>
+        </TabsList>
+        <TabsContent value="account">Account Settings</TabsContent>
+        <TabsContent value="password">Change Password</TabsContent>
+      </Tabs>);
+        expect(screen.getByText("Account Settings")).toBeInTheDocument();
+        expect(screen.queryByText("Change Password")).not.toBeInTheDocument();
+    });
+    it("applies additional className to TabsTrigger", function () {
+        render(<Tabs defaultValue="account">
+        <TabsList>
+          <TabsTrigger value="account" className="custom-class">
+            {Dummy_label}
+          </TabsTrigger>
+        </TabsList>
+        <TabsContent value="account">Account Settings</TabsContent>
+      </Tabs>);
+        var trigger = screen.getByText(Dummy_label);
+        expect(trigger).toHaveClass("custom-class");
+    });
+    it("renders correctly without a className prop", function () {
+        render(<Tabs defaultValue="account">
+        <TabsList>
+          <TabsTrigger value="account">{Dummy_label}</TabsTrigger>
+        </TabsList>
+        <TabsContent value="account">Account Settings</TabsContent>
+      </Tabs>);
+        var trigger = screen.getByText(Dummy_label);
+        expect(trigger.className).not.toMatch(/custom-class/);
+    });
+});

package/dist/src/components/ui/calendar.d.ts

@@ -3,8 +3,8 @@ import { CalendarSize } from "@/types/calendar";
 import { ComponentProps } from "react";
 declare function Calendar({ className, classNames, showOutsideDays, calendarSize, ...props }: Omit<DayPickerProps, "captionLayout"> & {
     calendarSize?: CalendarSize;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
 declare function CalendarDayButton({ className, day, modifiers, calendarSize, ...props }: Omit<ComponentProps<typeof DayButton>, "color" | "variant" | "size" | "shape"> & {
     calendarSize: CalendarSize;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
 export { Calendar, CalendarDayButton };