@karakuri-ui/react 0.2.2 → 0.2.4

package/dist/components/ui/pagination.d.mts

@@ -0,0 +1,130 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+
+type PaginationRange = (number | 'dots')[];
+interface UsePaginationProps {
+    /** Total number of pages */
+    total: number;
+    /** Number of siblings on each side of current page */
+    siblings?: number;
+    /** Number of boundary pages at start/end */
+    boundaries?: number;
+    /** Current active page (1-based) */
+    page: number;
+}
+declare function usePagination({ total, siblings, boundaries, page, }: UsePaginationProps): PaginationRange;
+type PaginationSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl';
+type PaginationVariant = 'default' | 'outline' | 'ghost';
+type PaginationColor = 'default' | 'primary';
+type PaginationRadius = 'sm' | 'base' | 'md' | 'lg' | 'xl' | 'full';
+declare const paginationSizeMap: {
+    readonly xs: {
+        readonly item: "h-7 min-w-7 text-xs";
+        readonly icon: "icon-xs";
+        readonly gap: "gap-1";
+    };
+    readonly sm: {
+        readonly item: "h-8 min-w-8 text-sm";
+        readonly icon: "icon-xs";
+        readonly gap: "gap-1";
+    };
+    readonly default: {
+        readonly item: "h-9 min-w-9 text-md";
+        readonly icon: "icon-sm";
+        readonly gap: "gap-1";
+    };
+    readonly lg: {
+        readonly item: "h-10 min-w-10 text-md";
+        readonly icon: "icon-sm";
+        readonly gap: "gap-1.5";
+    };
+    readonly xl: {
+        readonly item: "h-12 min-w-12 text-base";
+        readonly icon: "icon-sm";
+        readonly gap: "gap-1.5";
+    };
+};
+declare const paginationItemVariants: (props?: ({
+    radius?: "sm" | "lg" | "base" | "md" | "xl" | "full" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface PaginationProps extends Omit<React.ComponentPropsWithoutRef<'nav'>, 'onChange'> {
+    /** Total number of pages */
+    total?: number;
+    /** Controlled active page (1-based) */
+    value?: number;
+    /** Initial page for uncontrolled mode */
+    defaultValue?: number;
+    /** Page change callback */
+    onChange?: (page: number) => void;
+    /** Number of siblings on each side of current page */
+    siblings?: number;
+    /** Number of boundary pages at start/end */
+    boundaries?: number;
+    /** Component size */
+    size?: PaginationSize;
+    /** Visual variant */
+    variant?: PaginationVariant;
+    /** Active page color */
+    color?: PaginationColor;
+    /** Border radius */
+    radius?: PaginationRadius;
+    /** Disable all interactions */
+    disabled?: boolean;
+    /** Show previous/next controls */
+    withControls?: boolean;
+    /** Show first/last controls */
+    withEdges?: boolean;
+    /** Loop from last to first and vice versa */
+    loop?: boolean;
+}
+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>>;
+interface PaginationLinkProps extends React.ComponentPropsWithoutRef<'button'> {
+    /** Page number this link navigates to */
+    page: number;
+    /** Whether this page is currently active (auto-detected from context if omitted) */
+    isActive?: boolean;
+}
+declare const PaginationLink: React.ForwardRefExoticComponent<PaginationLinkProps & React.RefAttributes<HTMLButtonElement>>;
+interface PaginationPreviousProps extends React.ComponentPropsWithoutRef<'button'> {
+    /** Custom icon */
+    icon?: React.ReactNode;
+}
+declare const PaginationPrevious: React.ForwardRefExoticComponent<PaginationPreviousProps & React.RefAttributes<HTMLButtonElement>>;
+interface PaginationNextProps extends React.ComponentPropsWithoutRef<'button'> {
+    /** Custom icon */
+    icon?: React.ReactNode;
+}
+declare const PaginationNext: React.ForwardRefExoticComponent<PaginationNextProps & React.RefAttributes<HTMLButtonElement>>;
+interface PaginationFirstProps extends React.ComponentPropsWithoutRef<'button'> {
+    /** Custom icon */
+    icon?: React.ReactNode;
+}
+declare const PaginationFirst: React.ForwardRefExoticComponent<PaginationFirstProps & React.RefAttributes<HTMLButtonElement>>;
+interface PaginationLastProps extends React.ComponentPropsWithoutRef<'button'> {
+    /** Custom icon */
+    icon?: React.ReactNode;
+}
+declare const PaginationLast: React.ForwardRefExoticComponent<PaginationLastProps & React.RefAttributes<HTMLButtonElement>>;
+declare const PaginationEllipsis: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const PaginationItems: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLElement>> & {
+    Content: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+    Item: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+    Link: React.ForwardRefExoticComponent<PaginationLinkProps & React.RefAttributes<HTMLButtonElement>>;
+    Previous: React.ForwardRefExoticComponent<PaginationPreviousProps & React.RefAttributes<HTMLButtonElement>>;
+    Next: React.ForwardRefExoticComponent<PaginationNextProps & React.RefAttributes<HTMLButtonElement>>;
+    First: React.ForwardRefExoticComponent<PaginationFirstProps & React.RefAttributes<HTMLButtonElement>>;
+    Last: React.ForwardRefExoticComponent<PaginationLastProps & React.RefAttributes<HTMLButtonElement>>;
+    Ellipsis: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    Items: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+declare namespace Pagination {
+    type LinkProps = PaginationLinkProps;
+    type PreviousProps = PaginationPreviousProps;
+    type NextProps = PaginationNextProps;
+    type FirstProps = PaginationFirstProps;
+    type LastProps = PaginationLastProps;
+}
+
+export { Pagination, type PaginationColor, PaginationContent, PaginationEllipsis, PaginationFirst, type PaginationFirstProps, PaginationItem, PaginationItems, PaginationLast, type PaginationLastProps, PaginationLink, type PaginationLinkProps, PaginationNext, type PaginationNextProps, PaginationPrevious, type PaginationPreviousProps, type PaginationProps, type PaginationRadius, type PaginationRange, type PaginationSize, type PaginationVariant, type UsePaginationProps, paginationItemVariants, paginationSizeMap, usePagination };

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

@@ -0,0 +1,130 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+
+type PaginationRange = (number | 'dots')[];
+interface UsePaginationProps {
+    /** Total number of pages */
+    total: number;
+    /** Number of siblings on each side of current page */
+    siblings?: number;
+    /** Number of boundary pages at start/end */
+    boundaries?: number;
+    /** Current active page (1-based) */
+    page: number;
+}
+declare function usePagination({ total, siblings, boundaries, page, }: UsePaginationProps): PaginationRange;
+type PaginationSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl';
+type PaginationVariant = 'default' | 'outline' | 'ghost';
+type PaginationColor = 'default' | 'primary';
+type PaginationRadius = 'sm' | 'base' | 'md' | 'lg' | 'xl' | 'full';
+declare const paginationSizeMap: {
+    readonly xs: {
+        readonly item: "h-7 min-w-7 text-xs";
+        readonly icon: "icon-xs";
+        readonly gap: "gap-1";
+    };
+    readonly sm: {
+        readonly item: "h-8 min-w-8 text-sm";
+        readonly icon: "icon-xs";
+        readonly gap: "gap-1";
+    };
+    readonly default: {
+        readonly item: "h-9 min-w-9 text-md";
+        readonly icon: "icon-sm";
+        readonly gap: "gap-1";
+    };
+    readonly lg: {
+        readonly item: "h-10 min-w-10 text-md";
+        readonly icon: "icon-sm";
+        readonly gap: "gap-1.5";
+    };
+    readonly xl: {
+        readonly item: "h-12 min-w-12 text-base";
+        readonly icon: "icon-sm";
+        readonly gap: "gap-1.5";
+    };
+};
+declare const paginationItemVariants: (props?: ({
+    radius?: "sm" | "lg" | "base" | "md" | "xl" | "full" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface PaginationProps extends Omit<React.ComponentPropsWithoutRef<'nav'>, 'onChange'> {
+    /** Total number of pages */
+    total?: number;
+    /** Controlled active page (1-based) */
+    value?: number;
+    /** Initial page for uncontrolled mode */
+    defaultValue?: number;
+    /** Page change callback */
+    onChange?: (page: number) => void;
+    /** Number of siblings on each side of current page */
+    siblings?: number;
+    /** Number of boundary pages at start/end */
+    boundaries?: number;
+    /** Component size */
+    size?: PaginationSize;
+    /** Visual variant */
+    variant?: PaginationVariant;
+    /** Active page color */
+    color?: PaginationColor;
+    /** Border radius */
+    radius?: PaginationRadius;
+    /** Disable all interactions */
+    disabled?: boolean;
+    /** Show previous/next controls */
+    withControls?: boolean;
+    /** Show first/last controls */
+    withEdges?: boolean;
+    /** Loop from last to first and vice versa */
+    loop?: boolean;
+}
+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>>;
+interface PaginationLinkProps extends React.ComponentPropsWithoutRef<'button'> {
+    /** Page number this link navigates to */
+    page: number;
+    /** Whether this page is currently active (auto-detected from context if omitted) */
+    isActive?: boolean;
+}
+declare const PaginationLink: React.ForwardRefExoticComponent<PaginationLinkProps & React.RefAttributes<HTMLButtonElement>>;
+interface PaginationPreviousProps extends React.ComponentPropsWithoutRef<'button'> {
+    /** Custom icon */
+    icon?: React.ReactNode;
+}
+declare const PaginationPrevious: React.ForwardRefExoticComponent<PaginationPreviousProps & React.RefAttributes<HTMLButtonElement>>;
+interface PaginationNextProps extends React.ComponentPropsWithoutRef<'button'> {
+    /** Custom icon */
+    icon?: React.ReactNode;
+}
+declare const PaginationNext: React.ForwardRefExoticComponent<PaginationNextProps & React.RefAttributes<HTMLButtonElement>>;
+interface PaginationFirstProps extends React.ComponentPropsWithoutRef<'button'> {
+    /** Custom icon */
+    icon?: React.ReactNode;
+}
+declare const PaginationFirst: React.ForwardRefExoticComponent<PaginationFirstProps & React.RefAttributes<HTMLButtonElement>>;
+interface PaginationLastProps extends React.ComponentPropsWithoutRef<'button'> {
+    /** Custom icon */
+    icon?: React.ReactNode;
+}
+declare const PaginationLast: React.ForwardRefExoticComponent<PaginationLastProps & React.RefAttributes<HTMLButtonElement>>;
+declare const PaginationEllipsis: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const PaginationItems: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLElement>> & {
+    Content: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+    Item: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+    Link: React.ForwardRefExoticComponent<PaginationLinkProps & React.RefAttributes<HTMLButtonElement>>;
+    Previous: React.ForwardRefExoticComponent<PaginationPreviousProps & React.RefAttributes<HTMLButtonElement>>;
+    Next: React.ForwardRefExoticComponent<PaginationNextProps & React.RefAttributes<HTMLButtonElement>>;
+    First: React.ForwardRefExoticComponent<PaginationFirstProps & React.RefAttributes<HTMLButtonElement>>;
+    Last: React.ForwardRefExoticComponent<PaginationLastProps & React.RefAttributes<HTMLButtonElement>>;
+    Ellipsis: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    Items: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+declare namespace Pagination {
+    type LinkProps = PaginationLinkProps;
+    type PreviousProps = PaginationPreviousProps;
+    type NextProps = PaginationNextProps;
+    type FirstProps = PaginationFirstProps;
+    type LastProps = PaginationLastProps;
+}
+
+export { Pagination, type PaginationColor, PaginationContent, PaginationEllipsis, PaginationFirst, type PaginationFirstProps, PaginationItem, PaginationItems, PaginationLast, type PaginationLastProps, PaginationLink, type PaginationLinkProps, PaginationNext, type PaginationNextProps, PaginationPrevious, type PaginationPreviousProps, type PaginationProps, type PaginationRadius, type PaginationRange, type PaginationSize, type PaginationVariant, type UsePaginationProps, paginationItemVariants, paginationSizeMap, usePagination };