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

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

@@ -1,12 +1,36 @@
 import * as React from "react";
-export interface PaginationProps extends React.ComponentProps<"nav"> {
+export interface PaginationProps extends Omit<React.ComponentProps<"nav">, "onChange"> {
+    /**
+     * Total amount of pages
+     */
+    total?: number;
+    /**
+     * Active page
+     */
+    page?: number;
+    /**
+     * Initial active page
+     */
+    initialPage?: number;
+    /**
+     * Siblings amount on left/right side of selected page
+     */
+    siblings?: number;
+    /**
+     * Amount of elements visible on left/right edges
+     */
+    boundaries?: number;
+    /**
+     * Callback fired after change of each page
+     */
+    onChange?: (page: number) => void;
     /**
      * ARIA label for the navigation
      * @default "Pagination"
      */
     "aria-label"?: string;
 }
-declare function Pagination({ className, "aria-label": ariaLabel, ...props }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+declare function Pagination({ className, "aria-label": ariaLabel, total, page, initialPage, siblings, boundaries, onChange, children, ...props }: PaginationProps): import("react/jsx-runtime").JSX.Element;
 export interface PaginationContentProps extends React.ComponentProps<"ul"> {
     /**
      * Visual variant
@@ -19,8 +43,9 @@ export interface PaginationContentProps extends React.ComponentProps<"ul"> {
      */
     spaced?: boolean;
 }
+declare function PaginationContent({ className, variant, spaced, ...props }: PaginationContentProps): import("react/jsx-runtime").JSX.Element;
 declare function PaginationItem({ className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
-export interface PaginationLinkProps extends React.ComponentProps<"a"> {
+export interface PaginationLinkProps extends Omit<React.ComponentProps<"button">, "onClick"> {
     /**
      * Whether this page is currently active
      * @default false
@@ -36,8 +61,20 @@ export interface PaginationLinkProps extends React.ComponentProps<"a"> {
      * @default false
      */
     isIconButton?: boolean;
+    /**
+     * Page number to navigate to (if using as button)
+     */
+    page?: number;
+    /**
+     * Link href (if using as anchor)
+     */
+    href?: string;
+    /**
+     * On click handler
+     */
+    onClick?: (e: React.MouseEvent) => void;
 }
-declare function PaginationLink({ className, isActive, size, isIconButton, children, ...props }: PaginationLinkProps): import("react/jsx-runtime").JSX.Element;
+declare function PaginationLink({ className, isActive, size, isIconButton, children, page, href, onClick, ...props }: PaginationLinkProps): import("react/jsx-runtime").JSX.Element;
 export interface PaginationPreviousProps extends Omit<PaginationLinkProps, "isIconButton"> {
     /**
      * Show label text alongside icon
@@ -45,7 +82,7 @@ export interface PaginationPreviousProps extends Omit<PaginationLinkProps, "isIc
      */
     showLabel?: boolean;
 }
-declare function PaginationPrevious({ className, showLabel, children, ...props }: PaginationPreviousProps): import("react/jsx-runtime").JSX.Element;
+declare function PaginationPrevious({ className, showLabel, children, onClick, ...props }: PaginationPreviousProps): import("react/jsx-runtime").JSX.Element;
 export interface PaginationNextProps extends Omit<PaginationLinkProps, "isIconButton"> {
     /**
      * Show label text alongside icon
@@ -53,27 +90,6 @@ export interface PaginationNextProps extends Omit<PaginationLinkProps, "isIconBu
      */
     showLabel?: boolean;
 }
-declare function PaginationNext({ className, showLabel, children, ...props }: PaginationNextProps): import("react/jsx-runtime").JSX.Element;
+declare function PaginationNext({ className, showLabel, children, onClick, ...props }: PaginationNextProps): import("react/jsx-runtime").JSX.Element;
 declare function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
-declare function PaginationContentWithContext({ variant, ...props }: PaginationContentProps): import("react/jsx-runtime").JSX.Element;
-export interface PageItem {
-    type: "page" | "ellipsis";
-    page?: number;
-    key: string;
-}
-/**
- * Generate page items with ellipsis for large page ranges
- *
- * @param currentPage - Current active page (1-indexed)
- * @param totalPages - Total number of pages
- * @param siblingCount - Number of siblings to show on each side of current page
- * @returns Array of page items to render
- *
- * @example
- * ```tsx
- * const items = generatePagination(5, 10, 1);
- * // Returns: [1, ellipsis, 4, 5, 6, ellipsis, 10]
- * ```
- */
-export declare function generatePagination(currentPage: number, totalPages: number, siblingCount?: number): PageItem[];
-export { Pagination, PaginationContentWithContext as PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis, };
+export { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis, };

package/dist/components/pagination/pagination.js

@@ -1,27 +1,45 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePagination } from "@kala-ui/react-hooks";
 import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
 import * as React from "react";
 import { cn } from "../../lib/utils";
-function Pagination({ className, "aria-label": ariaLabel = "Pagination", ...props }) {
-    return (_jsx("nav", { "aria-label": ariaLabel, className: cn("mx-auto flex w-full justify-center", className), ...props }));
+import { Box } from "../box";
+import { Flex } from "../flex";
+import { Text } from "../text";
+function Pagination({ className, "aria-label": ariaLabel = "Pagination", total, page, initialPage, siblings, boundaries, onChange, children, ...props }) {
+    const pagination = usePagination({
+        total: total || 0,
+        page,
+        initialPage,
+        siblings,
+        boundaries,
+        onChange,
+    });
+    return (_jsx(PaginationContext.Provider, { value: pagination, children: _jsx(Box, { as: "nav", "aria-label": ariaLabel, className: cn("mx-auto flex w-full justify-center", className), ...props, children: children }) }));
+}
+const PaginationContext = React.createContext(null);
+function usePaginationContext() {
+    const context = React.useContext(PaginationContext);
+    return context;
 }
 function PaginationContent({ className, variant = "default", spaced = false, ...props }) {
-    return (_jsx("ul", { className: cn("flex flex-row items-center", spaced ? "gap-2" : "gap-1", className), "data-variant": variant, ...props }));
+    return (_jsx(PaginationVariantContext.Provider, { value: variant, children: _jsx(Flex, { as: "ul", align: "center", gap: spaced ? 2 : 1, className: className, "data-variant": variant, ...props }) }));
 }
 // ============================================================================
 // Pagination Item (List Item Container)
 // ============================================================================
 function PaginationItem({ className, ...props }) {
-    return _jsx("li", { className: cn("", className), ...props });
+    return _jsx(Box, { as: "li", className: cn("", className), ...props });
 }
-function PaginationLink({ className, isActive, size = "default", isIconButton = false, children, ...props }) {
+function PaginationLink({ className, isActive, size = "default", isIconButton = false, children, page, href, onClick, ...props }) {
     const parentVariant = React.useContext(PaginationVariantContext) || "default";
+    const pagination = usePaginationContext();
     const sizeClasses = {
         sm: "h-8 min-w-8 text-xs",
         default: "h-9 min-w-9 text-sm",
         lg: "h-10 min-w-10 text-base",
     };
-    const baseClasses = cn("inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors", "focus-ring", "disabled:pointer-events-none disabled:opacity-50", "text-foreground", sizeClasses[size], isIconButton ? "px-2" : "px-3");
+    const baseClasses = cn("inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors cursor-pointer", "focus-ring", "disabled:pointer-events-none disabled:opacity-50", "text-foreground", sizeClasses[size], isIconButton ? "px-2" : "px-3");
     // Variant-specific styles
     const variantClasses = {
         default: cn("hover:bg-accent hover:text-accent-foreground", isActive &&
@@ -33,88 +51,44 @@ function PaginationLink({ className, isActive, size = "default", isIconButton =
         circle: cn("rounded-full", "bg-muted hover:bg-accent hover:text-accent-foreground", isActive &&
             "bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm"),
     };
-    return (_jsx("a", { "aria-current": isActive ? "page" : undefined, className: cn(baseClasses, variantClasses[parentVariant], className), ...props, children: children }));
+    const handleClick = (e) => {
+        if (page !== undefined && pagination) {
+            pagination.setPage(page);
+        }
+        onClick?.(e);
+    };
+    if (href) {
+        return (_jsx(Box, { as: "a", href: href, "aria-current": isActive ? "page" : undefined, className: cn(baseClasses, variantClasses[parentVariant], className), ...props, children: children }));
+    }
+    return (_jsx(Box, { as: "button", type: "button", "aria-current": isActive ? "page" : undefined, className: cn(baseClasses, variantClasses[parentVariant], className), onClick: handleClick, ...props, children: children }));
 }
-function PaginationPrevious({ className, showLabel = true, children, ...props }) {
-    return (_jsxs(PaginationLink, { "aria-label": "Go to previous page", isIconButton: !showLabel, className: cn("gap-1", className), ...props, children: [_jsx(ChevronLeft, { className: "h-4 w-4" }), showLabel && _jsx("span", { children: children || "Previous" })] }));
+function PaginationPrevious({ className, showLabel = true, children, onClick, ...props }) {
+    const pagination = usePaginationContext();
+    const handleClick = (e) => {
+        pagination?.previous();
+        onClick?.(e);
+    };
+    return (_jsxs(PaginationLink, { "aria-label": "Go to previous page", isIconButton: !showLabel, className: cn("gap-1", className), onClick: handleClick, disabled: pagination?.active === 1, ...props, children: [_jsx(ChevronLeft, { className: "h-4 w-4" }), showLabel && _jsx(Text, { as: "span", children: children || "Previous" })] }));
 }
-function PaginationNext({ className, showLabel = true, children, ...props }) {
-    return (_jsxs(PaginationLink, { "aria-label": "Go to next page", isIconButton: !showLabel, className: cn("gap-1", className), ...props, children: [showLabel && _jsx("span", { children: children || "Next" }), _jsx(ChevronRight, { className: "h-4 w-4" })] }));
+function PaginationNext({ className, showLabel = true, children, onClick, ...props }) {
+    const pagination = usePaginationContext();
+    const handleClick = (e) => {
+        pagination?.next();
+        onClick?.(e);
+    };
+    return (_jsxs(PaginationLink, { "aria-label": "Go to next page", isIconButton: !showLabel, className: cn("gap-1", className), onClick: handleClick, disabled: pagination ? pagination.active >= pagination.total : undefined, ...props, children: [showLabel && _jsx(Text, { as: "span", children: children || "Next" }), _jsx(ChevronRight, { className: "h-4 w-4" })] }));
 }
 // ============================================================================
 // Pagination Ellipsis
 // ============================================================================
 function PaginationEllipsis({ className, ...props }) {
-    return (_jsxs("span", { "aria-hidden": true, className: cn("flex h-9 w-9 items-center justify-center", className), ...props, children: [_jsx(MoreHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "More pages" })] }));
+    return (_jsxs(Flex, { as: "span", align: "center", justify: "center", "aria-hidden": true, className: cn("h-9 w-9", className), ...props, children: [_jsx(MoreHorizontal, { className: "size-4" }), _jsx(Text, { className: "sr-only", children: "More pages" })] }));
 }
 // ============================================================================
 // Context for variant propagation
 // ============================================================================
 const PaginationVariantContext = React.createContext("default");
-function PaginationContentWithContext({ variant = "default", ...props }) {
-    return (_jsx(PaginationVariantContext.Provider, { value: variant, children: _jsx(PaginationContent, { variant: variant, ...props }) }));
-}
-/**
- * Generate page items with ellipsis for large page ranges
- *
- * @param currentPage - Current active page (1-indexed)
- * @param totalPages - Total number of pages
- * @param siblingCount - Number of siblings to show on each side of current page
- * @returns Array of page items to render
- *
- * @example
- * ```tsx
- * const items = generatePagination(5, 10, 1);
- * // Returns: [1, ellipsis, 4, 5, 6, ellipsis, 10]
- * ```
- */
-export function generatePagination(currentPage, totalPages, siblingCount = 1) {
-    // Always show first page, last page, current page, and siblings
-    const totalNumbers = siblingCount * 2 + 3; // siblings + current + first + last
-    const totalBlocks = totalNumbers + 2; // + 2 ellipsis
-    if (totalPages <= totalBlocks) {
-        // Show all pages if total is small
-        return Array.from({ length: totalPages }, (_, i) => ({
-            type: "page",
-            page: i + 1,
-            key: `page-${i + 1}`,
-        }));
-    }
-    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
-    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
-    const shouldShowLeftEllipsis = leftSiblingIndex > 2;
-    const shouldShowRightEllipsis = rightSiblingIndex < totalPages - 1;
-    const items = [];
-    // First page
-    items.push({ type: "page", page: 1, key: "page-1" });
-    // Left ellipsis
-    if (shouldShowLeftEllipsis) {
-        items.push({ type: "ellipsis", key: "ellipsis-left" });
-    }
-    else if (leftSiblingIndex === 2) {
-        items.push({ type: "page", page: 2, key: "page-2" });
-    }
-    // Middle pages (siblings + current)
-    for (let i = leftSiblingIndex; i <= rightSiblingIndex; i++) {
-        if (i !== 1 && i !== totalPages) {
-            items.push({ type: "page", page: i, key: `page-${i}` });
-        }
-    }
-    // Right ellipsis
-    if (shouldShowRightEllipsis) {
-        items.push({ type: "ellipsis", key: "ellipsis-right" });
-    }
-    else if (rightSiblingIndex === totalPages - 1) {
-        items.push({
-            type: "page",
-            page: totalPages - 1,
-            key: `page-${totalPages - 1}`,
-        });
-    }
-    // Last page
-    if (totalPages > 1) {
-        items.push({ type: "page", page: totalPages, key: `page-${totalPages}` });
-    }
-    return items;
-}
-export { Pagination, PaginationContentWithContext as PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis, };
+// ============================================================================
+// Export components
+// ============================================================================
+export { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis, };

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

@@ -14,6 +14,7 @@ export declare const Basic: Story;
 export declare const WithEllipsis: Story;
 export declare const IconOnly: Story;
 export declare const Sizes: Story;
+export declare const Dynamic: Story;
 export declare const Variants: Story;
 export declare const Spaced: Story;
 export declare const Interactive: Story;

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

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePagination } from "@kala-ui/react-hooks";
 import { useState } from "react";
-import { Skeleton } from "../skeleton/skeleton";
-import { generatePagination, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "./pagination";
+import { Skeleton } from "../skeleton";
+import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "./pagination";
 const meta = {
-    title: "Navigation/Pagination",
+    title: "Components/Pagination",
     component: Pagination,
     parameters: {
         layout: "centered",
@@ -11,6 +12,21 @@ const meta = {
     tags: ["autodocs"],
 };
 export default meta;
+// Helper to adapt usePagination range to story format
+function usePaginationItems(currentPage, totalPages) {
+    const { range } = usePagination({
+        total: totalPages,
+        page: currentPage,
+        siblings: 1,
+        boundaries: 1,
+    });
+    return range.map((item, index) => {
+        if (item === "dots") {
+            return { key: `dots-${index}`, type: "ellipsis" };
+        }
+        return { key: item, type: "page", page: item };
+    });
+}
 // ============================================================================
 // Basic Example
 // ============================================================================
@@ -36,6 +52,16 @@ export const Sizes = {
     render: () => (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsx(Pagination, { children: _jsxs(PaginationContent, { children: [_jsx(PaginationItem, { children: _jsx(PaginationPrevious, { href: "#", size: "sm" }) }), _jsx(PaginationItem, { children: _jsx(PaginationLink, { href: "#", size: "sm", children: "1" }) }), _jsx(PaginationItem, { children: _jsx(PaginationLink, { href: "#", size: "sm", isActive: true, children: "2" }) }), _jsx(PaginationItem, { children: _jsx(PaginationLink, { href: "#", size: "sm", children: "3" }) }), _jsx(PaginationItem, { children: _jsx(PaginationNext, { href: "#", size: "sm" }) })] }) }), _jsx(Pagination, { children: _jsxs(PaginationContent, { children: [_jsx(PaginationItem, { children: _jsx(PaginationPrevious, { href: "#" }) }), _jsx(PaginationItem, { children: _jsx(PaginationLink, { href: "#", children: "1" }) }), _jsx(PaginationItem, { children: _jsx(PaginationLink, { href: "#", isActive: true, children: "2" }) }), _jsx(PaginationItem, { children: _jsx(PaginationLink, { href: "#", children: "3" }) }), _jsx(PaginationItem, { children: _jsx(PaginationNext, { href: "#" }) })] }) }), _jsx(Pagination, { children: _jsxs(PaginationContent, { children: [_jsx(PaginationItem, { children: _jsx(PaginationPrevious, { href: "#", size: "lg" }) }), _jsx(PaginationItem, { children: _jsx(PaginationLink, { href: "#", size: "lg", children: "1" }) }), _jsx(PaginationItem, { children: _jsx(PaginationLink, { href: "#", size: "lg", isActive: true, children: "2" }) }), _jsx(PaginationItem, { children: _jsx(PaginationLink, { href: "#", size: "lg", children: "3" }) }), _jsx(PaginationItem, { children: _jsx(PaginationNext, { href: "#", size: "lg" }) })] }) })] })),
 };
 // ============================================================================
+// Dynamic (Using Hook Range)
+// ============================================================================
+export const Dynamic = {
+    render: () => {
+        const [page, setPage] = useState(1);
+        const total = 10;
+        return (_jsx(Pagination, { total: total, page: page, onChange: setPage, children: _jsxs(PaginationContent, { children: [_jsx(PaginationItem, { children: _jsx(PaginationPrevious, {}) }), _jsx(PaginationItem, { children: _jsx(PaginationLink, { page: 1, isActive: page === 1, children: "1" }) }), page > 3 && (_jsx(PaginationItem, { children: _jsx(PaginationEllipsis, {}) })), page > 2 && page < total - 1 && (_jsx(PaginationItem, { children: _jsx(PaginationLink, { page: page, isActive: true, children: page }) })), page < total - 2 && (_jsx(PaginationItem, { children: _jsx(PaginationEllipsis, {}) })), _jsx(PaginationItem, { children: _jsx(PaginationLink, { page: total, isActive: page === total, children: total }) }), _jsx(PaginationItem, { children: _jsx(PaginationNext, {}) })] }) }));
+    },
+};
+// ============================================================================
 // Visual Variants
 // ============================================================================
 export const Variants = {
@@ -54,7 +80,7 @@ export const Interactive = {
     render: () => {
         const [currentPage, setCurrentPage] = useState(5);
         const totalPages = 10;
-        const pages = generatePagination(currentPage, totalPages);
+        const pages = usePaginationItems(currentPage, totalPages);
         return (_jsxs("div", { className: "space-y-4", children: [_jsxs("p", { className: "text-center text-sm text-muted-foreground", children: ["Page ", currentPage, " of ", totalPages] }), _jsx(Pagination, { children: _jsxs(PaginationContent, { children: [_jsx(PaginationItem, { children: _jsx(PaginationPrevious, { href: "#", onClick: (e) => {
                                         e.preventDefault();
                                         setCurrentPage((p) => Math.max(1, p - 1));
@@ -81,7 +107,7 @@ export const WithResultsSummary = {
         const totalItems = 157;
         const startItem = (currentPage - 1) * itemsPerPage + 1;
         const endItem = Math.min(currentPage * itemsPerPage, totalItems);
-        const pages = generatePagination(currentPage, totalPages);
+        const pages = usePaginationItems(currentPage, totalPages);
         return (_jsx("div", { className: "w-full max-w-3xl space-y-4 rounded-lg border bg-card text-card-foreground p-6 theme-card", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("p", { className: "text-sm text-muted-foreground", children: ["Showing ", _jsx("span", { className: "font-medium", children: startItem }), " to", " ", _jsx("span", { className: "font-medium", children: endItem }), " of", " ", _jsx("span", { className: "font-medium", children: totalItems }), " results"] }), _jsx(Pagination, { children: _jsxs(PaginationContent, { variant: "outline", spaced: true, children: [_jsx(PaginationItem, { children: _jsx(PaginationPrevious, { href: "#", size: "sm", onClick: (e) => {
                                             e.preventDefault();
                                             setCurrentPage((p) => Math.max(1, p - 1));

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

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

package/dist/components/paper/index.js

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

package/dist/components/paper/paper.d.ts

@@ -0,0 +1,12 @@
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+declare const paperVariants: (props?: ({
+    shadow?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    radius?: "none" | "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
+    withBorder?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface PaperProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof paperVariants> {
+    asChild?: boolean;
+}
+declare const Paper: React.ForwardRefExoticComponent<PaperProps & React.RefAttributes<HTMLDivElement>>;
+export { Paper, paperVariants };

package/dist/components/paper/paper.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const paperVariants = cva("bg-background text-foreground", {
+    variants: {
+        shadow: {
+            none: "shadow-none",
+            xs: "shadow-sm",
+            sm: "shadow",
+            md: "shadow-md",
+            lg: "shadow-lg",
+            xl: "shadow-xl",
+        },
+        radius: {
+            none: "rounded-none",
+            sm: "rounded-sm",
+            md: "rounded-md",
+            lg: "rounded-lg",
+            xl: "rounded-xl",
+            full: "rounded-full",
+        },
+        withBorder: {
+            true: "border border-border",
+        },
+    },
+    defaultVariants: {
+        shadow: "none",
+        radius: "sm",
+        withBorder: false,
+    },
+});
+const Paper = React.forwardRef(({ className, shadow, radius, withBorder, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    return (_jsx(Comp, { className: cn(paperVariants({ shadow, radius, withBorder, className })), ref: ref, ...props }));
+});
+Paper.displayName = "Paper";
+export { Paper, paperVariants };

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

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Paper } from "./paper";
+declare const meta: Meta<typeof Paper>;
+export default meta;
+type Story = StoryObj<typeof Paper>;
+export declare const Default: Story;
+export declare const Shadows: Story;

package/dist/components/paper/paper.stories.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Paper } from "./paper";
+const meta = {
+    title: "Components/Paper",
+    component: Paper,
+    tags: ["autodocs"],
+    argTypes: {
+        shadow: {
+            control: "select",
+            options: ["none", "xs", "sm", "md", "lg", "xl"],
+        },
+        radius: {
+            control: "select",
+            options: ["none", "sm", "md", "lg", "xl", "full"],
+        },
+        withBorder: {
+            control: "boolean",
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        children: _jsx("div", { className: "p-4", children: "Paper content" }),
+        withBorder: true,
+    },
+};
+export const Shadows = {
+    render: () => (_jsxs("div", { className: "flex flex-col gap-4 p-4 bg-gray-50", children: [_jsx(Paper, { shadow: "xs", className: "p-4", children: "Shadow XS" }), _jsx(Paper, { shadow: "sm", className: "p-4", children: "Shadow SM" }), _jsx(Paper, { shadow: "md", className: "p-4", children: "Shadow MD" }), _jsx(Paper, { shadow: "lg", className: "p-4", children: "Shadow LG" }), _jsx(Paper, { shadow: "xl", className: "p-4", children: "Shadow XL" })] })),
+};

package/dist/components/password-strength-indicator/password-strength-indicator.stories.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Input } from "../input";
-import { Label } from "../label/label";
+import { Label } from "../label";
 import { PasswordStrengthIndicator } from "./password-strength-indicator";
 const meta = {
     title: "Application/PasswordStrengthIndicator",

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

@@ -6,7 +6,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Compact skeleton for small content areas.
  */
 import { cn } from "../../lib/utils";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 /**
  * Popover skeleton component
  *

package/dist/components/popover/popover.stories.js

@@ -4,7 +4,7 @@ import * as React from "react";
 import { Button } from "../button";
 import { Input } from "../input";
 import { Label } from "../label";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 import { Popover, PopoverBody, PopoverClose, PopoverContent, PopoverHeader, PopoverTrigger, } from "./popover";
 const meta = {
     title: "Overlay/Popover",
@@ -67,7 +67,7 @@ export const DismissibleFocus = {
     },
 };
 export const LoadingSkeleton = {
-    render: () => (_jsx(Skeleton, { className: "h-10 w-32 rounded-md" })),
+    render: () => _jsx(Skeleton, { className: "h-10 w-32 rounded-md" }),
     parameters: {
         docs: {
             description: {

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

@@ -1,2 +1,2 @@
-export type { ProgressBarProps, ProgressProps } from "./progress.types";
 export { Progress, ProgressBar, ProgressGroup } from "./progress";
+export type { ProgressBarProps, ProgressProps } from "./progress.types";

package/dist/components/progress/progress.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { ProgressProps, ProgressBarProps } from "./progress.types";
+import type { ProgressBarProps, ProgressProps } from "./progress.types";
 type ProgressSize = "sm" | "md" | "lg";
 declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
 /**

package/dist/components/progress/progress.stories.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Button } from "../button";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 import { Progress, ProgressBar, ProgressGroup } from "./progress";
 const meta = {
     title: "Feedback/Progress",

package/dist/components/radio-group/radio-group-skeleton.js

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Matches radio button layout with vertical/horizontal orientation.
  */
 import { cn } from "../../lib/utils";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 /**
  * Radio Group skeleton component
  *

package/dist/components/radio-group/radio-group.stories.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Button } from "../button";
 import { Label } from "../label";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 import { RadioGroup, RadioGroupItem } from "./radio-group";
 const meta = {
     title: "Forms/RadioGroup",

package/dist/components/resizable/resizable.stories.js

@@ -120,14 +120,14 @@ export const DisabledHandle = {
  */
 export const IDELayout = {
     args: {},
-    render: () => (_jsxs(ResizablePanelGroup, { direction: "horizontal", className: "min-h-[500px] rounded-lg border", children: [_jsx(ResizablePanel, { defaultSize: 20, minSize: 15, maxSize: 30, className: "border-r", children: _jsxs("div", { className: "flex h-full flex-col", children: [_jsx("div", { className: "border-b p-4 font-semibold", children: "Explorer" }), _jsx("div", { className: "flex-1 p-4", children: _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "text-sm", children: "\uD83D\uDCC1 src" }), _jsxs("div", { className: "ml-4 space-y-1 text-sm", children: [_jsx("div", { children: "\uD83D\uDCC4 App.tsx" }), _jsx("div", { children: "\uD83D\uDCC4 index.tsx" }), _jsx("div", { children: "\uD83D\uDCC4 styles.css" })] })] }) })] }) }), _jsx(ResizableHandle, {}), _jsx(ResizablePanel, { defaultSize: 60, children: _jsxs(ResizablePanelGroup, { direction: "vertical", children: [_jsx(ResizablePanel, { defaultSize: 70, minSize: 30, children: _jsxs("div", { className: "flex h-full flex-col", children: [_jsx("div", { className: "border-b p-4 font-semibold", children: "Editor" }), _jsx("div", { className: "bg-muted/20 flex-1 p-4", children: _jsx("pre", { className: "text-sm", children: _jsx("code", { children: `import React from 'react';
-
-function App() {
-  return (
-    <div>Hello World</div>
-  );
-}
-
+    render: () => (_jsxs(ResizablePanelGroup, { direction: "horizontal", className: "min-h-[500px] rounded-lg border", children: [_jsx(ResizablePanel, { defaultSize: 20, minSize: 15, maxSize: 30, className: "border-r", children: _jsxs("div", { className: "flex h-full flex-col", children: [_jsx("div", { className: "border-b p-4 font-semibold", children: "Explorer" }), _jsx("div", { className: "flex-1 p-4", children: _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "text-sm", children: "\uD83D\uDCC1 src" }), _jsxs("div", { className: "ml-4 space-y-1 text-sm", children: [_jsx("div", { children: "\uD83D\uDCC4 App.tsx" }), _jsx("div", { children: "\uD83D\uDCC4 index.tsx" }), _jsx("div", { children: "\uD83D\uDCC4 styles.css" })] })] }) })] }) }), _jsx(ResizableHandle, {}), _jsx(ResizablePanel, { defaultSize: 60, children: _jsxs(ResizablePanelGroup, { direction: "vertical", children: [_jsx(ResizablePanel, { defaultSize: 70, minSize: 30, children: _jsxs("div", { className: "flex h-full flex-col", children: [_jsx("div", { className: "border-b p-4 font-semibold", children: "Editor" }), _jsx("div", { className: "bg-muted/20 flex-1 p-4", children: _jsx("pre", { className: "text-sm", children: _jsx("code", { children: `import React from 'react';
+
+function App() {
+  return (
+    <div>Hello World</div>
+  );
+}
+
 export default App;` }) }) })] }) }), _jsx(ResizableHandle, { withHandle: true }), _jsx(ResizablePanel, { defaultSize: 30, minSize: 20, children: _jsxs("div", { className: "flex h-full flex-col", children: [_jsx("div", { className: "border-t p-4 font-semibold", children: "Terminal" }), _jsx("div", { className: "bg-muted/40 flex-1 p-4", children: _jsxs("div", { className: "font-mono text-sm", children: [_jsx("div", { children: "$ npm run dev" }), _jsx("div", { className: "text-muted-foreground mt-2", children: "Server running on port 3000..." })] }) })] }) })] }) }), _jsx(ResizableHandle, {}), _jsx(ResizablePanel, { defaultSize: 20, minSize: 15, maxSize: 30, className: "border-l", children: _jsxs("div", { className: "flex h-full flex-col", children: [_jsx("div", { className: "border-b p-4 font-semibold", children: "Properties" }), _jsxs("div", { className: "flex-1 space-y-4 p-4", children: [_jsxs("div", { children: [_jsx("div", { className: "text-muted-foreground mb-1 text-xs font-medium", children: "File Info" }), _jsx("div", { className: "text-sm", children: "App.tsx" })] }), _jsxs("div", { children: [_jsx("div", { className: "text-muted-foreground mb-1 text-xs font-medium", children: "Lines" }), _jsx("div", { className: "text-sm", children: "9" })] }), _jsxs("div", { children: [_jsx("div", { className: "text-muted-foreground mb-1 text-xs font-medium", children: "Size" }), _jsx("div", { className: "text-sm", children: "128 bytes" })] })] })] }) })] })),
 };
 /**

package/dist/components/ring-progress/index.d.ts

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

package/dist/components/ring-progress/index.js

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

package/dist/components/ring-progress/ring-progress.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+export interface RingProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Value (0-100) */
+    value?: number;
+    /** Size in px */
+    size?: number;
+    /** Ring thickness */
+    thickness?: number;
+    /** Color (class name like text-blue-500) */
+    color?: string;
+    /** Empty ring color (class name) */
+    emptyColor?: string;
+    /** Label content centered in the ring */
+    label?: React.ReactNode;
+    /** Round caps */
+    roundCaps?: boolean;
+    /** Sections for multiple segments [{ value: 20, color: 'text-red-500' }] */
+    sections?: {
+        value: number;
+        color: string;
+        tooltip?: React.ReactNode;
+    }[];
+}
+export declare const RingProgress: React.ForwardRefExoticComponent<RingProgressProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ring-progress/ring-progress.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+export const RingProgress = React.forwardRef(({ className, value, size = 120, thickness = 12, color = "text-primary", emptyColor = "text-muted", label, roundCaps = true, sections, ...props }, ref) => {
+    const radius = (size - thickness) / 2;
+    const circumference = radius * 2 * Math.PI;
+    const segments = sections || (value !== undefined ? [{ value, color }] : []);
+    // Normalize values to ensure they sum up to <= 100 if needed, or just map them
+    // We map them to arc lengths.
+    let accumulatedValue = 0;
+    const renderedSegments = segments.map((segment, i) => {
+        const segmentValue = Math.min(Math.max(segment.value, 0), 100);
+        const offset = circumference - (segmentValue / 100) * circumference;
+        const rotation = (accumulatedValue / 100) * 360;
+        accumulatedValue += segmentValue;
+        return (_jsx("circle", { cx: size / 2, cy: size / 2, r: radius, fill: "none", strokeWidth: thickness, stroke: "currentColor", strokeDasharray: `${circumference} ${circumference}`, strokeDashoffset: offset, strokeLinecap: roundCaps ? "round" : "butt", className: cn("transition-all duration-500 ease-out", segment.color), transform: `rotate(${rotation - 90} ${size / 2} ${size / 2})` }, i));
+    });
+    return (_jsxs("div", { ref: ref, className: cn("relative flex items-center justify-center", className), style: { width: size, height: size }, ...props, children: [_jsxs("svg", { width: size, height: size, className: "transform", role: "img", children: [_jsx("title", { children: "Progress ring" }), _jsx("circle", { cx: size / 2, cy: size / 2, r: radius, fill: "none", strokeWidth: thickness, stroke: "currentColor", className: cn("opacity-20", emptyColor) }), renderedSegments] }), label && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: label }))] }));
+});
+RingProgress.displayName = "RingProgress";