linkedunion-design-kit 1.9.2 → 1.9.4

package/dist/src/components/Input/Input.stories.jsx

@@ -0,0 +1,250 @@
+import React from "react";
+import { Input, inputVariantConfig } from "./input";
+import { inputType } from "."; // Ensure this exports an object like { text: 'text', email: 'email', ... }
+import { Label } from "../Label/Label";
+import LUIcon from "../Icons/LUIcon";
+import Tooltip from "../ToolTip/Tooltip";
+import { Caption } from "../Typography/Caption/caption";
+export default {
+    title: "Components/Input",
+    component: Input,
+    tags: ["autodocs"],
+    argTypes: {
+        type: {
+            control: {
+                type: "select",
+                labels: Object.keys(inputType),
+            },
+            options: Object.keys(inputType),
+            defaultValue: "text",
+        },
+        variant: {
+            control: {
+                type: "select",
+            },
+            options: Object.keys(inputVariantConfig.variant),
+            defaultValue: "filled",
+        },
+        size: {
+            control: {
+                type: "select",
+            },
+            options: Object.keys(inputVariantConfig.size),
+            defaultValue: "lg",
+        },
+        color: {
+            control: {
+                type: "select",
+            },
+            options: Object.keys(inputVariantConfig.color),
+            defaultValue: "default",
+        },
+        startIcon: {
+            control: "text",
+            description: "Icon to display at the start of the input",
+        },
+        endIcon: {
+            control: "text",
+            description: "Icon to display at the end of the input",
+        },
+        placeholder: {
+            control: "text",
+            defaultValue: "Enter text",
+        },
+        disabled: {
+            control: "boolean",
+            defaultValue: false,
+        },
+        className: {
+            control: "text",
+        },
+    },
+};
+var Template = function (args) { return <Input {...args}/>; };
+export var Default = Template.bind({});
+Default.args = {
+    type: "text",
+    placeholder: "Enter your input",
+    variant: "filled",
+    size: "lg",
+};
+export var WithIcons = function () { return (<div className="space-y-4">
+    <div>
+      <Label variant={"label-md"}>Search with start icon</Label>
+      <Input placeholder="Search..." startIcon="magnifying-glass"/>
+    </div>
+    <div>
+      <Label className="block text-sm font-medium mb-2">
+        Email with end icon
+      </Label>
+      <Input placeholder="Enter email" endIcon="envelope" type="email"/>
+    </div>
+    <div>
+      <Label variant={"label-md"}>Password with both icons</Label>
+      <Input placeholder="Enter password" startIcon="lock" endIcon="eye" type="password"/>
+    </div>
+    <div>
+      <Label variant={"label-sm"}>User input</Label>
+      <Input placeholder="Enter username" startIcon="user"/>
+    </div>
+  </div>); };
+export var IconSizes = function () { return (<div className="space-y-4">
+    <div>
+      <Label variant={"label-sm"}>Small with icons</Label>
+      <Input placeholder="Small size" size="sm" startIcon="magnifying-glass" endIcon="xMark"/>
+    </div>
+    <div>
+      <Label variant={"label-md"}>Medium with icons</Label>
+      <Input placeholder="Medium size" size="md" startIcon="magnifying-glass" endIcon="xMark"/>
+    </div>
+    <div>
+      <Label variant={"label-lg"}>Large with icons</Label>
+      <Input placeholder="Large size" size="lg" startIcon="magnifying-glass" endIcon="xMark"/>
+    </div>
+  </div>); };
+export var Variants = function () { return (<div className="space-y-4">
+    <div>
+      <Label variant={"label-md"}>Filled</Label>
+      <Input placeholder="Filled variant" variant="filled"/>
+    </div>
+    <div>
+      <Label variant={"label-md"}>Outlined</Label>
+      <Input placeholder="Outlined variant" variant="outlined"/>
+    </div>
+  </div>); };
+export var Sizes = function () { return (<div className="space-y-4">
+    <div>
+      <Label variant={"label-md"}>Small</Label>
+      <Input placeholder="Small size" size="sm"/>
+    </div>
+    <div>
+      <Label variant={"label-md"}>Medium</Label>
+      <Input placeholder="Medium size" size="md"/>
+    </div>
+    <div>
+      <Label variant={"label-lg"}>Large (Default)</Label>
+      <Input placeholder="Large size" size="lg"/>
+    </div>
+  </div>); };
+export var VariantsWithIcons = function () { return (<div className="space-y-4">
+    <div>
+      <Label variant={"label-md"}>Filled with icons</Label>
+      <Input placeholder="Filled variant" variant="filled" startIcon="magnifying-glass" endIcon="xMark"/>
+    </div>
+    <div>
+      <Label variant={"label-md"}>Outlined with icons</Label>
+      <Input placeholder="Outlined variant" variant="outlined" startIcon="magnifying-glass" endIcon="xMark"/>
+    </div>
+  </div>); };
+export var ErrorValidation = function () {
+    var _a = React.useState("Steve"), email = _a[0], setEmail = _a[1];
+    var maxLength = 5;
+    var isError = email.length === 5;
+    var characterCount = email.length;
+    var handleEmailChange = function (e) {
+        var newValue = e.target.value;
+        // Restrict typing when exactly 5 characters
+        if (newValue.length <= 5) {
+            setEmail(newValue);
+        }
+    };
+    return (<div className="space-y-4">
+      <div>
+        <div className="flex items-center gap-2 mb-2">
+          <Label variant={"label-md"}>Name</Label>
+          <span className="text-red-600">*</span>
+          <Tooltip title="This is a tooltip for the email input field">
+            <LUIcon variant="padded" size="xs" shape="rounded" icon="question" color="light-blue"/>
+          </Tooltip>
+
+          <Caption variant="md" className={"ms-auto mb-1 ".concat(isError ? "text-red-600" : "text-gray-500")}>
+            <span className={isError ? "text-red-600" : "text-gray-900"}>
+              {characterCount}
+            </span>
+            /{maxLength}
+          </Caption>
+        </div>
+
+        <Input color={isError ? "danger" : "default"} placeholder="Enter your email address" variant="filled" type="email" value={email} onChange={handleEmailChange} startIcon="user" endIcon="envelope"/>
+        {email.length > 4 && (<Caption variant="md" className={"mt-1 ".concat(isError ? "text-red-600" : "text-gray-500")}>
+            {isError
+                ? "Email must be longer than 5 characters"
+                : "Please enter a valid email address"}
+          </Caption>)}
+      </div>
+    </div>);
+};
+export var SuccessValidation = function () {
+    var _a = React.useState("john_doe"), username = _a[0], setUsername = _a[1];
+    var maxLength = 20;
+    var isSuccess = username.length >= 6 && username.length <= 15;
+    var characterCount = username.length;
+    var handleUsernameChange = function (e) {
+        var newValue = e.target.value;
+        if (newValue.length <= maxLength) {
+            setUsername(newValue);
+        }
+    };
+    return (<div className="space-y-4">
+      <div>
+        <div className="flex items-center gap-2 mb-2">
+          <Label variant={"label-sm"}>Username</Label>
+          <span className="text-red-600">*</span>
+          <Tooltip title="Username must be 6-15 characters long">
+            <LUIcon variant="padded" size="xs" shape="rounded" icon="question" color="light-blue"/>
+          </Tooltip>
+
+          <Caption variant="md" className={"ms-auto mb-1 ".concat(isSuccess ? "text-green-600" : "text-gray-500")}>
+            <span className={isSuccess ? "text-green-600" : "text-gray-900"}>
+              {characterCount}
+            </span>
+            /{maxLength}
+          </Caption>
+        </div>
+
+        <Input color={isSuccess ? "success" : "default"} placeholder="Enter your username" variant="filled" type="text" value={username} onChange={handleUsernameChange} startIcon="user" endIcon={isSuccess ? "check" : "user-gear"}/>
+        <Caption variant="md" className={"mt-1 ".concat(isSuccess ? "text-green-600" : "text-gray-500")}>
+          {isSuccess
+            ? "Great! Username is available"
+            : "Username must be 6-15 characters"}
+        </Caption>
+      </div>
+    </div>);
+};
+export var WarningValidation = function () {
+    var _a = React.useState("pass123"), password = _a[0], setPassword = _a[1];
+    var maxLength = 30;
+    var hasWarning = password.length >= 4 && password.length < 8;
+    var characterCount = password.length;
+    var handlePasswordChange = function (e) {
+        var newValue = e.target.value;
+        if (newValue.length <= maxLength) {
+            setPassword(newValue);
+        }
+    };
+    return (<div className="space-y-4">
+      <div>
+        <div className="flex items-center gap-2 mb-2">
+          <Label variant={"label-md"}>Password</Label>
+          <span className="text-red-600">*</span>
+          <Tooltip title="Password should be at least 8 characters for better security">
+            <LUIcon variant="padded" size="xs" shape="rounded" icon="question" color="light-blue"/>
+          </Tooltip>
+
+          <Caption variant="md" className={"ms-auto mb-1 ".concat(hasWarning ? "text-yellow-600" : "text-gray-500")}>
+            <span className={hasWarning ? "text-yellow-600" : "text-gray-900"}>
+              {characterCount}
+            </span>
+            /{maxLength}
+          </Caption>
+        </div>
+
+        <Input color={hasWarning ? "warning" : "default"} placeholder="Enter your password" variant="filled" type="password" value={password} onChange={handlePasswordChange} startIcon="lock" endIcon={hasWarning ? "circle-exclamation" : "eye"}/>
+        <Caption variant="md" className={"mt-1 ".concat(hasWarning ? "text-yellow-600" : "text-gray-500")}>
+          {hasWarning
+            ? "Password is weak. Consider using 8+ characters"
+            : "Enter a secure password"}
+        </Caption>
+      </div>
+    </div>);
+};

package/dist/src/components/Input/input.jsx

@@ -0,0 +1,110 @@
+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 * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+import LUIcon from "../Icons/LUIcon";
+import { getIconSize, getPadding, getIconPosition } from "./";
+// Export variant configurations for reuse in stories
+export var inputVariantConfig = {
+    variant: {
+        filled: "focus-visible:bg-white focus-visible:border-blue-600 focus-visible:ring-blue-600",
+        outlined: "border border-gray-200 bg-transparent focus-visible:border-blue-600 focus-visible:ring-blue-600",
+    },
+    size: {
+        sm: "h-9 text-sm",
+        md: "h-10 text-normal",
+        lg: "h-12 text-base",
+    },
+    color: {
+        default: "",
+        danger: "border-red-600 focus-visible:border-red-600 focus-visible:ring-red-600",
+        warning: "border-yellow-500 focus-visible:border-yellow-500 focus-visible:ring-yellow-500",
+        success: "border-green-600 focus-visible:border-green-600 focus-visible:ring-green-600",
+    },
+    shape: {
+        rounded: "rounded-full",
+        square: "rounded-sm",
+    },
+};
+export var inputVariants = cva("file:text-foreground placeholder:text-muted-foreground selection:bg-primary text-gray-900 selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 !border bg-transparent text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+    variants: inputVariantConfig,
+    compoundVariants: [
+        // Filled variant with default color
+        {
+            variant: "filled",
+            color: "default",
+            class: "bg-white border-gray-200",
+        },
+        // Filled variant with danger color
+        {
+            variant: "filled",
+            color: "danger",
+            class: "bg-red-50 border-red-600 focus-visible:bg-red-50",
+        },
+        // Filled variant with warning color
+        {
+            variant: "filled",
+            color: "warning",
+            class: "bg-yellow-50 border-yellow-500 focus-visible:bg-yellow-50",
+        },
+        // Filled variant with success color
+        {
+            variant: "filled",
+            color: "success",
+            class: "bg-green-50 border-green-600 focus-visible:bg-green-50",
+        },
+        // Outlined variant - always transparent background
+        {
+            variant: "outlined",
+            color: "default",
+            class: "bg-transparent border-gray-200",
+        },
+        {
+            variant: "outlined",
+            color: "danger",
+            class: "bg-transparent",
+        },
+        {
+            variant: "outlined",
+            color: "warning",
+            class: "bg-transparent",
+        },
+        {
+            variant: "outlined",
+            color: "success",
+            class: "bg-transparent",
+        },
+    ],
+    defaultVariants: {
+        variant: "filled",
+        size: "md",
+        color: "default",
+        shape: "square",
+    },
+});
+function Input(_a) {
+    var className = _a.className, variant = _a.variant, _b = _a.size, size = _b === void 0 ? "md" : _b, type = _a.type, startIcon = _a.startIcon, endIcon = _a.endIcon, _c = _a.shape, shape = _c === void 0 ? "square" : _c, color = _a.color, props = __rest(_a, ["className", "variant", "size", "type", "startIcon", "endIcon", "shape", "color"]);
+    var iconSizeClass = getIconSize(size);
+    var paddingClass = getPadding(size, !!startIcon, !!endIcon);
+    var iconPosition = getIconPosition(size || "md");
+    return (<div className="relative">
+      {startIcon && (<div className={"absolute ".concat(iconPosition.left, " top-1/2 -translate-y-1/2 pointer-events-none z-10")}>
+          <LUIcon icon={startIcon} size={iconSizeClass}/>
+        </div>)}
+      <input type={type} data-slot="input" className={cn(inputVariants({ variant: variant, size: size, color: color, shape: shape }), paddingClass, className)} {...props}/>
+      {endIcon && (<div className={"absolute ".concat(iconPosition.right, " top-1/2 -translate-y-1/2 pointer-events-none z-10")}>
+          <LUIcon icon={endIcon} size={iconSizeClass}/>
+        </div>)}
+    </div>);
+}
+export { Input };

package/dist/src/components/Label/Label.jsx

@@ -0,0 +1,32 @@
+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 * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+export var variant = {
+    "label-xl": "!text-xl !leading-normal",
+    "label-lg": "!text-lg !leading-normal",
+    "label-md": "!text-base !leading-normal",
+    "label-sm": "!text-sm !leading-normal",
+};
+var labelVariants = cva("select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 !font-normal m-0", {
+    variants: { variant: variant },
+    defaultVariants: {
+        variant: "label-sm",
+    },
+});
+function Label(_a) {
+    var className = _a.className, variant = _a.variant, props = __rest(_a, ["className", "variant"]);
+    return (<LabelPrimitive.Root data-slot="label" className={cn(labelVariants({ variant: variant, className: className }))} {...props}/>);
+}
+export { Label, labelVariants };

package/dist/src/components/Label/Label.stories.jsx

@@ -0,0 +1,30 @@
+import { Label, variant } from "./Label";
+export default {
+    title: "Components/Label",
+    component: Label,
+    tags: ["autodocs"],
+};
+var Template = function (args) { return <Label {...args}></Label>; };
+export var _Label = Template.bind({});
+_Label.args = {
+    children: "Label",
+    variant: "label-sm",
+};
+_Label.argTypes = {
+    variant: {
+        control: { type: "select" },
+        options: Object.keys(variant),
+        description: "Label variant",
+        table: {
+            defaultValue: { summary: "label-sm" },
+            type: { summary: "string" },
+        },
+    },
+    htmlFor: {
+        control: "text",
+        description: "ID of the input element this label is for",
+        table: {
+            type: { summary: "string" },
+        },
+    },
+};

package/dist/src/components/Pagination/pagination.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { ButtonProps } from "../Button/Button/Button";
+import LUIcon from "../Icons/LUIcon";
+declare const Pagination: {
+    ({ className, ...props }: React.ComponentProps<"nav">): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const PaginationContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+declare const PaginationItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+type PaginationLinkProps = {
+    isActive?: boolean;
+    color?: ButtonProps["color"];
+    size?: ButtonProps["size"];
+    variant?: ButtonProps["variant"];
+} & React.ComponentProps<"a">;
+declare const PaginationLink: {
+    ({ className, isActive, size, color, variant, ...props }: PaginationLinkProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const PaginationPrevious: {
+    ({ className, ...props }: React.ComponentProps<typeof PaginationLink>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const PaginationNext: {
+    ({ className, ...props }: React.ComponentProps<typeof PaginationLink>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+type PaginationEllipsisProps = Omit<React.ComponentProps<typeof LUIcon>, "icon">;
+declare const PaginationEllipsis: {
+    ({ color, ...props }: PaginationEllipsisProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis, };

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

@@ -0,0 +1,68 @@
+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, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+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)));
+};
+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)));
+});
+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)));
+});
+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({
+            variant: isActive ? (variant === "link" ? variant : "fill") : variant,
+            size: size,
+            color: color,
+        }), className) }, props)));
+};
+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" })] })));
+};
+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" })] })));
+};
+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" })] }));
+};
+PaginationEllipsis.displayName = "PaginationEllipsis";
+export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis, };

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

@@ -0,0 +1,68 @@
+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 * as React from "react";
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { buttonVariants } from "../../components/ui/button";
+import { Button } from "../Button/Button/Button";
+var Pagination = function (_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (<nav role="navigation" aria-label="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 (<ul ref={ref} 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 (<li ref={ref} 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 ? "icon" : _b, props = __rest(_a, ["className", "isActive", "size"]);
+    return ((<a aria-current={isActive ? "page" : undefined} className={cn(buttonVariants({
+            variant: isActive ? "outline" : "ghost",
+            size: size,
+        }), className)}/>
+        ,
+            <Button {...props}/>)
+        /  >
+    );
+};
+PaginationLink.displayName = "PaginationLink";
+var PaginationPrevious = function (_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (<PaginationLink aria-label="Go to previous page" size="default" className={cn("gap-1 pl-2.5", className)} {...props}>
+    <ChevronLeft className="h-4 w-4"/>
+    <span>Previous</span>
+  </PaginationLink>);
+};
+PaginationPrevious.displayName = "PaginationPrevious";
+var PaginationNext = function (_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (<PaginationLink aria-label="Go to next page" size="default" className={cn("gap-1 pr-2.5", className)} {...props}>
+    <span>Next</span>
+    <ChevronRight className="h-4 w-4"/>
+  </PaginationLink>);
+};
+PaginationNext.displayName = "PaginationNext";
+var PaginationEllipsis = function (_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (<span aria-hidden className={cn("flex h-9 w-9 items-center justify-center", className)} {...props}>
+    <MoreHorizontal className="h-4 w-4"/>
+    <span className="sr-only">More pages</span>
+  </span>);
+};
+PaginationEllipsis.displayName = "PaginationEllipsis";
+export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis, };

package/dist/src/components/Pagination/pagination.stories.d.ts

@@ -0,0 +1,74 @@
+import { buttonStyles } from "../Button";
+import { variant } from "../Button/Button/Button";
+import { Meta } from "@storybook/react";
+declare const _default: Meta;
+export default _default;
+type PaginationColor = keyof typeof buttonStyles.fillColor;
+type PaginationSize = keyof typeof buttonStyles.size;
+type PaginationVariant = keyof typeof variant;
+type PaginationStoryArgs = {
+    size?: PaginationSize;
+    color?: PaginationColor;
+    variant?: PaginationVariant;
+};
+export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, PaginationStoryArgs>;
+export declare const WithEllipsis: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const AllColors: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const AllVariants: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const AllSizes: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const TablePagination: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const MultiPagination: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};