@kala-ui/react 0.0.1-beta.7 → 0.0.2

package/dist/components/loading-overlay/loading-overlay.stories.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Button } from "../button";
+import { LoadingOverlay } from "./loading-overlay";
+const meta = {
+    title: "Components/LoadingOverlay",
+    component: LoadingOverlay,
+    parameters: {
+        layout: "centered",
+    },
+    tags: ["autodocs"],
+    argTypes: {
+        visible: { control: "boolean" },
+        zIndex: { control: "number" },
+        transitionDuration: { control: "number" },
+    },
+};
+export default meta;
+const LoadingOverlayDemo = (props) => {
+    const [visible, setVisible] = React.useState(false);
+    // Toggle visible state for demo
+    const toggle = () => setVisible((v) => !v);
+    return (_jsxs("div", { className: "relative w-80 h-40 border rounded p-4 flex flex-col items-center justify-center gap-4 overflow-hidden", children: [_jsxs("div", { className: "text-center", children: [_jsx("p", { className: "font-medium mb-2", children: "Form or Content" }), _jsx("p", { className: "text-sm text-gray-500 mb-4", children: "This content will be covered by the overlay" }), _jsx(Button, { onClick: toggle, size: "sm", children: visible ? "Hide Overlay" : "Show Overlay" })] }), _jsx(LoadingOverlay, { visible: visible, zIndex: 10, ...props })] }));
+};
+export const Default = {
+    render: (args) => _jsx(LoadingOverlayDemo, { ...args }),
+    args: {
+        overlayProps: { radius: "sm", blur: 2 },
+    },
+};
+export const CustomLoader = {
+    render: (args) => _jsx(LoadingOverlayDemo, { ...args }),
+    args: {
+        loaderProps: {
+            children: (_jsx("div", { className: "bg-white p-3 rounded shadow-lg text-sm font-medium", children: "Loading custom content..." })),
+        },
+        overlayProps: { color: "rgba(0,0,0,0.4)", blur: 1 },
+    },
+};
+export const WithTransition = {
+    render: (args) => _jsx(LoadingOverlayDemo, { ...args }),
+    args: {
+        transitionDuration: 500,
+        overlayProps: { radius: "sm", blur: 2 },
+    },
+};

package/dist/components/metric-card/metric-card-skeleton.js

@@ -7,8 +7,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import * as React from "react";
 import { cn } from "../../lib/utils";
-import { Card } from "../card/card";
-import { Skeleton } from "../skeleton/skeleton";
+import { Card } from "../card";
+import { Skeleton } from "../skeleton";
 import { SkeletonCircle } from "../skeleton/skeleton-patterns";
 /**
  * Metric Card skeleton component with multiple variants

package/dist/components/metric-card/metric-card.js

@@ -8,7 +8,7 @@ const MetricCard = React.forwardRef(({ title, value, icon, change, changeLabel,
         if (skeleton) {
             return (_jsx(Card, { ref: ref, "data-comp": "metric-card", className: cn(className), ...props, children: skeleton }));
         }
-        return (_jsx(MetricCardSkeleton, { className: className, ...skeletonConfig }));
+        return _jsx(MetricCardSkeleton, { className: className, ...skeletonConfig });
     }
     const getChangeColor = (changeValue) => {
         if (changeValue > 0)

package/dist/components/multi-select/multi-select-skeleton.js

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Shows selected tags and input area.
  */
 import { cn } from "../../lib/utils";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 /**
  * Multi-Select skeleton component
  *

package/dist/components/multi-select/multi-select.stories.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 import { MultiSelect } from "./multi-select";
 const meta = {
     title: "Forms/MultiSelect",

package/dist/components/nav-link/index.d.ts

@@ -0,0 +1 @@
+export * from "./nav-link";

package/dist/components/nav-link/index.js

@@ -0,0 +1 @@
+export * from "./nav-link";

package/dist/components/nav-link/nav-link.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+export interface NavLinkProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+    /** Link label */
+    label: React.ReactNode;
+    /** Link description */
+    description?: React.ReactNode;
+    /** Left icon */
+    icon?: React.ReactNode;
+    /** Right section (e.g. badge, icon) */
+    rightSection?: React.ReactNode;
+    /** Active state */
+    active?: boolean;
+    /** Collapsed/Expanded state for nested items */
+    defaultOpened?: boolean;
+    /** Controlled opened state */
+    opened?: boolean;
+    /** Callback for opened state change */
+    onChangeOpened?: (opened: boolean) => void;
+    /** Nested links */
+    children?: React.ReactNode;
+    /** Disable right section rotation when opened */
+    disableRightSectionRotation?: boolean;
+    /** Indentation for nested items */
+    indent?: boolean;
+}
+export declare const NavLink: React.ForwardRefExoticComponent<NavLinkProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/nav-link/nav-link.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+export const NavLink = React.forwardRef(({ className, label, description, icon, rightSection, active, defaultOpened = false, opened: openedProp, onChangeOpened, children, disableRightSectionRotation = false, indent = false, onClick, ...props }, ref) => {
+    const [opened, setOpened] = React.useState(defaultOpened);
+    const isOpened = openedProp !== undefined ? openedProp : opened;
+    const handleToggle = (e) => {
+        if (children) {
+            e.preventDefault();
+            if (openedProp === undefined) {
+                setOpened(!opened);
+            }
+            onChangeOpened?.(!isOpened);
+        }
+        onClick?.(e);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("button", { ref: ref, className: cn("flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", active
+                    ? "bg-accent text-accent-foreground"
+                    : "text-muted-foreground", className), onClick: handleToggle, ...props, children: [icon && (_jsx("span", { className: "flex items-center justify-center", children: icon })), _jsxs("div", { className: "flex flex-1 flex-col items-start overflow-hidden", children: [_jsx("span", { className: "truncate", children: label }), description && (_jsx("span", { className: "truncate text-xs text-muted-foreground font-normal", children: description }))] }), (rightSection || children) && (_jsx("span", { className: cn("flex items-center justify-center text-muted-foreground transition-transform duration-200", children &&
+                            !disableRightSectionRotation &&
+                            opened &&
+                            "rotate-90"), children: rightSection ||
+                            (children && _jsx(ChevronRight, { className: "h-4 w-4" })) }))] }), children && opened && (_jsx("div", { className: cn("flex flex-col gap-1", indent && "pl-4"), children: children }))] }));
+});
+NavLink.displayName = "NavLink";

package/dist/components/nav-link/nav-link.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { NavLink } from "./nav-link";
+declare const meta: Meta<typeof NavLink>;
+export default meta;
+type Story = StoryObj<typeof NavLink>;
+export declare const Default: Story;
+export declare const Active: Story;
+export declare const WithDescription: Story;
+export declare const Nested: Story;

package/dist/components/nav-link/nav-link.stories.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Activity, Home, Settings, User } from "lucide-react";
+import { NavLink } from "./nav-link";
+const meta = {
+    title: "Components/NavLink",
+    component: NavLink,
+    tags: ["autodocs"],
+    argTypes: {
+        active: { control: "boolean" },
+        disabled: { control: "boolean" },
+        indent: { control: "boolean" },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        label: "Dashboard",
+        icon: _jsx(Home, { className: "h-4 w-4" }),
+    },
+};
+export const Active = {
+    args: {
+        label: "Settings",
+        icon: _jsx(Settings, { className: "h-4 w-4" }),
+        active: true,
+    },
+};
+export const WithDescription = {
+    args: {
+        label: "Profile",
+        description: "Manage your personal information",
+        icon: _jsx(User, { className: "h-4 w-4" }),
+    },
+};
+export const Nested = {
+    render: () => (_jsxs("div", { className: "w-64 border rounded-md p-2", children: [_jsx(NavLink, { label: "Main", icon: _jsx(Home, { className: "h-4 w-4" }) }), _jsxs(NavLink, { label: "Settings", icon: _jsx(Settings, { className: "h-4 w-4" }), defaultOpened: true, children: [_jsx(NavLink, { label: "Account", indent: true }), _jsx(NavLink, { label: "Security", indent: true, active: true }), _jsx(NavLink, { label: "Notifications", indent: true })] }), _jsx(NavLink, { label: "Activity", icon: _jsx(Activity, { className: "h-4 w-4" }), rightSection: _jsx("span", { className: "text-xs font-bold", children: "New" }) })] })),
+};

package/dist/components/navigation/navigation-skeleton.js

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Supports horizontal and vertical layouts with configurable items.
  */
 import { cn } from "../../lib/utils";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 /**
  * Navigation skeleton component
  *

package/dist/components/number-input/index.d.ts

@@ -0,0 +1 @@
+export * from "./number-input";

package/dist/components/number-input/index.js

@@ -0,0 +1 @@
+export * from "./number-input";

package/dist/components/number-input/number-input.d.ts

@@ -0,0 +1,40 @@
+import * as React from "react";
+export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+    /**
+     * Value for controlled component
+     */
+    value?: number | string;
+    /**
+     * Default value for uncontrolled component
+     */
+    defaultValue?: number | string;
+    /**
+     * Callback fired when value changes
+     */
+    onChange?: (value: number | string) => void;
+    /**
+     * Minimum value
+     */
+    min?: number;
+    /**
+     * Maximum value
+     */
+    max?: number;
+    /**
+     * Step size
+     */
+    step?: number;
+    /**
+     * If true, renders with error styles
+     */
+    error?: boolean;
+    /**
+     * If true, renders with success styles
+     */
+    success?: boolean;
+    /**
+     * If true, hides the controls (spinners)
+     */
+    hideControls?: boolean;
+}
+export declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/number-input/number-input.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import * as React from "react";
+import { inputStyles } from "../../config/input";
+import { cn } from "../../lib/utils";
+export const NumberInput = React.forwardRef(({ className, value: valueProp, defaultValue, onChange, min, max, step = 1, disabled, error, success, hideControls = false, ...props }, ref) => {
+    const [internalValue, setInternalValue] = React.useState((valueProp ?? defaultValue ?? "").toString());
+    React.useEffect(() => {
+        if (valueProp !== undefined) {
+            setInternalValue(valueProp.toString());
+        }
+    }, [valueProp]);
+    const handleChange = (e) => {
+        const val = e.target.value;
+        if (val === "" || /^-?\d*\.?\d*$/.test(val)) {
+            setInternalValue(val);
+            onChange?.(val === "" ? "" : Number.parseFloat(val));
+        }
+    };
+    const handleBlur = (e) => {
+        if (internalValue === "" || internalValue === "-")
+            return;
+        let val = Number.parseFloat(internalValue);
+        let changed = false;
+        if (min !== undefined && val < min) {
+            val = min;
+            changed = true;
+        }
+        if (max !== undefined && val > max) {
+            val = max;
+            changed = true;
+        }
+        if (changed) {
+            setInternalValue(val.toString());
+            onChange?.(val);
+        }
+        props.onBlur?.(e);
+    };
+    const increment = () => {
+        let val = Number.parseFloat(internalValue || "0");
+        if (Number.isNaN(val))
+            val = 0;
+        const next = val + step;
+        if (max !== undefined && next > max)
+            return;
+        // Fix floating point precision
+        const precision = step.toString().split(".")[1]?.length || 0;
+        const nextFixed = precision > 0 ? next.toFixed(precision) : next.toString();
+        setInternalValue(nextFixed);
+        onChange?.(Number.parseFloat(nextFixed));
+    };
+    const decrement = () => {
+        let val = Number.parseFloat(internalValue || "0");
+        if (Number.isNaN(val))
+            val = 0;
+        const next = val - step;
+        if (min !== undefined && next < min)
+            return;
+        // Fix floating point precision
+        const precision = step.toString().split(".")[1]?.length || 0;
+        const nextFixed = precision > 0 ? next.toFixed(precision) : next.toString();
+        setInternalValue(nextFixed);
+        onChange?.(Number.parseFloat(nextFixed));
+    };
+    return (_jsxs("div", { className: "relative flex items-center", children: [_jsx("input", { type: "text", role: "spinbutton", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": internalValue === "" ? undefined : Number.parseFloat(internalValue), ref: ref, value: internalValue, onChange: handleChange, onBlur: handleBlur, disabled: disabled, className: cn(inputStyles.base, error && inputStyles.error, success && inputStyles.success, !hideControls && "pr-10", className), ...props }), !hideControls && !disabled && (_jsxs("div", { className: "absolute right-1 top-1 bottom-1 flex flex-col border-l", children: [_jsx("button", { type: "button", tabIndex: -1, className: "flex h-1/2 items-center justify-center px-2 text-muted-foreground hover:bg-accent hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50", onClick: increment, disabled: max !== undefined &&
+                            Number.parseFloat(internalValue || "0") >= max, children: _jsx(ChevronUp, { className: "h-3 w-3" }) }), _jsx("button", { type: "button", tabIndex: -1, className: "flex h-1/2 items-center justify-center px-2 text-muted-foreground hover:bg-accent hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50", onClick: decrement, disabled: min !== undefined &&
+                            Number.parseFloat(internalValue || "0") <= min, children: _jsx(ChevronDown, { className: "h-3 w-3" }) })] }))] }));
+});
+NumberInput.displayName = "NumberInput";

package/dist/components/number-input/number-input.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { NumberInput } from "./number-input";
+declare const meta: Meta<typeof NumberInput>;
+export default meta;
+type Story = StoryObj<typeof NumberInput>;
+export declare const Default: Story;
+export declare const WithMinMax: Story;
+export declare const WithStep: Story;
+export declare const HiddenControls: Story;
+export declare const WithError: Story;
+export declare const Disabled: Story;

package/dist/components/number-input/number-input.stories.js

@@ -0,0 +1,54 @@
+import { NumberInput } from "./number-input";
+const meta = {
+    title: "Components/NumberInput",
+    component: NumberInput,
+    tags: ["autodocs"],
+    argTypes: {
+        min: { control: "number" },
+        max: { control: "number" },
+        step: { control: "number" },
+        error: { control: "boolean" },
+        success: { control: "boolean" },
+        hideControls: { control: "boolean" },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        placeholder: "Enter a number",
+    },
+};
+export const WithMinMax = {
+    args: {
+        placeholder: "Age (18-100)",
+        min: 18,
+        max: 100,
+        defaultValue: 25,
+    },
+};
+export const WithStep = {
+    args: {
+        placeholder: "Step 0.5",
+        step: 0.5,
+        defaultValue: 1.5,
+    },
+};
+export const HiddenControls = {
+    args: {
+        placeholder: "No controls",
+        hideControls: true,
+        defaultValue: 10,
+    },
+};
+export const WithError = {
+    args: {
+        defaultValue: 100,
+        error: true,
+    },
+};
+export const Disabled = {
+    args: {
+        defaultValue: 50,
+        disabled: true,
+    },
+};

package/dist/components/overlay/index.d.ts

@@ -0,0 +1 @@
+export * from "./overlay";

package/dist/components/overlay/index.js

@@ -0,0 +1 @@
+export * from "./overlay";

package/dist/components/overlay/overlay.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { type BoxProps } from "../box";
+export interface OverlayProps extends BoxProps {
+    /** Overlay background color, ignored if gradient is set, default #000 */
+    color?: string;
+    /** Overlay background opacity, ignored if gradient is set, default 0.6 */
+    backgroundOpacity?: number;
+    /** Overlay background blur in px */
+    blur?: number;
+    /** Overlay background gradient, overrides color and backgroundOpacity */
+    gradient?: string;
+    /** Overlay z-index */
+    zIndex?: number;
+    /** Use fixed position instead of absolute, default false */
+    fixed?: boolean;
+    /** Overlay border radius */
+    radius?: number | string;
+    /** Content inside overlay */
+    children?: React.ReactNode;
+}
+declare const Overlay: React.ForwardRefExoticComponent<Omit<OverlayProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export { Overlay };

package/dist/components/overlay/overlay.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { Box } from "../box";
+// Helper to convert hex to rgb (simplified)
+const hexToRgb = (hex) => {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result
+        ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16),
+        }
+        : null;
+};
+const Overlay = React.forwardRef(({ className, color = "#000", backgroundOpacity = 0.6, blur, gradient, zIndex, fixed = false, radius, style, children, ...props }, ref) => {
+    const backgroundStyle = gradient
+        ? { backgroundImage: gradient }
+        : color.startsWith("#")
+            ? {
+                backgroundColor: `rgba(${hexToRgb(color)?.r ?? 0}, ${hexToRgb(color)?.g ?? 0}, ${hexToRgb(color)?.b ?? 0}, ${backgroundOpacity})`,
+            }
+            : {
+                backgroundColor: color,
+                // If we can't parse color, we can't easily set rgba.
+                // We could use `opacity` but that affects children.
+                // Alternative: Use a pseudo-element or just accept that named colors + opacity prop might behave like standard opacity if we can't mix them.
+                // Or just leave it as is and let user pass rgba string as color.
+            };
+    // Refined approach: If we used the `opacity` CSS property, it would fade out the children (like text/loader).
+    // The requirement is to only fade the background.
+    // So if it's a hex color, we convert to RGBA.
+    // If it's not hex, we rely on the user passing a valid color string (which might be rgba).
+    // If they pass a named color like 'red' and opacity 0.5, we can't easily mix them without a lib.
+    // I will stick to hex conversion for now as it covers most cases (default is #000).
+    return (_jsx(Box, { ref: ref, className: cn(fixed ? "fixed" : "absolute", "inset-0", className), style: {
+            ...backgroundStyle,
+            backdropFilter: blur ? `blur(${blur}px)` : undefined,
+            zIndex,
+            borderRadius: radius,
+            ...style,
+        }, ...props, children: children }));
+});
+Overlay.displayName = "Overlay";
+export { Overlay };

package/dist/components/overlay/overlay.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Overlay } from "./overlay";
+declare const meta: Meta<typeof Overlay>;
+export default meta;
+type Story = StoryObj<typeof Overlay>;
+export declare const Default: Story;
+export declare const WithBlur: Story;
+export declare const Gradient: Story;
+export declare const WithContent: Story;

package/dist/components/overlay/overlay.stories.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "../button";
+import { Overlay } from "./overlay";
+const meta = {
+    title: "Components/Overlay",
+    component: Overlay,
+    parameters: {
+        layout: "centered",
+    },
+    tags: ["autodocs"],
+    argTypes: {
+        color: { control: "color" },
+        backgroundOpacity: { control: { type: "range", min: 0, max: 1, step: 0.05 } },
+        blur: { control: { type: "range", min: 0, max: 20, step: 1 } },
+        zIndex: { control: { type: "number" } },
+        radius: { control: { type: "number" } },
+        fixed: { control: "boolean" },
+    },
+};
+export default meta;
+export const Default = {
+    render: (args) => (_jsxs("div", { className: "relative h-40 w-80 bg-gray-100 flex items-center justify-center", children: [_jsx("div", { className: "text-gray-700 font-medium", children: "Content under overlay" }), _jsx(Overlay, { ...args })] })),
+    args: {
+        backgroundOpacity: 0.6,
+        blur: 0,
+    },
+};
+export const WithBlur = {
+    render: (args) => (_jsxs("div", { className: "relative h-40 w-80 bg-gray-100 flex items-center justify-center", children: [_jsx("div", { className: "text-gray-700 font-medium", children: "Content under blur" }), _jsx(Overlay, { ...args })] })),
+    args: {
+        backgroundOpacity: 0.6,
+        blur: 2,
+    },
+};
+export const Gradient = {
+    render: (args) => (_jsxs("div", { className: "relative h-40 w-80 bg-gray-100 flex items-center justify-center", children: [_jsx("div", { className: "text-gray-700 font-medium", children: "Content under gradient" }), _jsx(Overlay, { ...args })] })),
+    args: {
+        gradient: "linear-gradient(145deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0) 100%)",
+    },
+};
+export const WithContent = {
+    render: (args) => (_jsxs("div", { className: "relative h-40 w-80 bg-gray-100", children: [_jsx("div", { className: "p-4 text-gray-700", children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit." }), _jsx(Overlay, { ...args, className: "flex items-center justify-center", children: _jsx(Button, { variant: "secondary", children: "Overlay Action" }) })] })),
+    args: {
+        backgroundOpacity: 0.8,
+        color: "#000",
+    },
+};

package/dist/components/page-transition/page-transition.stories.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { Button } from "../button/button";
+import { Button } from "../button";
 import { PageTransition } from "./page-transition";
 const meta = {
     title: "Components/PageTransition",

package/dist/components/pagination/index.d.ts

@@ -1,3 +1,3 @@
-export { generatePagination, type PageItem, Pagination, PaginationContent, type PaginationContentProps, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationNext, type PaginationNextProps, PaginationPrevious, type PaginationPreviousProps, type PaginationProps, } from "./pagination";
+export { Pagination, PaginationContent, type PaginationContentProps, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationNext, type PaginationNextProps, PaginationPrevious, type PaginationPreviousProps, type PaginationProps, } from "./pagination";
 export type { PaginationSkeletonConfig, PaginationSkeletonProps, } from "./pagination-skeleton";
 export { PaginationSkeleton } from "./pagination-skeleton";

package/dist/components/pagination/index.js

@@ -1,2 +1,2 @@
-export { generatePagination, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "./pagination";
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "./pagination";
 export { PaginationSkeleton } from "./pagination-skeleton";

package/dist/components/pagination/pagination-skeleton.js

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Shows page buttons and navigation controls.
  */
 import { cn } from "../../lib/utils";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 /**
  * Pagination skeleton component
  *