npm - dystopia-linear-lib - Versions diffs - 1.0.0 - Mend

dystopia-linear-lib 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (496) hide show

package/dist/components/hover-card/HoverCard.svelte ADDED Viewed

@@ -0,0 +1,138 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import { floating } from '../../utils/floating.js';
+	import { portal } from '../../utils/portal.js';
+	import { createPresence } from '../../utils/presence.svelte.js';
+	import type { HoverCardProps } from './HoverCard.types.js';
+	let {
+		classes,
+		open = $bindable(false),
+		placement = 'bottom',
+		offset = 8,
+		openDelay = 700,
+		closeDelay = 300,
+		portalTarget,
+		content,
+		children,
+		...restProps
+	}: HoverCardProps = $props();
+	const contentId = $props.id();
+	// Content is portalled to the end of <body>, so a real page with more
+	// focusable content after the trigger will not put the card next in Tab
+	// order — the same tradeoff Popover/Dropdown/Tooltip accept for the same
+	// reason. Unlike those, this component deliberately never steals focus
+	// into the card programmatically (hovering shouldn't move keyboard
+	// focus), so reaching it by keyboard means tabbing from the trigger.
+	let triggerEl = $state<HTMLSpanElement | null>(null);
+	let contentEl = $state<HTMLDivElement | null>(null);
+	const presence = createPresence(
+		() => open,
+		() => contentEl
+	);
+	let openTimer: ReturnType<typeof setTimeout> | undefined;
+	let closeTimer: ReturnType<typeof setTimeout> | undefined;
+	function clearTimers() {
+		clearTimeout(openTimer);
+		clearTimeout(closeTimer);
+	}
+	function scheduleOpen() {
+		clearTimers();
+		if (open) return;
+		openTimer = setTimeout(() => (open = true), openDelay);
+	}
+	function openNow() {
+		clearTimers();
+		open = true;
+	}
+	function scheduleClose() {
+		clearTimers();
+		closeTimer = setTimeout(() => (open = false), closeDelay);
+	}
+	function close() {
+		clearTimers();
+		open = false;
+	}
+	// Keeps the card open while focus moves between the trigger and the card
+	// (Tab forward into it, Shift+Tab back) — unlike Tooltip, this content is
+	// meant to be interactive, so losing focus to it must not count as
+	// leaving.
+	function handleFocusOut(event: FocusEvent) {
+		const next = event.relatedTarget as Node | null;
+		if (next && (triggerEl?.contains(next) || contentEl?.contains(next))) return;
+		scheduleClose();
+	}
+	function handlePointerDown(event: PointerEvent) {
+		const target = event.target as Node;
+		if (triggerEl?.contains(target) || contentEl?.contains(target)) return;
+		close();
+	}
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key !== 'Escape') return;
+		event.preventDefault();
+		close();
+		triggerEl?.focus();
+	}
+	$effect(() => {
+		if (!open) return;
+		document.addEventListener('pointerdown', handlePointerDown);
+		document.addEventListener('keydown', handleKeydown);
+		return () => {
+			document.removeEventListener('pointerdown', handlePointerDown);
+			document.removeEventListener('keydown', handleKeydown);
+		};
+	});
+	const triggerProps = $derived({
+		...restProps,
+		'data-state': open ? 'open' : 'closed',
+		class: cn('inline-flex', classes?.trigger),
+		onmouseenter: scheduleOpen,
+		onmouseleave: scheduleClose,
+		onfocusin: openNow,
+		onfocusout: handleFocusOut
+	});
+</script>
+<span bind:this={triggerEl} {...triggerProps}>
+	{@render children()}
+</span>
+{#if presence.current}
+	<!--
+	  mouseenter/mouseleave here only extend the hover grace period; this is a
+	  positioning container, not an interactive control, so it takes no role.
+	  Its actual interactive content (links, buttons) carries its own semantics.
+	-->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		bind:this={contentEl}
+		id={contentId}
+		data-state={open ? 'open' : 'closed'}
+		onmouseenter={() => clearTimeout(closeTimer)}
+		onmouseleave={scheduleClose}
+		onfocusout={handleFocusOut}
+		use:portal={{ target: portalTarget }}
+		use:floating={{ reference: triggerEl, placement, offset }}
+		class={cn(
+			'z-50 rounded-lg border border-border bg-surface p-4 text-sm text-foreground-muted shadow-sm',
+			classes?.content
+		)}
+	>
+		{@render content()}
+	</div>
+{/if}

package/dist/components/hover-card/HoverCard.svelte.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import type { HoverCardProps } from './HoverCard.types.js';
+declare const HoverCard: import("svelte").Component<HoverCardProps, {}, "open">;
+type HoverCard = ReturnType<typeof HoverCard>;
+export default HoverCard;

package/dist/components/hover-card/HoverCard.types.d.ts ADDED Viewed

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Placement } from '@floating-ui/dom';
+export interface HoverCardProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'class'> {
+    classes?: {
+        trigger?: string;
+        content?: string;
+    };
+    open?: boolean;
+    placement?: Placement;
+    offset?: number;
+    /** Hover delay in ms before the card shows. Focus shows it instantly. */
+    openDelay?: number;
+    /** Grace period in ms before hiding once the pointer leaves the trigger or
+     * the card — lets it travel between the two without closing. */
+    closeDelay?: number;
+    portalTarget?: HTMLElement | string;
+    content: Snippet;
+    children: Snippet;
+}

package/dist/components/hover-card/HoverCard.types.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/dist/components/hover-card/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { default as HoverCard } from './HoverCard.svelte';
2	+ export type { HoverCardProps } from './HoverCard.types.js';

package/dist/components/hover-card/index.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { default as HoverCard } from './HoverCard.svelte';

package/dist/components/label/Label.svelte ADDED Viewed

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import type { LabelProps } from './Label.types.js';
+	let {
+		required = false,
+		disabled = false,
+		class: className,
+		children,
+		...restProps
+	}: LabelProps = $props();
+</script>
+<label
+	class={cn(
+		'inline-flex items-center gap-tight text-sm leading-snug font-medium text-foreground-soft select-none data-disabled:cursor-not-allowed data-disabled:opacity-50',
+		className
+	)}
+	data-disabled={disabled ? '' : undefined}
+	{...restProps}
+>
+	{@render children()}
+	{#if required}
+		<span aria-hidden="true" class="text-danger">*</span>
+	{/if}
+</label>

package/dist/components/label/Label.svelte.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import type { LabelProps } from './Label.types.js';
+declare const Label: import("svelte").Component<LabelProps, {}, "">;
+type Label = ReturnType<typeof Label>;
+export default Label;

package/dist/components/label/Label.types.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLLabelAttributes } from 'svelte/elements';
+export interface LabelProps extends HTMLLabelAttributes {
+    class?: string;
+    /** Renders a required marker, hidden from assistive tech — the input's own `required` announces it. */
+    required?: boolean;
+    disabled?: boolean;
+    children: Snippet;
+}

package/dist/components/label/Label.types.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/dist/components/label/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { default as Label } from './Label.svelte';
2	+ export type { LabelProps } from './Label.types.js';

package/dist/components/label/index.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { default as Label } from './Label.svelte';

package/dist/components/pagination/Pagination.svelte ADDED Viewed

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import { getPaginationRange } from '../../utils/pagination-range.js';
+	import PaginationList from './PaginationList.svelte';
+	import PaginationItem from './PaginationItem.svelte';
+	import PaginationLink from './PaginationLink.svelte';
+	import PaginationEllipsis from './PaginationEllipsis.svelte';
+	import PaginationPrevious from './PaginationPrevious.svelte';
+	import PaginationNext from './PaginationNext.svelte';
+	import type { PaginationProps } from './Pagination.types.js';
+	let {
+		currentPage = $bindable(1),
+		totalPages,
+		siblingCount = 1,
+		boundaryCount = 1,
+		showPreviousNext = true,
+		disabled = false,
+		size = 'md',
+		class: className,
+		classes,
+		labels,
+		onPageChange,
+		item,
+		...restProps
+	}: PaginationProps = $props();
+	const pages = $derived(
+		getPaginationRange({ currentPage, totalPages, siblingCount, boundaryCount })
+	);
+	function goTo(page: number): void {
+		if (disabled || page < 1 || page > totalPages || page === currentPage) return;
+		currentPage = page;
+		onPageChange?.(page);
+	}
+</script>
+<nav aria-label={labels?.nav ?? 'pagination'} class={className} {...restProps}>
+	<PaginationList class={classes?.list}>
+		{#if showPreviousNext}
+			<PaginationItem>
+				<PaginationPrevious
+					class={classes?.previous}
+					disabled={disabled || currentPage <= 1}
+					label={labels?.previous}
+					{size}
+					onclick={() => goTo(currentPage - 1)}
+				/>
+			</PaginationItem>
+		{/if}
+		{#each pages as pageItem, index (index)}
+			<PaginationItem class={classes?.item}>
+				{#if pageItem === 'ellipsis'}
+					<PaginationEllipsis class={classes?.ellipsis} {size} />
+				{:else if item}
+					{@render item({ page: pageItem, active: pageItem === currentPage })}
+				{:else}
+					<PaginationLink
+						class={classes?.link}
+						active={pageItem === currentPage}
+						{disabled}
+						{size}
+						aria-label={labels?.page?.(pageItem)}
+						onclick={() => goTo(pageItem)}
+					>
+						{pageItem}
+					</PaginationLink>
+				{/if}
+			</PaginationItem>
+		{/each}
+		{#if showPreviousNext}
+			<PaginationItem>
+				<PaginationNext
+					class={classes?.next}
+					disabled={disabled || currentPage >= totalPages}
+					label={labels?.next}
+					{size}
+					onclick={() => goTo(currentPage + 1)}
+				/>
+			</PaginationItem>
+		{/if}
+	</PaginationList>
+</nav>

package/dist/components/pagination/Pagination.svelte.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import type { PaginationProps } from './Pagination.types.js';
+declare const Pagination: import("svelte").Component<PaginationProps, {}, "currentPage">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/components/pagination/Pagination.types.d.ts ADDED Viewed

@@ -0,0 +1,41 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { PaginationLinkVariantProps } from './PaginationLink.variants.js';
+export interface PaginationLabels {
+    /** Accessible name for the root `<nav>`. Defaults to "pagination". */
+    nav?: string;
+    previous?: string;
+    next?: string;
+    /** Accessible name for a page button beyond its visible number, e.g. `(page) => `Go to page ${page}`` */
+    page?: (page: number) => string;
+}
+export interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /** 1-indexed. */
+    currentPage?: number;
+    totalPages: number;
+    /** Pages kept on each side of the current page. Default 1. */
+    siblingCount?: number;
+    /** Pages kept at the very start and very end. Default 1. */
+    boundaryCount?: number;
+    /** Default true. */
+    showPreviousNext?: boolean;
+    disabled?: boolean;
+    /** Density variant, applied to every auto-rendered part (link, previous, next, ellipsis). Default 'md'. */
+    size?: PaginationLinkVariantProps['size'];
+    class?: string;
+    classes?: {
+        list?: string;
+        item?: string;
+        link?: string;
+        ellipsis?: string;
+        previous?: string;
+        next?: string;
+    };
+    labels?: PaginationLabels;
+    onPageChange?: (page: number) => void;
+    /** Overrides the default rendering of a page-number item. Doesn't apply to the ellipsis, previous, or next controls. */
+    item?: Snippet<[{
+        page: number;
+        active: boolean;
+    }]>;
+}

package/dist/components/pagination/Pagination.types.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/dist/components/pagination/PaginationEllipsis.svelte ADDED Viewed

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import { paginationEllipsisVariants } from './PaginationEllipsis.variants.js';
+	import type { PaginationEllipsisProps } from './PaginationEllipsis.types.js';
+	let { class: className, size = 'md', children, ...restProps }: PaginationEllipsisProps = $props();
+</script>
+<span aria-hidden="true" class={cn(paginationEllipsisVariants({ size }), className)} {...restProps}>
+	{#if children}
+		{@render children()}
+	{:else}
+		&hellip;
+	{/if}
+</span>

package/dist/components/pagination/PaginationEllipsis.svelte.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import type { PaginationEllipsisProps } from './PaginationEllipsis.types.js';
+declare const PaginationEllipsis: import("svelte").Component<PaginationEllipsisProps, {}, "">;
+type PaginationEllipsis = ReturnType<typeof PaginationEllipsis>;
+export default PaginationEllipsis;

package/dist/components/pagination/PaginationEllipsis.types.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { PaginationEllipsisVariantProps } from './PaginationEllipsis.variants.js';
+export interface PaginationEllipsisProps extends HTMLAttributes<HTMLSpanElement> {
+    class?: string;
+    children?: Snippet;
+    /** Density variant. Default 'md'. */
+    size?: PaginationEllipsisVariantProps['size'];
+}

package/dist/components/pagination/PaginationEllipsis.types.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/dist/components/pagination/PaginationEllipsis.variants.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const paginationEllipsisVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type PaginationEllipsisVariantProps = VariantProps<typeof paginationEllipsisVariants>;

package/dist/components/pagination/PaginationEllipsis.variants.js ADDED Viewed

@@ -0,0 +1,13 @@
+import { cva } from 'class-variance-authority';
+export const paginationEllipsisVariants = cva('flex items-center justify-center text-foreground-faint', {
+    variants: {
+        size: {
+            sm: 'h-8 min-w-8',
+            md: 'h-9 min-w-9',
+            lg: 'h-10 min-w-10'
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});

package/dist/components/pagination/PaginationItem.svelte ADDED Viewed

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import type { PaginationItemProps } from './PaginationItem.types.js';
+	let { class: className, children, ...restProps }: PaginationItemProps = $props();
+</script>
+<li class={cn('inline-flex items-center', className)} {...restProps}>
+	{@render children()}
+</li>

package/dist/components/pagination/PaginationItem.svelte.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import type { PaginationItemProps } from './PaginationItem.types.js';
+declare const PaginationItem: import("svelte").Component<PaginationItemProps, {}, "">;
+type PaginationItem = ReturnType<typeof PaginationItem>;
+export default PaginationItem;

package/dist/components/pagination/PaginationItem.types.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface PaginationItemProps extends HTMLAttributes<HTMLLIElement> {
+    class?: string;
+    children: Snippet;
+}

package/dist/components/pagination/PaginationItem.types.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/dist/components/pagination/PaginationLink.svelte ADDED Viewed

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import { paginationLinkVariants } from './PaginationLink.variants.js';
+	import type { PaginationLinkProps } from './PaginationLink.types.js';
+	let {
+		class: className,
+		active = false,
+		size = 'md',
+		child,
+		children,
+		...restProps
+	}: PaginationLinkProps = $props();
+	const mergedProps = $derived({
+		...restProps,
+		type: 'button' as const,
+		'aria-current': active ? ('page' as const) : undefined,
+		'data-active': active ? '' : undefined,
+		class: cn(paginationLinkVariants({ active, size }), className)
+	});
+</script>
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<button {...mergedProps}>
+		{@render children()}
+	</button>
+{/if}

package/dist/components/pagination/PaginationLink.svelte.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import type { PaginationLinkProps } from './PaginationLink.types.js';
+declare const PaginationLink: import("svelte").Component<PaginationLinkProps, {}, "">;
+type PaginationLink = ReturnType<typeof PaginationLink>;
+export default PaginationLink;

package/dist/components/pagination/PaginationLink.types.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { PaginationLinkVariantProps } from './PaginationLink.variants.js';
+export interface PaginationLinkProps extends Omit<HTMLButtonAttributes, 'children' | 'class'> {
+    class?: string;
+    /** Marks this as the current page — sets `aria-current="page"` and the active style. */
+    active?: boolean;
+    /** Density variant. Default 'md'. */
+    size?: PaginationLinkVariantProps['size'];
+    children: Snippet;
+    /** Renders a consumer-supplied element (e.g. a router `Link`) instead of a plain `<button>`. */
+    child?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+}

package/dist/components/pagination/PaginationLink.types.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/dist/components/pagination/PaginationLink.variants.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const paginationLinkVariants: (props?: ({
+    active?: boolean | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type PaginationLinkVariantProps = VariantProps<typeof paginationLinkVariants>;

package/dist/components/pagination/PaginationLink.variants.js ADDED Viewed

@@ -0,0 +1,18 @@
+import { cva } from 'class-variance-authority';
+export const paginationLinkVariants = cva('inline-flex cursor-pointer items-center justify-center rounded-md leading-snug transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', {
+    variants: {
+        active: {
+            true: 'bg-primary text-primary-foreground',
+            false: 'text-foreground-soft hover:bg-surface-subtle'
+        },
+        size: {
+            sm: 'h-8 min-w-8 px-1.5 text-sm',
+            md: 'h-9 min-w-9 px-2 text-sm',
+            lg: 'h-10 min-w-10 px-2.5 text-sm'
+        }
+    },
+    defaultVariants: {
+        active: false,
+        size: 'md'
+    }
+});

package/dist/components/pagination/PaginationList.svelte ADDED Viewed

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import type { PaginationListProps } from './PaginationList.types.js';
+	let { class: className, children, ...restProps }: PaginationListProps = $props();
+</script>
+<ul class={cn('flex items-center gap-tight', className)} {...restProps}>
+	{@render children()}
+</ul>

package/dist/components/pagination/PaginationList.svelte.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import type { PaginationListProps } from './PaginationList.types.js';
+declare const PaginationList: import("svelte").Component<PaginationListProps, {}, "">;
+type PaginationList = ReturnType<typeof PaginationList>;
+export default PaginationList;

package/dist/components/pagination/PaginationList.types.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface PaginationListProps extends HTMLAttributes<HTMLUListElement> {
+    class?: string;
+    children: Snippet;
+}

package/dist/components/pagination/PaginationList.types.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/dist/components/pagination/PaginationNext.svelte ADDED Viewed

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import { paginationNextVariants } from './PaginationNext.variants.js';
+	import type { PaginationNextProps } from './PaginationNext.types.js';
+	let { class: className, label, size = 'md', ...restProps }: PaginationNextProps = $props();
+	const iconSize = $derived(size === 'sm' ? 'size-3.5' : 'size-4');
+</script>
+<button type="button" class={cn(paginationNextVariants({ size }), className)} {...restProps}>
+	{label ?? 'Next'}
+	<svg
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		aria-hidden="true"
+		class={iconSize}
+	>
+		<path d="m9 18 6-6-6-6" />
+	</svg>
+</button>

package/dist/components/pagination/PaginationNext.svelte.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import type { PaginationNextProps } from './PaginationNext.types.js';
+declare const PaginationNext: import("svelte").Component<PaginationNextProps, {}, "">;
+type PaginationNext = ReturnType<typeof PaginationNext>;
+export default PaginationNext;

package/dist/components/pagination/PaginationNext.types.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { PaginationNextVariantProps } from './PaginationNext.variants.js';
+export interface PaginationNextProps extends Omit<HTMLButtonAttributes, 'children' | 'class'> {
+    class?: string;
+    /** Accessible + visible label. Defaults to "Next" — override for localization. */
+    label?: string;
+    /** Density variant. Default 'md'. */
+    size?: PaginationNextVariantProps['size'];
+}

package/dist/components/pagination/PaginationNext.types.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/dist/components/pagination/PaginationNext.variants.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const paginationNextVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type PaginationNextVariantProps = VariantProps<typeof paginationNextVariants>;

package/dist/components/pagination/PaginationNext.variants.js ADDED Viewed

@@ -0,0 +1,13 @@
+import { cva } from 'class-variance-authority';
+export const paginationNextVariants = cva('inline-flex cursor-pointer items-center gap-tight rounded-md leading-snug text-foreground-soft transition-colors duration-150 hover:bg-surface-subtle focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50', {
+    variants: {
+        size: {
+            sm: 'h-8 px-2 text-sm',
+            md: 'h-9 px-3 text-sm',
+            lg: 'h-10 px-3.5 text-sm'
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});