linkedunion-design-kit 1.11.6 → 1.11.8

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

@@ -1,115 +0,0 @@
-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, jsxs as _jsxs } from "react/jsx-runtime";
-import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogSubTitle, DialogBody, DialogFooter, DialogClose, DialogAction, } from "./Modal";
-import { Button } from "../Button/Button/Button";
-import { Body } from "../Typography/Body/body";
-import { Heading } from "../Typography/Heading/heading";
-import LUIcon from "../Icons/LUIcon";
-import { Avatar, AvatarFallback, AvatarImage } from "../Avatar/Avatar/Avatar";
-import { Dummy_Para } from "../../utils/constants";
-import { footerVariants, headerVariants, sizes } from ".";
-export default {
-    title: "Components/Modal",
-    component: Dialog,
-    tags: ["autodocs"],
-    argTypes: {
-        size: {
-            control: { type: "select" },
-            options: Object.keys(sizes),
-            description: "Defines the size of the modal.",
-            table: {
-                type: { summary: "string" },
-                defaultValue: { summary: "md" },
-            },
-        },
-        headerVariants: {
-            control: { type: "select" },
-            options: Object.keys(headerVariants),
-            description: "Defines the variant style of the modal header.",
-            table: {
-                type: { summary: "string" },
-                defaultValue: { summary: "none" },
-            },
-        },
-        footerVariants: {
-            control: { type: "select" },
-            options: Object.keys(footerVariants),
-            description: "Defines the variant style of the modal footer.",
-            table: {
-                type: { summary: "string" },
-                defaultValue: { summary: "none" },
-            },
-        },
-        shadow: {
-            control: { type: "boolean" },
-            description: "Enable or disable modal shadow.",
-            table: {
-                type: { summary: "boolean" },
-                defaultValue: { summary: true },
-            },
-        },
-        showCloseIcon: {
-            control: { type: "boolean" },
-            description: "Show or hide the close icon in the modal.",
-            table: {
-                type: { summary: "boolean" },
-                defaultValue: { summary: true },
-            },
-        },
-    },
-};
-var Template = function (args) {
-    var headerVariantProp = args.headerVariants, footerVariantProp = args.footerVariants, shadow = args.shadow, contentProps = __rest(args, ["headerVariants", "footerVariants", "shadow"]);
-    return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Open Modal" }) }), _jsxs(DialogContent, __assign({}, contentProps, { shadow: shadow, children: [_jsxs(DialogHeader, { variant: headerVariantProp, children: [_jsx(DialogTitle, { children: "Modal Title" }), _jsx(DialogSubTitle, { children: "Subtitle" })] }), _jsx(DialogBody, { children: "You can put any content here." }), _jsx(DialogFooter, { variant: footerVariantProp, children: _jsx(DialogClose, { asChild: true, children: _jsx(Button, { children: "Close" }) }) })] }))] }));
-};
-export var Default = Template.bind({});
-Default.args = {
-    size: "md",
-    headerVariants: "none",
-    footerVariants: "none",
-    shadow: true,
-    showCloseIcon: true,
-};
-export var SimpleModal = function () { return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Open Modal" }) }), _jsxs(DialogContent, { size: "sm", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Simple Modal" }), _jsx(DialogSubTitle, { children: "Subtitle" })] }), _jsx(DialogBody, { children: "You can put any content here." }), _jsx(DialogFooter, { children: _jsx(DialogClose, { asChild: true, children: _jsx(Button, { children: "Close" }) }) })] })] })); };
-export var ModalSizes = function () { return (_jsx("div", { className: "flex flex-row gap-4", children: Object.keys(sizes).map(function (size) { return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsxs(Button, { children: ["Open ", size, " Modal"] }) }), _jsxs(DialogContent, { size: size, children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { children: [size, " Modal"] }), _jsxs(DialogSubTitle, { children: ["This is a ", size, " modal example using the Modal component."] })] }), _jsx(DialogBody, { children: "You can put any content here." }), _jsx(DialogFooter, { children: _jsx(DialogClose, { asChild: true, children: _jsx(Button, { children: "Close" }) }) })] })] }, size)); }) })); };
-export var HeaderVariants = function () { return (_jsx("div", { className: "flex flex-row gap-4", children: Object.keys(headerVariants).map(function (variant) { return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsxs(Button, { children: ["Open ", variant, " Header"] }) }), _jsxs(DialogContent, { size: "md", children: [_jsxs(DialogHeader, { variant: variant, children: [_jsxs(DialogTitle, { children: [variant, " Header"] }), _jsxs(DialogSubTitle, { children: ["This modal uses the \"", variant, "\" header variant."] })] }), _jsx(DialogBody, { children: _jsxs(Body, { variant: "body-md", children: ["This demonstrates the ", variant, " header style."] }) }), _jsx(DialogFooter, { children: _jsx(DialogClose, { asChild: true, children: _jsx(Button, { children: "Close" }) }) })] })] }, variant)); }) })); };
-export var FooterVariants = function () { return (_jsx("div", { className: "flex flex-row gap-4", children: Object.keys(footerVariants).map(function (variant) { return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsxs(Button, { children: ["Open ", variant, " Footer"] }) }), _jsxs(DialogContent, { size: "md", children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { children: [variant, " Footer"] }), _jsxs(DialogSubTitle, { children: ["This modal uses the \"", variant, "\" footer variant."] })] }), _jsx(DialogBody, { children: _jsxs(Body, { variant: "body-md", children: ["This demonstrates the ", variant, " footer style."] }) }), _jsx(DialogFooter, { variant: variant, children: _jsx(DialogClose, { asChild: true, children: _jsx(Button, { children: "Close" }) }) })] })] }, variant)); }) })); };
-export var FooterButtonsLeftPosition = function () { return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Open Modal" }) }), _jsxs(DialogContent, { size: "md", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Confirm Action" }), _jsx(DialogSubTitle, { children: "SubTitle" })] }), _jsx(DialogBody, { children: _jsx(Body, { variant: "body-md", children: Dummy_Para }) }), _jsxs(DialogFooter, { className: "gap-2", children: [_jsx(Button, { onClick: function () { return alert("Action confirmed!"); }, children: "Confirm" }), _jsx(Button, { variant: "outline", onClick: function () { return alert("Action cancelled!"); }, children: "Cancel" }), _jsx(Button, { className: "ms-auto", children: "Help" })] })] })] })); };
-FooterButtonsLeftPosition.parameters = {
-    docs: {
-        description: {
-            story: "On lg, footer buttons will be lg; on md, footer buttons will be md; and so on. The button size matches the modal size.",
-        },
-    },
-};
-export var FooterButtonsRightPosition = function () { return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Open Modal" }) }), _jsxs(DialogContent, { size: "md", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Confirm Action" }), _jsx(DialogSubTitle, { children: "SubTitle" })] }), _jsx(DialogBody, { children: _jsx(Body, { variant: "body-md", children: Dummy_Para }) }), _jsxs(DialogFooter, { children: [_jsx(Button, { children: "Help" }), _jsx(Button, { onClick: function () { return alert("Action confirmed!"); }, className: "ms-auto mr-2", children: "Confirm" }), _jsx(Button, { variant: "outline", onClick: function () { return alert("Action cancelled!"); }, children: "Cancel" })] })] })] })); };
-export var FooterButtonsMiddlePosition = function () { return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Open Modal" }) }), _jsxs(DialogContent, { size: "md", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Confirm Action" }), _jsx(DialogSubTitle, { children: "SubTitle" })] }), _jsx(DialogBody, { children: _jsx(Body, { variant: "body-md", children: Dummy_Para }) }), _jsxs(DialogFooter, { className: "flex-row justify-center items-center gap-2", children: [_jsx(Button, { onClick: function () { return alert("Action confirmed!"); }, children: "Confirm" }), _jsx(Button, { variant: "outline", onClick: function () { return alert("Action cancelled!"); }, children: "Cancel" })] })] })] })); };
-export var ShadowVariations = function () { return (_jsxs("div", { className: "flex flex-row gap-4", children: [_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Open Shadow" }) }), _jsxs(DialogContent, { size: "md", shadow: true, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Shadow True" }), _jsx(DialogSubTitle, { children: "This modal uses the custom shadow." })] }), _jsx(DialogBody, { children: _jsx(Body, { variant: "body-md", children: "This demonstrates the shadow style." }) }), _jsx(DialogFooter, { children: _jsx(DialogClose, { asChild: true, children: _jsx(Button, { children: "Close" }) }) })] })] }), _jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Open No Shadow" }) }), _jsxs(DialogContent, { size: "md", shadow: false, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Shadow False" }), _jsx(DialogSubTitle, { children: "This modal has no shadow." })] }), _jsx(DialogBody, { children: _jsx(Body, { variant: "body-md", children: "This demonstrates the no shadow style." }) }), _jsx(DialogFooter, { children: _jsx(DialogClose, { asChild: true, children: _jsx(Button, { children: "Close" }) }) })] })] })] })); };
-export var InformationModalWithoutFooter = function () { return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Open Info Modal" }) }), _jsxs(DialogContent, { size: "lg", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { size: "lg", className: "text-center", children: "Contact Profile" }) }), _jsxs(DialogBody, { className: "flex flex-col items-center justify-center gap-7", children: [_jsxs(Avatar, { size: "huge", children: [_jsx(AvatarImage, { alt: "Avatar", src: "/images/avatar.png" }), _jsx(AvatarFallback, { children: "AB" })] }), _jsxs("div", { className: "flex flex-col items-center", children: [_jsx(Body, { variant: "body-md", children: "Designation" }), _jsx(Heading, { variant: "heading-md", children: "Heading" })] }), _jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx(LUIcon, { icon: "envelope", size: "lg" }), _jsx(Body, { variant: "body-md", className: "text-gray-600 truncate min-w-0", children: "testing@gmail.com" })] }), _jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx(LUIcon, { icon: "phone", size: "lg" }), _jsx(Body, { variant: "body-md", className: "text-gray-600 truncate min-w-0", children: "03764734829" })] })] }), _jsx(Body, { variant: "body-md", children: Dummy_Para })] })] })] })); };
-export var ModalWithActionButtons = function () { return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Open Modal" }) }), _jsxs(DialogContent, { size: "md", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Confirm Action" }), _jsx(DialogSubTitle, { children: "Are you sure you want to proceed with this action? This cannot be undone." })] }), _jsx(DialogBody, { children: _jsx(Body, { variant: "body-md", children: Dummy_Para }) }), _jsxs(DialogFooter, { children: [_jsx(DialogAction, { asChild: true, children: _jsx(Button, { variant: "fill", className: "mr-2", onClick: function () { return alert("Action confirmed!"); }, children: "Confirm" }) }), _jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Cancel" }) })] })] })] })); };
-export var OutlineModal = function () { return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Open Outline Modal" }) }), _jsxs(DialogContent, { size: "md", children: [_jsxs(DialogHeader, { variant: "outline", children: [_jsx(DialogTitle, { children: "Outline Modal" }), _jsx(DialogSubTitle, { children: "This modal uses the \"outline\" header variant." })] }), _jsx(DialogBody, { children: _jsx(Body, { variant: "body-md", children: Dummy_Para }) }), _jsx(DialogFooter, { variant: "outline", children: _jsx(DialogClose, { asChild: true, children: _jsx(Button, { children: "Close" }) }) })] })] })); };
-export var FullWidthButtonsModal = function () { return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Open Full Width Modal" }) }), _jsxs(DialogContent, { size: "lg", children: [_jsxs(DialogHeader, { variant: "outline", children: [_jsx(DialogTitle, { children: "Outline Modal" }), _jsx(DialogSubTitle, { children: "This modal uses the \"outline\" shadow variant." })] }), _jsx(DialogBody, { children: _jsx(Body, { variant: "body-md", children: Dummy_Para }) }), _jsxs(DialogFooter, { variant: "outline", children: [_jsx(DialogAction, { asChild: true, children: _jsx(Button, { variant: "fill", size: "lg", className: "w-1/2 mr-2", onClick: function () { return alert("Action confirmed!"); }, children: "Confirm" }) }), _jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "outline", size: "lg", className: "w-1/2", onClick: function () { return alert("Action cancelled!"); }, children: "Close" }) })] })] })] })); };
-export var BlockButtonModal = function () { return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Open Block Modal" }) }), _jsxs(DialogContent, { size: "lg", children: [_jsxs(DialogHeader, { variant: "outline", children: [_jsx(DialogTitle, { children: "Outline Modal" }), _jsx(DialogSubTitle, { children: "This modal uses the \"outline\" shadow variant." })] }), _jsx(DialogBody, { children: _jsx(Body, { variant: "body-md", children: Dummy_Para }) }), _jsx(DialogFooter, { variant: "outline", children: _jsx(DialogAction, { asChild: true, children: _jsx(Button, { variant: "fill", size: "lg", className: "w-full", onClick: function () { return alert("Action confirmed!"); }, children: "Confirm" }) }) })] })] })); };
-export var NoCloseIconModal = function () { return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Open Modal Without Close Icon" }) }), _jsxs(DialogContent, { size: "md", showCloseIcon: false, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "No Close Icon" }), _jsx(DialogSubTitle, { children: "This modal does not show the close icon." })] }), _jsx(DialogBody, { children: "You can put any content here. Use the footer button to close." }), _jsx(DialogFooter, { children: _jsx(DialogClose, { asChild: true, children: _jsx(Button, { children: "Close" }) }) })] })] })); };
-export var ModalWithoutHeader = function () { return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Open Info Modal" }) }), _jsxs(DialogContent, { size: "lg", children: [_jsx(DialogHeader, { className: "min-h-[3rem]", variant: "outline" }), _jsxs(DialogBody, { className: "flex flex-col items-center justify-center gap-7", children: [_jsxs(Avatar, { size: "huge", children: [_jsx(AvatarImage, { alt: "Avatar", src: "/images/avatar.png" }), _jsx(AvatarFallback, { children: "AB" })] }), _jsxs("div", { className: "flex flex-col items-center", children: [_jsx(Body, { variant: "body-md", children: "Designation" }), _jsx(Heading, { variant: "heading-md", children: "Heading" })] }), _jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx(LUIcon, { icon: "envelope", size: "lg" }), _jsx(Body, { variant: "body-md", className: "text-gray-600 truncate min-w-0", children: "testing@gmail.com" })] }), _jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx(LUIcon, { icon: "phone", size: "lg" }), _jsx(Body, { variant: "body-md", className: "text-gray-600 truncate min-w-0", children: "03764734829" })] })] }), _jsx(Body, { variant: "body-md", children: Dummy_Para })] })] })] })); };

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

@@ -1,168 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { buttonStyles } from "../Button";
-import { variant } from "../Button/Button/Button";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "../Dropdown/select";
-import { Body } from "../Typography/Body/body";
-import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis, } from "./pagination";
-import { useState } from "react";
-var range = function (start, end) {
-    return Array.from({ length: end - start + 1 }, function (_, i) { return start + i; });
-};
-export default {
-    title: "Components/Pagination",
-    component: Pagination,
-    tags: ["autodocs"],
-    parameters: {
-        docs: {
-            description: {
-                component: "A component for displaying pagination controls.",
-            },
-        },
-    },
-};
-var Template = function (args) { return (_jsx(Pagination, { children: _jsxs(PaginationContent, { children: [_jsx(PaginationItem, { children: _jsx(PaginationPrevious, { size: args.size, color: args.color, variant: args.variant, href: "#" }) }), range(1, 5).map(function (page) { return (_jsx(PaginationItem, { children: _jsx(PaginationLink, { size: args.size, color: args.color, variant: args.variant, href: "#", isActive: page === 1, children: page }) }, page)); }), _jsx(PaginationItem, { children: _jsx(PaginationNext, { size: args.size, color: args.color, variant: args.variant, href: "#" }) })] }) })); };
-export var Default = Template.bind({});
-Default.args = {};
-Default.argTypes = {
-    size: {
-        control: { type: "select" },
-        options: Object.keys(buttonStyles.size),
-        description: "Size variant for Pagination",
-        table: {
-            defaultValue: { summary: "md" },
-            type: { summary: "enum" },
-            category: "Pagination",
-        },
-    },
-    color: {
-        control: { type: "select" },
-        options: Object.keys(buttonStyles.fillColor),
-        description: "Color theme for Pagination",
-        table: {
-            defaultValue: { summary: "gray" },
-            type: { summary: "enum" },
-            category: "Pagination",
-        },
-    },
-    variant: {
-        control: { type: "select" },
-        options: Object.keys(variant),
-        description: "Variant for Pagination (outline | fill | link)",
-        table: {
-            defaultValue: { summary: "ghost" },
-            type: { summary: "enum" },
-            category: "Pagination",
-        },
-    },
-};
-// Pagination with Ellipsis
-export var WithEllipsis = function () {
-    var pages = [1, 2, "ellipsis", 8, 9, 10];
-    return (_jsx(Pagination, { children: _jsxs(PaginationContent, { children: [_jsx(PaginationItem, { children: _jsx(PaginationPrevious, { color: "red", href: "#" }) }), pages.map(function (page, idx) {
-                    return page === "ellipsis" ? (_jsx(PaginationItem, { children: _jsx(PaginationEllipsis, { color: "red" }) }, "ellipsis-" + idx)) : (_jsx(PaginationItem, { children: _jsx(PaginationLink, { color: "red", href: "#", isActive: page === 1, children: page }) }, page));
-                }), _jsx(PaginationItem, { children: _jsx(PaginationNext, { color: "red", href: "#" }) })] }) }));
-};
-WithEllipsis.parameters = {
-    docs: {
-        description: {
-            story: "Pagination example with an ellipsis to indicate skipped pages.",
-        },
-    },
-};
-// All Colors
-export var AllColors = function () { return (_jsx("div", { className: "flex flex-col gap-6", children: Object.keys(buttonStyles.fillColor).map(function (color) { return (_jsxs("div", { children: [_jsx("div", { className: "text-xl font-medium", children: color }), _jsx(Pagination, { children: _jsxs(PaginationContent, { children: [_jsx(PaginationItem, { children: _jsx(PaginationPrevious, { color: color, href: "#" }) }), range(1, 5).map(function (page) { return (_jsx(PaginationItem, { children: _jsx(PaginationLink, { color: color, href: "#", isActive: page === 1, children: page }) }, page)); }), _jsx(PaginationItem, { children: _jsx(PaginationNext, { color: color, href: "#" }) })] }) })] }, color)); }) })); };
-AllColors.parameters = {
-    docs: {
-        description: {
-            story: "Shows Pagination in all color variants.",
-        },
-    },
-};
-// All Variants
-export var AllVariants = function () { return (_jsx("div", { className: "flex flex-col gap-6", children: Object.keys(variant).map(function (v) { return (_jsxs("div", { children: [_jsx("div", { className: "text-xl font-medium", children: v }), _jsx(Pagination, { children: _jsxs(PaginationContent, { children: [_jsx(PaginationItem, { children: _jsx(PaginationPrevious, { variant: v, href: "#" }) }), range(1, 5).map(function (page) { return (_jsx(PaginationItem, { children: _jsx(PaginationLink, { variant: v, href: "#", isActive: page === 1, children: page }) }, page)); }), _jsx(PaginationItem, { children: _jsx(PaginationNext, { variant: v, href: "#" }) })] }) })] }, v)); }) })); };
-AllVariants.parameters = {
-    docs: {
-        description: {
-            story: "Shows Pagination in all variant styles (fill, outline, link, ghost).",
-        },
-    },
-};
-// All Sizes
-export var AllSizes = function () { return (_jsx("div", { className: "flex flex-col gap-6", children: Object.keys(buttonStyles.size).map(function (size) { return (_jsxs("div", { children: [_jsx("div", { className: "text-xl font-medium", children: size }), _jsx(Pagination, { children: _jsxs(PaginationContent, { children: [_jsx(PaginationItem, { children: _jsx(PaginationPrevious, { size: size, href: "#" }) }), range(1, 5).map(function (page) { return (_jsx(PaginationItem, { children: _jsx(PaginationLink, { size: size, href: "#", isActive: page === 1, children: page }) }, page)); }), _jsx(PaginationItem, { children: _jsx(PaginationNext, { size: size, href: "#" }) })] }) })] }, size)); }) })); };
-AllSizes.parameters = {
-    docs: {
-        description: {
-            story: "Shows Pagination in all size variants.",
-        },
-    },
-};
-// Table of Pagination Stories
-export var TablePagination = function () { return (_jsxs("div", { className: "flex  gap-6", children: [_jsx(Pagination, { children: _jsxs(PaginationContent, { children: [_jsx(PaginationItem, { children: _jsx(PaginationPrevious, { href: "#" }) }), range(1, 5).map(function (page) { return (_jsx(PaginationItem, { children: _jsx(PaginationLink, { href: "#", isActive: page === 1, children: page }) }, page)); }), _jsx(PaginationItem, { children: _jsx(PaginationNext, { href: "#" }) })] }) }), _jsxs("div", { className: "inline-flex items-center gap-4", children: [_jsxs(Select, { defaultValue: "10", onValueChange: function () { }, children: [_jsx(SelectTrigger, { color: "default", shape: "rectangular", size: "md", variant: "fill", defaultValue: "10", children: _jsx(SelectValue, { placeholder: "Select an option", defaultValue: "10" }) }), _jsxs(SelectContent, { defaultValue: "10", className: "w-32", children: [_jsx(SelectItem, { value: "10", children: "10" }), _jsx(SelectItem, { value: "20", children: "20" }), _jsx(SelectItem, { value: "30", children: "30" })] })] }), _jsx(Body, { variant: "body-sm", className: "text-nowrap", children: "Showing 1 - 10 of 13" })] })] })); };
-TablePagination.parameters = {
-    docs: {
-        description: {
-            story: "Shows Pagination in all size variants.",
-        },
-    },
-};
-// Material-UI Style Pagination
-export var MultiPagination = function () {
-    var _a = useState(1), selectedPage = _a[0], setSelectedPage = _a[1];
-    var totalPages = 10;
-    var siblingCount = 1; // Number of pages to show on each side of the current page
-    var boundaryCount = 1; // Always show first and last page
-    // Helper to generate the pagination range
-    function getPaginationRange() {
-        var range = [];
-        var leftSibling = Math.max(selectedPage - siblingCount, boundaryCount + 2);
-        var rightSibling = Math.min(selectedPage + siblingCount, totalPages - boundaryCount - 1);
-        // Show all pages if total is small
-        if (totalPages <= 7) {
-            for (var i = 1; i <= totalPages; i++)
-                range.push(i);
-            return range;
-        }
-        // Always show first N pages
-        for (var i = 1; i <= boundaryCount; i++) {
-            range.push(i);
-        }
-        // Show left ellipsis if needed
-        if (leftSibling > boundaryCount + 2) {
-            range.push("ellipsis");
-        }
-        else {
-            for (var i = boundaryCount + 1; i < leftSibling; i++) {
-                range.push(i);
-            }
-        }
-        // Show middle pages
-        for (var i = leftSibling; i <= rightSibling; i++) {
-            range.push(i);
-        }
-        // Show right ellipsis if needed
-        if (rightSibling < totalPages - boundaryCount - 1) {
-            range.push("ellipsis");
-        }
-        else {
-            for (var i = rightSibling + 1; i < totalPages - boundaryCount + 1; i++) {
-                range.push(i);
-            }
-        }
-        // Always show last N pages
-        for (var i = totalPages - boundaryCount + 1; i <= totalPages; i++) {
-            range.push(i);
-        }
-        return range;
-    }
-    var pages = getPaginationRange();
-    return (_jsx(Pagination, { children: _jsxs(PaginationContent, { children: [_jsx(PaginationItem, { children: _jsx(PaginationPrevious, { href: "#", onClick: function () { return setSelectedPage(function (p) { return Math.max(1, p - 1); }); } }) }), pages.map(function (page, idx) {
-                    return page === "ellipsis" ? (_jsx(PaginationItem, { children: _jsx(PaginationEllipsis, {}) }, "ellipsis-" + idx)) : (_jsx(PaginationItem, { children: _jsx(PaginationLink, { href: "#", isActive: selectedPage === page, onClick: function () { return setSelectedPage(Number(page)); }, children: page }) }, page));
-                }), _jsx(PaginationItem, { children: _jsx(PaginationNext, { href: "#", onClick: function () { return setSelectedPage(function (p) { return Math.min(totalPages, p + 1); }); } }) })] }) }));
-};
-MultiPagination.parameters = {
-    docs: {
-        description: {
-            story: "MultiPagination-UI style pagination: shows a window of pages, ellipses, and always the first/last page. Ellipses appear and disappear as you select different pages.",
-        },
-    },
-};