sheer-ui 0.0.0

package/src/lib/components/navigation-menu/types.ts

@@ -0,0 +1,189 @@
+import type { EscapeBehaviorType } from '../../internal/escape-layer/types.js';
+import type { InteractOutsideBehaviorType } from '../../internal/dismissible-layer/types.js';
+import type { OnChangeFn, WithChild, WithChildNoChildrenSnippetProps, Without } from '../../internal/types.js';
+import type {
+	BitsPrimitiveAnchorAttributes,
+	BitsPrimitiveButtonAttributes,
+	BitsPrimitiveDivAttributes,
+	BitsPrimitiveElementAttributes,
+	BitsPrimitiveLiAttributes,
+	BitsPrimitiveUListAttributes,
+} from '../../internal/attribute-types.js';
+import type { Direction, Orientation } from '../../internal/index.js';
+
+export type NavigationMenuRootPropsWithoutHTML = WithChild<{
+	/**
+	 * The value of the currently open menu item.
+	 *
+	 * @bindable
+	 */
+	value?: string;
+
+	/**
+	 * The callback to call when a menu item is selected.
+	 */
+	onValueChange?: OnChangeFn<string>;
+
+	/**
+	 * The amount of time in ms from when the mouse enters a trigger until the content opens.
+	 *
+	 * @default 200
+	 */
+	delayDuration?: number;
+
+	/**
+	 * The amount of time in ms that a user has to enter another trigger without
+	 * incurring a delay again.
+	 *
+	 * @default 300
+	 */
+	skipDelayDuration?: number;
+
+	/**
+	 * The reading direction of the content.
+	 *
+	 * @default "ltr"
+	 */
+	dir?: Direction;
+
+	/**
+	 * The orientation of the menu.
+	 */
+	orientation?: Orientation;
+}>;
+
+export type NavigationMenuRootProps = NavigationMenuRootPropsWithoutHTML &
+	Without<BitsPrimitiveElementAttributes, NavigationMenuRootPropsWithoutHTML>;
+
+export type NavigationMenuSubPropsWithoutHTML = WithChild<{
+	/**
+	 * The value of the currently open menu item within the menu.
+	 *
+	 * @bindable
+	 */
+	value?: string;
+
+	/**
+	 * A callback fired when the active menu item changes.
+	 */
+	onValueChange?: OnChangeFn<string>;
+
+	/**
+	 * The orientation of the menu.
+	 */
+	orientation?: Orientation;
+}>;
+
+export type NavigationMenuSubProps = NavigationMenuSubPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, NavigationMenuSubPropsWithoutHTML>;
+
+export type NavigationMenuListPropsWithoutHTML = WithChildNoChildrenSnippetProps<
+	{},
+	{
+		/**
+		 * Attributes to spread onto a wrapper element around the content.
+		 * Do not style the wrapper element, its position is handled by the component's own CSS.
+		 */
+		wrapperProps: Record<string, unknown>;
+	}
+>;
+
+export type NavigationMenuListProps = NavigationMenuListPropsWithoutHTML &
+	Without<BitsPrimitiveUListAttributes, NavigationMenuListPropsWithoutHTML>;
+
+export type NavigationMenuItemPropsWithoutHTML = WithChild<{
+	/**
+	 * The value of the menu item.
+	 */
+	value?: string;
+
+	/**
+	 * Whether to open the menu associated with the item when the item's trigger
+	 * is hovered.
+	 *
+	 * @default true
+	 */
+	openOnHover?: boolean;
+}>;
+
+export type NavigationMenuItemProps = NavigationMenuItemPropsWithoutHTML &
+	Without<BitsPrimitiveLiAttributes, NavigationMenuItemPropsWithoutHTML>;
+
+export type NavigationMenuTriggerPropsWithoutHTML = WithChild<{
+	/**
+	 * Whether the trigger is disabled.
+	 * @defaultValue false
+	 */
+	disabled?: boolean | null | undefined;
+}>;
+
+export type NavigationMenuTriggerProps = NavigationMenuTriggerPropsWithoutHTML &
+	Without<BitsPrimitiveButtonAttributes, NavigationMenuTriggerPropsWithoutHTML>;
+
+export type NavigationMenuContentSnippetProps = {
+	/** Open state, so a `child` can own the `{#if}` and bring its own transition. */
+	open: boolean;
+};
+
+export type NavigationMenuContentPropsWithoutHTML = WithChildNoChildrenSnippetProps<
+	{
+	/**
+	 * Callback fired when an interaction occurs outside the content.
+	 * Default behavior can be prevented with `event.preventDefault()`
+	 */
+	onInteractOutside?: (event: PointerEvent) => void;
+
+	/**
+	 * Callback fired when a focus event occurs outside the content.
+	 * Default behavior can be prevented with `event.preventDefault()`
+	 */
+	onFocusOutside?: (event: FocusEvent) => void;
+
+	/**
+	 * Callback fires when an escape keydown event occurs.
+	 * Default behavior can be prevented with `event.preventDefault()`
+	 */
+	onEscapeKeydown?: (event: KeyboardEvent) => void;
+
+	/**
+	 * Behavior when the escape key is pressed while the menu content is open.
+	 */
+	escapeKeydownBehavior?: EscapeBehaviorType;
+
+	/**
+	 * Behavior when an interaction occurs outside the content.
+	 */
+	interactOutsideBehavior?: InteractOutsideBehaviorType;
+
+	},
+	NavigationMenuContentSnippetProps
+>;
+
+export type NavigationMenuContentProps = NavigationMenuContentPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, NavigationMenuContentPropsWithoutHTML>;
+
+export type NavigationMenuLinkPropsWithoutHTML = WithChild<{
+	/**
+	 * Whether the link is the current active page
+	 */
+	active?: boolean;
+
+	/**
+	 * A callback fired when the link is clicked.
+	 * Default behavior can be prevented with `event.preventDefault()`
+	 */
+	onSelect?: (e: Event) => void;
+}>;
+
+export type NavigationMenuLinkProps = NavigationMenuLinkPropsWithoutHTML &
+	Without<BitsPrimitiveAnchorAttributes, NavigationMenuLinkPropsWithoutHTML>;
+
+export type NavigationMenuIndicatorPropsWithoutHTML = WithChild;
+
+export type NavigationMenuIndicatorProps = NavigationMenuIndicatorPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, NavigationMenuIndicatorPropsWithoutHTML>;
+
+export type NavigationMenuViewportPropsWithoutHTML = WithChildNoChildrenSnippetProps<{}, NavigationMenuContentSnippetProps>;
+
+export type NavigationMenuViewportProps = NavigationMenuViewportPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, NavigationMenuViewportPropsWithoutHTML>;

package/src/lib/components/pagination/components/pagination-next-button.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { PaginationNextButtonProps } from '../types.js';
+	import { PaginationButtonState } from '../pagination.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+	import { buttonVariants } from '../../button';
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		child,
+		children,
+		ref = $bindable(null),
+		type = 'button',
+		disabled = false,
+		...restProps
+	}: PaginationNextButtonProps = $props();
+
+	const nextButtonState = PaginationButtonState.create({
+		type: 'next',
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+		disabled: boxWith(() => Boolean(disabled)),
+	});
+
+	const mergedProps = $derived(
+		mergeProps(
+			{
+				'aria-label': 'Go to next page',
+				class: buttonVariants({
+					size: 'default',
+					variant: 'ghost',
+					class: 'gap-1! sm:pe-2.5',
+				}),
+			},
+			restProps,
+			nextButtonState.props,
+			{ type },
+		),
+	);
+</script>
+
+{#snippet Fallback()}
+	<span>Next</span>
+	<ChevronRightIcon class="size-4" />
+{/snippet}
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<button {...mergedProps}>
+		{@render (children || Fallback)()}
+	</button>
+{/if}

package/src/lib/components/pagination/components/pagination-page.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { PaginationPageProps } from '../types.js';
+	import { PaginationPageState } from '../pagination.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+	import { type ButtonProps, buttonVariants } from '../../button';
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		page,
+		child,
+		children,
+		type = 'button',
+		ref = $bindable(null),
+		disabled = false,
+		size = 'icon',
+		isActive,
+		...restProps
+	}: PaginationPageProps &
+		Pick<ButtonProps, 'size'> & {
+			isActive: boolean;
+		} = $props();
+
+	const pageState = PaginationPageState.create({
+		id: boxWith(() => id),
+		page: boxWith(() => page),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+		disabled: boxWith(() => Boolean(disabled)),
+	});
+
+	const mergedProps = $derived(
+		mergeProps(
+			{
+				'aria-current': isActive ? 'page' : undefined,
+				'data-slot': 'pagination-link',
+				'data-active': isActive,
+				class: buttonVariants({
+					variant: isActive ? 'outline' : 'ghost',
+					size,
+				}),
+			},
+			restProps,
+			pageState.props,
+			{ type },
+		),
+	);
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<button {...mergedProps}>
+		{#if children}
+			{@render children?.()}
+		{:else}
+			{page.value}
+		{/if}
+	</button>
+{/if}

package/src/lib/components/pagination/components/pagination-prev-button.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { PaginationPrevButtonProps } from '../types.js';
+	import { PaginationButtonState } from '../pagination.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+	import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left';
+	import { buttonVariants } from '../../button';
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		child,
+		children,
+		ref = $bindable(null),
+		type = 'button',
+		disabled = false,
+		...restProps
+	}: PaginationPrevButtonProps = $props();
+
+	const prevButtonState = PaginationButtonState.create({
+		type: 'prev',
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+		disabled: boxWith(() => Boolean(disabled)),
+	});
+
+	const mergedProps = $derived(
+		mergeProps(
+			{
+				'aria-label': 'Go to previous page',
+				class: buttonVariants({
+					size: 'default',
+					variant: 'ghost',
+					class: 'gap-1! sm:ps-2.5',
+				}),
+			},
+			restProps,
+			prevButtonState.props,
+			{ type },
+		),
+	);
+</script>
+
+{#snippet Fallback()}
+	<ChevronLeftIcon class="size-4" />
+	<span>Previous</span>
+{/snippet}
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<button {...mergedProps}>
+		{@render (children || Fallback)()}
+	</button>
+{/if}

package/src/lib/components/pagination/components/pagination.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { PaginationRootProps } from '../types.js';
+	import { PaginationRootState } from '../pagination.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		count,
+		perPage = 1,
+		page = $bindable(1),
+		ref = $bindable(null),
+		siblingCount = 1,
+		onPageChange = () => {},
+		loop = false,
+		orientation = 'horizontal',
+		child,
+		children,
+		...restProps
+	}: PaginationRootProps = $props();
+
+	const rootState = PaginationRootState.create({
+		id: boxWith(() => id),
+		count: boxWith(() => count),
+		perPage: boxWith(() => perPage),
+		page: boxWith(
+			() => page,
+			(v) => {
+				page = v;
+				onPageChange?.(v);
+			},
+		),
+		loop: boxWith(() => loop),
+		siblingCount: boxWith(() => siblingCount),
+		orientation: boxWith(() => orientation),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+	});
+
+	const mergedProps = $derived(
+		mergeProps(
+			{
+				role: 'navigation',
+				'aria-label': 'pagination',
+				'data-slot': 'pagination',
+				class: 'mx-auto flex w-full items-center justify-center gap-1 data-vertical:flex-col',
+			},
+			restProps,
+			rootState.props,
+		),
+	);
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps, ...rootState.snippetProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.(rootState.snippetProps)}
+	</div>
+{/if}

package/src/lib/components/pagination/index.ts

@@ -0,0 +1,11 @@
+export { default as Root } from './components/pagination.svelte';
+export { default as PrevButton } from './components/pagination-prev-button.svelte';
+export { default as NextButton } from './components/pagination-next-button.svelte';
+export { default as Page } from './components/pagination-page.svelte';
+
+export type {
+	PaginationRootProps as RootProps,
+	PaginationPrevButtonProps as PrevButtonProps,
+	PaginationNextButtonProps as NextButtonProps,
+	PaginationPageProps as PageProps,
+} from './types.js';