@dryui/ui 0.3.0 → 0.4.0

package/dist/notification-center/notification-center-trigger-button.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+	import { getNotificationCenterCtx } from './context.svelte.js';
+
+	interface Props extends Omit<HTMLButtonAttributes, 'children'> {
+		children: Snippet<[{ unreadCount: number }]>;
+	}
+
+	let { children, onclick, ...rest }: Props = $props();
+
+	const ctx = getNotificationCenterCtx();
+
+	$effect(() => {
+		const el = document.getElementById(ctx.triggerId);
+		if (el) {
+			ctx.triggerEl = el as HTMLButtonElement;
+		}
+	});
+</script>
+
+<Button
+	variant="outline"
+	type="button"
+	id={ctx.triggerId}
+	popovertarget={ctx.panelId}
+	aria-expanded={ctx.open}
+	aria-haspopup="dialog"
+	data-notification-center-trigger
+	{onclick}
+	{...rest}
+>
+	{@render children({ unreadCount: ctx.unreadCount })}
+</Button>

package/dist/notification-center/notification-center-trigger-button.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLButtonAttributes, 'children'> {
+    children: Snippet<[{
+        unreadCount: number;
+    }]>;
+}
+declare const NotificationCenterTriggerButton: import("svelte").Component<Props, {}, "">;
+type NotificationCenterTriggerButton = ReturnType<typeof NotificationCenterTriggerButton>;
+export default NotificationCenterTriggerButton;

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

@@ -2,4 +2,4 @@ import type { NumberInputProps as PrimitiveNumberInputProps } from '@dryui/primi
 export interface NumberInputProps extends Omit<PrimitiveNumberInputProps, 'size'> {
     size?: 'sm' | 'md' | 'lg';
 }
-export { default as NumberInput } from './number-input.svelte';
+export { default as NumberInput } from './number-input-button.svelte';

package/dist/number-input/index.js

@@ -1 +1 @@
-export { default as NumberInput } from './number-input.svelte';
+export { default as NumberInput } from './number-input-button.svelte';

package/dist/number-input/{number-input.svelte → number-input-button.svelte}

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { HTMLInputAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
 
 	interface Props extends Omit<HTMLInputAttributes, 'size'> {
 		value?: number;
@@ -21,51 +22,53 @@
 		...rest
 	}: Props = $props();
 
-	function decrement() {
-		const next = value - step;
+	function nudge(direction: 1 | -1) {
+		const next = value + direction * step;
 		if (min !== undefined && next < min) return;
-		value = next;
-	}
-
-	function increment() {
-		const next = value + step;
 		if (max !== undefined && next > max) return;
 		value = next;
 	}
 </script>
 
-<span data-number-input-wrapper data-size={size} data-disabled={disabled || undefined}>
-	<div role="group" data-disabled={disabled || undefined}>
-		<button type="button" tabindex="-1" aria-label="Decrease value" {disabled} onclick={decrement}
-			>&minus;</button
-		>
-		<input
-			type="number"
-			bind:value
-			class={className ?? ''}
-			{min}
-			{max}
-			{step}
-			{disabled}
-			data-disabled={disabled || undefined}
-			{...rest}
-		/>
-		<button type="button" tabindex="-1" aria-label="Increase value" {disabled} onclick={increment}
-			>+</button
-		>
-	</div>
-</span>
+<div role="group" data-number-input-wrapper data-size={size} data-disabled={disabled || undefined}>
+	<Button
+		variant="outline"
+		size="icon-sm"
+		type="button"
+		tabindex={-1}
+		aria-label="Decrease value"
+		{disabled}
+		onclick={() => nudge(-1)}>&minus;</Button
+	>
+	<input
+		type="number"
+		bind:value
+		class={className ?? ''}
+		{min}
+		{max}
+		{step}
+		{disabled}
+		data-disabled={disabled || undefined}
+		{...rest}
+	/>
+	<Button
+		variant="outline"
+		size="icon-sm"
+		type="button"
+		tabindex={-1}
+		aria-label="Increase value"
+		{disabled}
+		onclick={() => nudge(1)}>+</Button
+	>
+</div>
 
 <style>
 	[data-number-input-wrapper] {
 		container-type: inline-size;
 		display: inline-grid;
-		grid-auto-flow: column;
-		grid-auto-columns: max-content;
+		grid-template-columns: auto minmax(3ch, max-content) auto;
 		align-items: stretch;
-		--dry-number-input-max-width: 12rem;
-		--dry-number-input-btn-width: 2em;
-
+		gap: var(--dry-space-1);
 		--dry-input-bg: var(--dry-color-bg-raised);
 		--dry-input-border: var(--dry-color-stroke-strong);
 		--dry-input-color: var(--dry-color-text-strong);
@@ -73,60 +76,6 @@
 		--dry-input-padding-x: var(--dry-space-3);
 		--dry-input-padding-y: var(--dry-space-2);
 		--dry-input-font-size: var(--dry-type-small-size);
-		--dry-number-input-focus-z-index: 1;
-	}
-
-	[data-number-input-wrapper] div {
-		display: inline-grid;
-		grid-template-columns: var(--dry-number-input-btn-width) minmax(3ch, max-content) var(
-				--dry-number-input-btn-width
-			);
-		align-items: stretch;
-	}
-
-	[data-number-input-wrapper] button {
-		display: inline-grid;
-		place-items: center;
-		padding: 0;
-		font-size: var(--dry-input-font-size);
-		font-family: var(--dry-font-sans);
-		color: var(--dry-input-color);
-		background: var(--dry-input-bg);
-		border: 1px solid var(--dry-input-border);
-		cursor: pointer;
-		transition:
-			border-color var(--dry-duration-fast) var(--dry-ease-default),
-			background var(--dry-duration-fast) var(--dry-ease-default);
-		box-sizing: border-box;
-		line-height: 1;
-		user-select: none;
-	}
-
-	[data-number-input-wrapper] button:hover:not(:disabled) {
-		border-color: var(--dry-color-stroke-strong);
-		background: var(--dry-color-bg-raised);
-	}
-
-	[data-number-input-wrapper] button:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: -1px;
-		border-color: var(--dry-color-focus-ring);
-		z-index: var(--dry-number-input-focus-z-index);
-	}
-
-	[data-number-input-wrapper] button:disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
-
-	[data-number-input-wrapper] button:first-child {
-		border-radius: var(--dry-input-radius) 0 0 var(--dry-input-radius);
-		border-right: none;
-	}
-
-	[data-number-input-wrapper] button:last-child {
-		border-radius: 0 var(--dry-input-radius) var(--dry-input-radius) 0;
-		border-left: none;
 	}
 
 	[data-number-input-wrapper] input {
@@ -137,10 +86,8 @@
 		color: var(--dry-input-color);
 		background: var(--dry-input-bg);
 		border: 1px solid var(--dry-input-border);
-		border-radius: 0;
-		transition:
-			border-color var(--dry-duration-fast) var(--dry-ease-default),
-			box-shadow var(--dry-duration-fast) var(--dry-ease-default);
+		border-radius: var(--dry-input-radius);
+		transition: border-color var(--dry-duration-fast) var(--dry-ease-default);
 		box-sizing: border-box;
 		appearance: none;
 		text-align: center;
@@ -165,7 +112,6 @@
 		outline: 2px solid var(--dry-color-focus-ring);
 		outline-offset: -1px;
 		border-color: var(--dry-color-focus-ring);
-		z-index: var(--dry-number-input-focus-z-index);
 	}
 
 	[data-number-input-wrapper] input[data-disabled] {
@@ -178,13 +124,10 @@
 		cursor: not-allowed;
 	}
 
-	/* Size variants */
 	[data-number-input-wrapper][data-size='sm'] {
 		--dry-input-padding-x: var(--dry-space-2);
 		--dry-input-padding-y: var(--dry-space-1);
 		--dry-input-font-size: var(--dry-type-tiny-size);
-		--dry-number-input-max-width: 8rem;
-		--dry-number-input-btn-width: 1.75em;
 	}
 
 	[data-number-input-wrapper][data-size='sm'] input {
@@ -195,8 +138,6 @@
 		--dry-input-padding-x: var(--dry-space-3);
 		--dry-input-padding-y: var(--dry-space-2);
 		--dry-input-font-size: var(--dry-type-small-size);
-		--dry-number-input-max-width: 10rem;
-		--dry-number-input-btn-width: 2em;
 	}
 
 	[data-number-input-wrapper][data-size='md'] input {
@@ -207,18 +148,9 @@
 		--dry-input-padding-x: var(--dry-space-4);
 		--dry-input-padding-y: var(--dry-space-2_5);
 		--dry-input-font-size: var(--dry-type-heading-4-size);
-		--dry-number-input-max-width: 12rem;
-		--dry-number-input-btn-width: 2.5em;
 	}
 
 	[data-number-input-wrapper][data-size='lg'] input {
 		line-height: var(--dry-type-heading-4-leading);
 	}
-
-	/* Container query */
-	@container (max-width: 200px) {
-		[data-number-input-wrapper] {
-			--dry-input-padding-x: var(--dry-space-2);
-		}
-	}
 </style>

package/dist/number-input/number-input-button.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLInputAttributes, 'size'> {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+}
+declare const NumberInputButton: import("svelte").Component<Props, {}, "value">;
+type NumberInputButton = ReturnType<typeof NumberInputButton>;
+export default NumberInputButton;

package/dist/option-swatch-group/index.d.ts

@@ -10,7 +10,7 @@ export interface OptionSwatchGroupSwatchProps extends HTMLAttributes<HTMLSpanEle
     children?: Snippet;
 }
 import OptionSwatchGroupRoot from './option-swatch-group-root.svelte';
-import OptionSwatchGroupItem from './option-swatch-group-item.svelte';
+import OptionSwatchGroupItem from './option-swatch-group-item-button.svelte';
 import OptionSwatchGroupSwatch from './option-swatch-group-swatch.svelte';
 import OptionSwatchGroupLabel from './option-swatch-group-label.svelte';
 import OptionSwatchGroupMeta from './option-swatch-group-meta.svelte';

package/dist/option-swatch-group/index.js

@@ -1,5 +1,5 @@
 import OptionSwatchGroupRoot from './option-swatch-group-root.svelte';
-import OptionSwatchGroupItem from './option-swatch-group-item.svelte';
+import OptionSwatchGroupItem from './option-swatch-group-item-button.svelte';
 import OptionSwatchGroupSwatch from './option-swatch-group-swatch.svelte';
 import OptionSwatchGroupLabel from './option-swatch-group-label.svelte';
 import OptionSwatchGroupMeta from './option-swatch-group-meta.svelte';

package/dist/option-swatch-group/{option-swatch-group-item.svelte → option-swatch-group-item-button.svelte}

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
 	import { getSelectableTileGroupCtx } from './context.svelte.js';
 
 	interface Props extends Omit<HTMLButtonAttributes, 'value'> {
@@ -10,14 +11,7 @@
 		children: Snippet;
 	}
 
-	let {
-		value,
-		disabled = false,
-		unavailable = false,
-		class: className,
-		children,
-		...rest
-	}: Props = $props();
+	let { value, disabled = false, unavailable = false, children, ...rest }: Props = $props();
 
 	const ctx = getSelectableTileGroupCtx();
 	const isDisabled = $derived(disabled || unavailable || ctx.disabled);
@@ -61,69 +55,22 @@
 	}
 </script>
 
-<button
+<Button
+	variant="outline"
 	type="button"
 	role="radio"
 	aria-checked={isSelected}
 	disabled={isDisabled}
 	data-option-swatch-group-item
 	data-state={isSelected ? 'checked' : 'unchecked'}
-	data-disabled={isDisabled || undefined}
 	data-unavailable={unavailable || undefined}
 	data-value={value}
 	tabindex={isSelected ? 0 : -1}
-	class={className}
+	{...rest}
 	onclick={() => {
 		if (!isDisabled) ctx.select(value);
 	}}
 	onkeydown={handleKeydown}
-	{...rest}
 >
 	{@render children()}
-</button>
-
-<style>
-	[data-option-swatch-group-item] {
-		--dry-option-swatch-bg: var(--dry-color-bg-raised);
-		--dry-option-swatch-border: var(--dry-color-stroke-weak);
-		--dry-option-swatch-border-selected: var(--dry-color-stroke-focus);
-		--dry-option-swatch-text: var(--dry-color-text-strong);
-		--dry-option-swatch-muted: var(--dry-color-text-weak);
-
-		display: grid;
-		grid-template-columns: 1.5rem minmax(0, 1fr);
-		align-items: center;
-		gap: var(--dry-space-3);
-		padding: var(--dry-space-3);
-		border: 1px solid var(--dry-option-swatch-border);
-		border-radius: var(--dry-radius-xl);
-		background: var(--dry-option-swatch-bg);
-		color: var(--dry-option-swatch-text);
-		box-shadow: var(--dry-shadow-xs);
-		cursor: pointer;
-		text-align: left;
-		transition:
-			border-color var(--dry-duration-fast) var(--dry-ease-default),
-			box-shadow var(--dry-duration-fast) var(--dry-ease-default),
-			transform var(--dry-duration-fast) var(--dry-ease-default);
-	}
-
-	[data-option-swatch-group-item]:hover:not(:disabled) {
-		border-color: var(--dry-color-stroke-strong);
-		transform: translateY(-1px);
-	}
-
-	[data-option-swatch-group-item]:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: 2px;
-	}
-
-	[data-option-swatch-group-item][data-state='checked'] {
-		border-color: var(--dry-option-swatch-border-selected);
-		box-shadow: 0 0 0 1px var(--dry-option-swatch-border-selected);
-	}
-
-	[data-option-swatch-group-item][data-unavailable] {
-		opacity: 0.6;
-	}
-</style>
+</Button>

package/dist/option-swatch-group/option-swatch-group-item-button.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLButtonAttributes, 'value'> {
+    value: string;
+    disabled?: boolean;
+    unavailable?: boolean;
+    children: Snippet;
+}
+declare const OptionSwatchGroupItemButton: import("svelte").Component<Props, {}, "">;
+type OptionSwatchGroupItemButton = ReturnType<typeof OptionSwatchGroupItemButton>;
+export default OptionSwatchGroupItemButton;

package/dist/option-swatch-group/option-swatch-group-label.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { HTMLAttributes } from 'svelte/elements';
 import type { Snippet } from 'svelte';
 interface Props extends HTMLAttributes<HTMLSpanElement> {
-	children?: Snippet;
+    children?: Snippet;
 }
-declare const OptionSwatchGroupLabel: import('svelte').Component<Props, {}, ''>;
+declare const OptionSwatchGroupLabel: import("svelte").Component<Props, {}, "">;
 type OptionSwatchGroupLabel = ReturnType<typeof OptionSwatchGroupLabel>;
 export default OptionSwatchGroupLabel;

package/dist/option-swatch-group/option-swatch-group-meta.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { HTMLAttributes } from 'svelte/elements';
 import type { Snippet } from 'svelte';
 interface Props extends HTMLAttributes<HTMLSpanElement> {
-	children?: Snippet;
+    children?: Snippet;
 }
-declare const OptionSwatchGroupMeta: import('svelte').Component<Props, {}, ''>;
+declare const OptionSwatchGroupMeta: import("svelte").Component<Props, {}, "">;
 type OptionSwatchGroupMeta = ReturnType<typeof OptionSwatchGroupMeta>;
 export default OptionSwatchGroupMeta;

package/dist/option-swatch-group/option-swatch-group-root.svelte.d.ts

@@ -1,11 +1,11 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	value?: string;
-	disabled?: boolean;
-	orientation?: 'horizontal' | 'vertical';
-	children: Snippet;
+    value?: string;
+    disabled?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    children: Snippet;
 }
-declare const OptionSwatchGroupRoot: import('svelte').Component<Props, {}, 'value'>;
+declare const OptionSwatchGroupRoot: import("svelte").Component<Props, {}, "value">;
 type OptionSwatchGroupRoot = ReturnType<typeof OptionSwatchGroupRoot>;
 export default OptionSwatchGroupRoot;

package/dist/option-swatch-group/option-swatch-group-swatch.svelte.d.ts

@@ -1,10 +1,10 @@
 import type { HTMLAttributes } from 'svelte/elements';
 import type { Snippet } from 'svelte';
 interface Props extends HTMLAttributes<HTMLSpanElement> {
-	color?: string;
-	shape?: 'circle' | 'rounded';
-	children?: Snippet;
+    color?: string;
+    shape?: 'circle' | 'rounded';
+    children?: Snippet;
 }
-declare const OptionSwatchGroupSwatch: import('svelte').Component<Props, {}, ''>;
+declare const OptionSwatchGroupSwatch: import("svelte").Component<Props, {}, "">;
 type OptionSwatchGroupSwatch = ReturnType<typeof OptionSwatchGroupSwatch>;
 export default OptionSwatchGroupSwatch;

package/dist/pagination/index.d.ts

@@ -2,9 +2,9 @@ export type { PaginationRootProps, PaginationContentProps, PaginationItemProps,
 import PaginationRoot from './pagination-root.svelte';
 import PaginationContent from './pagination-content.svelte';
 import PaginationItem from './pagination-item.svelte';
-import PaginationPrevious from './pagination-previous.svelte';
-import PaginationNext from './pagination-next.svelte';
-import PaginationLink from './pagination-link.svelte';
+import PaginationPrevious from './pagination-previous-button.svelte';
+import PaginationNext from './pagination-next-button.svelte';
+import PaginationLink from './pagination-link-button.svelte';
 import PaginationEllipsis from './pagination-ellipsis.svelte';
 export declare const Pagination: {
     Root: typeof PaginationRoot;

package/dist/pagination/index.js

@@ -1,9 +1,9 @@
 import PaginationRoot from './pagination-root.svelte';
 import PaginationContent from './pagination-content.svelte';
 import PaginationItem from './pagination-item.svelte';
-import PaginationPrevious from './pagination-previous.svelte';
-import PaginationNext from './pagination-next.svelte';
-import PaginationLink from './pagination-link.svelte';
+import PaginationPrevious from './pagination-previous-button.svelte';
+import PaginationNext from './pagination-next-button.svelte';
+import PaginationLink from './pagination-link-button.svelte';
 import PaginationEllipsis from './pagination-ellipsis.svelte';
 export const Pagination = {
     Root: PaginationRoot,

package/dist/pagination/pagination-content.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLUListElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const PaginationContent: import('svelte').Component<Props, {}, ''>;
+declare const PaginationContent: import("svelte").Component<Props, {}, "">;
 type PaginationContent = ReturnType<typeof PaginationContent>;
 export default PaginationContent;

package/dist/pagination/pagination-ellipsis.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLSpanElement> {}
-declare const PaginationEllipsis: import('svelte').Component<Props, {}, ''>;
+interface Props extends HTMLAttributes<HTMLSpanElement> {
+}
+declare const PaginationEllipsis: import("svelte").Component<Props, {}, "">;
 type PaginationEllipsis = ReturnType<typeof PaginationEllipsis>;
 export default PaginationEllipsis;

package/dist/pagination/pagination-item.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLLIElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const PaginationItem: import('svelte').Component<Props, {}, ''>;
+declare const PaginationItem: import("svelte").Component<Props, {}, "">;
 type PaginationItem = ReturnType<typeof PaginationItem>;
 export default PaginationItem;

package/dist/pagination/pagination-link-button.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+	import { getPaginationCtx } from './context.svelte.js';
+
+	interface Props extends HTMLButtonAttributes {
+		page: number;
+		children: Snippet;
+	}
+
+	let { page, children, ...rest }: Props = $props();
+
+	const ctx = getPaginationCtx();
+</script>
+
+<Button
+	variant="pill"
+	size="sm"
+	type="button"
+	aria-label="Go to page {page}"
+	aria-current={ctx.page === page ? 'page' : undefined}
+	data-state={ctx.page === page ? 'active' : 'inactive'}
+	{...rest}
+	onclick={() => ctx.goto(page)}
+>
+	{@render children()}
+</Button>

package/dist/pagination/pagination-link-button.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+interface Props extends HTMLButtonAttributes {
+    page: number;
+    children: Snippet;
+}
+declare const PaginationLinkButton: import("svelte").Component<Props, {}, "">;
+type PaginationLinkButton = ReturnType<typeof PaginationLinkButton>;
+export default PaginationLinkButton;

package/dist/pagination/pagination-nav-button.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import NavArrowButton from '../internal/nav-arrow-button.svelte';
+	import { getPaginationCtx } from './context.svelte.js';
+
+	interface Props extends HTMLButtonAttributes {
+		direction: 'prev' | 'next';
+		children: Snippet;
+	}
+
+	let { direction, children, ...rest }: Props = $props();
+
+	const ctx = getPaginationCtx();
+
+	const canAdvance = $derived(direction === 'prev' ? ctx.canPrevious : ctx.canNext);
+</script>
+
+<NavArrowButton
+	{direction}
+	variant="pill"
+	size="sm"
+	label={direction === 'prev' ? 'Go to previous page' : 'Go to next page'}
+	disabled={!canAdvance}
+	onclick={() => (direction === 'prev' ? ctx.previous() : ctx.next())}
+	{children}
+	{...rest}
+/>

package/dist/pagination/pagination-nav-button.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+interface Props extends HTMLButtonAttributes {
+    direction: 'prev' | 'next';
+    children: Snippet;
+}
+declare const PaginationNavButton: import("svelte").Component<Props, {}, "">;
+type PaginationNavButton = ReturnType<typeof PaginationNavButton>;
+export default PaginationNavButton;

package/dist/pagination/pagination-next-button.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import PaginationNavButton from './pagination-nav-button.svelte';
+
+	interface Props extends HTMLButtonAttributes {
+		children: Snippet;
+	}
+
+	let props: Props = $props();
+</script>
+
+<PaginationNavButton direction="next" {...props} />

package/dist/pagination/pagination-next-button.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+interface Props extends HTMLButtonAttributes {
+    children: Snippet;
+}
+declare const PaginationNextButton: import("svelte").Component<Props, {}, "">;
+type PaginationNextButton = ReturnType<typeof PaginationNextButton>;
+export default PaginationNextButton;

package/dist/pagination/pagination-previous-button.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import PaginationNavButton from './pagination-nav-button.svelte';
+
+	interface Props extends HTMLButtonAttributes {
+		children: Snippet;
+	}
+
+	let props: Props = $props();
+</script>
+
+<PaginationNavButton direction="prev" {...props} />