sheer-ui 0.4.2 → 0.5.0

package/dist/components/navigation-menu/types.d.ts

@@ -0,0 +1,134 @@
+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/dist/components/navigation-menu/types.js

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

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

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

package/dist/components/pagination/components/pagination-page.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { PaginationPageProps } from '../types.js';
+import { type ButtonProps } from '../../button';
+type $$ComponentProps = PaginationPageProps & Pick<ButtonProps, 'size'> & {
+    isActive: boolean;
+};
+declare const PaginationPage: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type PaginationPage = ReturnType<typeof PaginationPage>;
+export default PaginationPage;

package/dist/components/pagination/components/pagination-prev-button.svelte.d.ts

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

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

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

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

@@ -0,0 +1,5 @@
+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';

package/dist/components/pagination/index.js

@@ -0,0 +1,4 @@
+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';

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

@@ -0,0 +1,84 @@
+import type { Page, PageItem } from './types.js';
+import type { BitsKeyboardEvent, BitsMouseEvent, RefAttachment, RefOpts } from '../../internal/types.js';
+import { RovingFocusGroup } from '../../internal/roving-focus-group.svelte.js';
+import { type Orientation } from '../../internal/index.js';
+interface PaginationRootStateOpts extends RefOpts {
+    readonly count: number;
+    readonly perPage: number;
+    readonly siblingCount: number;
+    readonly orientation: Orientation;
+    readonly loop: boolean;
+    page: number;
+}
+export declare class PaginationRootState {
+    static create(opts: PaginationRootStateOpts): PaginationRootState;
+    readonly opts: PaginationRootStateOpts;
+    readonly attachment: RefAttachment;
+    readonly totalPages: number;
+    readonly range: {
+        start: number;
+        end: number;
+    };
+    readonly pages: PageItem[];
+    readonly hasPrevPage: boolean;
+    readonly hasNextPage: boolean;
+    readonly rovingFocusGroup: RovingFocusGroup;
+    constructor(opts: PaginationRootStateOpts);
+    prevPage(): void;
+    nextPage(): void;
+    readonly snippetProps: {
+        pages: PageItem[];
+        range: {
+            start: number;
+            end: number;
+        };
+        currentPage: number;
+    };
+    readonly props: {
+        readonly id: string;
+        readonly 'data-orientation': Orientation;
+    };
+}
+interface PaginationPageStateOpts extends RefOpts {
+    readonly page: Page;
+    readonly disabled: boolean;
+}
+export declare class PaginationPageState {
+    #private;
+    static create(opts: PaginationPageStateOpts): PaginationPageState;
+    readonly opts: PaginationPageStateOpts;
+    readonly root: PaginationRootState;
+    readonly attachment: RefAttachment;
+    constructor(opts: PaginationPageStateOpts, root: PaginationRootState);
+    onclick(e: BitsMouseEvent): void;
+    onkeydown(e: BitsKeyboardEvent): void;
+    readonly props: {
+        readonly id: string;
+        readonly 'aria-label': `Page ${number}`;
+        readonly 'data-value': `${number}`;
+        readonly 'data-selected': "" | undefined;
+        readonly onclick: (e: BitsMouseEvent) => void;
+        readonly onkeydown: (e: BitsKeyboardEvent) => void;
+    };
+}
+interface PaginationButtonStateOpts extends RefOpts {
+    readonly disabled: boolean;
+    type: 'prev' | 'next';
+}
+export declare class PaginationButtonState {
+    #private;
+    static create(opts: PaginationButtonStateOpts): PaginationButtonState;
+    readonly opts: PaginationButtonStateOpts;
+    readonly root: PaginationRootState;
+    readonly attachment: RefAttachment;
+    constructor(opts: PaginationButtonStateOpts, root: PaginationRootState);
+    onclick(e: BitsMouseEvent): void;
+    onkeydown(e: BitsKeyboardEvent): void;
+    readonly props: {
+        readonly id: string;
+        readonly disabled: boolean;
+        readonly onclick: (e: BitsMouseEvent) => void;
+        readonly onkeydown: (e: BitsKeyboardEvent) => void;
+    };
+}
+export {};

package/dist/components/pagination/pagination.svelte.js

@@ -0,0 +1,201 @@
+import { createContext } from 'svelte';
+import { attachRef } from '../../internal/tools/index.js';
+import { createBitsAttrs } from '../../internal/attrs.js';
+import { kbd } from '../../internal/kbd.js';
+import { RovingFocusGroup } from '../../internal/roving-focus-group.svelte.js';
+import {} from '../../internal/index.js';
+const paginationAttrs = createBitsAttrs({
+    component: 'pagination',
+    parts: ['root', 'page', 'prev', 'next'],
+});
+const [getPaginationRoot, setPaginationRoot] = createContext();
+export class PaginationRootState {
+    static create(opts) {
+        return setPaginationRoot(new PaginationRootState(opts));
+    }
+    opts;
+    attachment;
+    totalPages = $derived.by(() => {
+        if (this.opts.count === 0)
+            return 1;
+        return Math.ceil(this.opts.count / this.opts.perPage);
+    });
+    range = $derived.by(() => {
+        const start = (this.opts.page - 1) * this.opts.perPage;
+        const end = Math.min(start + this.opts.perPage, this.opts.count);
+        return { start: start + 1, end };
+    });
+    pages = $derived.by(() => getPageItems({
+        page: this.opts.page,
+        totalPages: this.totalPages,
+        siblingCount: this.opts.siblingCount,
+    }));
+    hasPrevPage = $derived.by(() => this.opts.page > 1);
+    hasNextPage = $derived.by(() => this.opts.page < this.totalPages);
+    rovingFocusGroup;
+    constructor(opts) {
+        this.opts = opts;
+        this.attachment = attachRef((v) => (opts.ref = v));
+        this.rovingFocusGroup = new RovingFocusGroup({
+            candidateSelector: [paginationAttrs.selector('prev'), paginationAttrs.selector('page'), paginationAttrs.selector('next')].join(', '),
+            rootNode: () => opts.ref,
+            loop: () => opts.loop,
+            orientation: () => opts.orientation,
+        });
+    }
+    prevPage() {
+        this.opts.page = Math.max(this.opts.page - 1, 1);
+    }
+    nextPage() {
+        this.opts.page = Math.min(this.opts.page + 1, this.totalPages);
+    }
+    snippetProps = $derived.by(() => ({
+        pages: this.pages,
+        range: this.range,
+        currentPage: this.opts.page,
+    }));
+    props = $derived.by(() => ({
+        id: this.opts.id,
+        'data-orientation': this.opts.orientation,
+        [paginationAttrs.root]: '',
+        ...this.attachment,
+    }));
+}
+export class PaginationPageState {
+    static create(opts) {
+        return new PaginationPageState(opts, getPaginationRoot());
+    }
+    opts;
+    root;
+    attachment;
+    #isSelected = $derived.by(() => this.opts.page.value === this.root.opts.page);
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef((v) => (opts.ref = v));
+        this.onclick = this.onclick.bind(this);
+        this.onkeydown = this.onkeydown.bind(this);
+    }
+    onclick(e) {
+        if (this.opts.disabled)
+            return;
+        if (e.button !== 0)
+            return;
+        this.root.opts.page = this.opts.page.value;
+    }
+    onkeydown(e) {
+        if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
+            e.preventDefault();
+            this.root.opts.page = this.opts.page.value;
+        }
+        else {
+            this.root.rovingFocusGroup.handleKeydown(this.opts.ref, e);
+        }
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id,
+        'aria-label': `Page ${this.opts.page.value}`,
+        'data-value': `${this.opts.page.value}`,
+        'data-selected': this.#isSelected ? '' : undefined,
+        [paginationAttrs.page]: '',
+        //
+        onclick: this.onclick,
+        onkeydown: this.onkeydown,
+        ...this.attachment,
+    }));
+}
+export class PaginationButtonState {
+    static create(opts) {
+        return new PaginationButtonState(opts, getPaginationRoot());
+    }
+    opts;
+    root;
+    attachment;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef((v) => (opts.ref = v));
+        this.onclick = this.onclick.bind(this);
+        this.onkeydown = this.onkeydown.bind(this);
+    }
+    #action() {
+        this.opts.type === 'prev' ? this.root.prevPage() : this.root.nextPage();
+    }
+    #isDisabled = $derived.by(() => {
+        if (this.opts.disabled)
+            return true;
+        if (this.opts.type === 'prev')
+            return !this.root.hasPrevPage;
+        if (this.opts.type === 'next')
+            return !this.root.hasNextPage;
+        return false;
+    });
+    onclick(e) {
+        if (this.opts.disabled)
+            return;
+        if (e.button !== 0)
+            return;
+        this.#action();
+    }
+    onkeydown(e) {
+        if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
+            e.preventDefault();
+            this.#action();
+        }
+        else {
+            this.root.rovingFocusGroup.handleKeydown(this.opts.ref, e);
+        }
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id,
+        [paginationAttrs[this.opts.type]]: '',
+        disabled: this.#isDisabled,
+        //
+        onclick: this.onclick,
+        onkeydown: this.onkeydown,
+        ...this.attachment,
+    }));
+}
+/**
+ * Returns an array of page items used to render out the
+ * pagination page triggers.
+ *
+ * Credit: https://github.com/melt-ui/melt-ui
+ */
+function getPageItems({ page = 1, totalPages, siblingCount = 1 }) {
+    const pagesToShow = new Set([1, totalPages]);
+    const firstItemWithSiblings = 3 + siblingCount;
+    const lastItemWithSiblings = totalPages - 2 - siblingCount;
+    if (firstItemWithSiblings > lastItemWithSiblings) {
+        for (let i = 2; i <= totalPages - 1; i++) {
+            pagesToShow.add(i);
+        }
+    }
+    else if (page < firstItemWithSiblings) {
+        for (let i = 2; i <= Math.min(firstItemWithSiblings, totalPages); i++) {
+            pagesToShow.add(i);
+        }
+    }
+    else if (page > lastItemWithSiblings) {
+        for (let i = totalPages - 1; i >= Math.max(lastItemWithSiblings, 2); i--) {
+            pagesToShow.add(i);
+        }
+    }
+    else {
+        for (let i = Math.max(page - siblingCount, 2); i <= Math.min(page + siblingCount, totalPages); i++) {
+            pagesToShow.add(i);
+        }
+    }
+    // A gap directly after page 1 is the leading ellipsis; any other gap is the trailing one.
+    // These keys are stable across navigation, so the each-block reuses the ellipsis nodes.
+    function* emit() {
+        let lastNumber = 0;
+        for (const value of [...pagesToShow].sort((a, b) => a - b)) {
+            if (value - lastNumber > 1)
+                yield { type: 'ellipsis', key: lastNumber === 1 ? 'ellipsis-lead' : 'ellipsis-trail' };
+            yield { type: 'page', value, key: `page-${value}` };
+            lastNumber = value;
+        }
+    }
+    return [...emit()];
+}

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

@@ -0,0 +1,76 @@
+import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
+import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes } from "../../internal/attribute-types.js";
+type PaginationSnippetProps = {
+    pages: PageItem[];
+    range: {
+        start: number;
+        end: number;
+    };
+    currentPage: number;
+};
+export type PaginationRootPropsWithoutHTML = WithChild<{
+    /**
+     * The total number of items to be paginated.
+     */
+    count: number;
+    /**
+     * The number of items per page.
+     *
+     * @defaultValue 1
+     */
+    perPage?: number;
+    /**
+     * The number of visible items before and after the current page.
+     *
+     * @defaultValue 1
+     */
+    siblingCount?: number;
+    /**
+     * The current page number.
+     *
+     * @defaultValue 1
+     */
+    page?: number;
+    /**
+     * A callback function called when the page changes.
+     */
+    onPageChange?: OnChangeFn<number>;
+    /**
+     * Whether keyboard navigation should loop back to the
+     * first or last page trigger when reaching either end.
+     *
+     * @defaultValue false
+     */
+    loop?: boolean;
+    /**
+     * The orientation of the pagination component. Used to
+     * determine how keyboard navigation should work between
+     * pages.
+     *
+     * @defaultValue "horizontal"
+     */
+    orientation?: "horizontal" | "vertical";
+}, PaginationSnippetProps>;
+export type PaginationRootProps = PaginationRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, PaginationRootPropsWithoutHTML>;
+export type PaginationPagePropsWithoutHTML = WithChild<{
+    page: Page;
+}>;
+export type PaginationPageProps = PaginationPagePropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, PaginationPagePropsWithoutHTML>;
+export type PaginationPrevButtonPropsWithoutHTML = WithChild;
+export type PaginationPrevButtonProps = PaginationPrevButtonPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, PaginationPrevButtonPropsWithoutHTML>;
+export type PaginationNextButtonPropsWithoutHTML = WithChild;
+export type PaginationNextButtonProps = PaginationNextButtonPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, PaginationNextButtonPropsWithoutHTML>;
+export type Page = {
+    type: "page";
+    value: number;
+};
+export type Ellipsis = {
+    type: "ellipsis";
+};
+export type PageItem = (Page | Ellipsis) & {
+    /**
+     * A unique key to be used as the key in a svelte `#each` block.
+     */
+    key: string;
+};
+export {};

package/dist/components/pagination/types.js

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

package/dist/components/pin-input/components/pin-input-cell.svelte.d.ts

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

package/dist/components/pin-input/components/pin-input.svelte.d.ts

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

package/dist/components/pin-input/exports.d.ts

@@ -0,0 +1,3 @@
+export { default as Root } from "./components/pin-input.svelte";
+export { default as Cell } from "./components/pin-input-cell.svelte";
+export type { PinInputRootProps as RootProps, PinInputCellProps as CellProps } from "./types.js";

package/dist/components/pin-input/exports.js

@@ -0,0 +1,2 @@
+export { default as Root } from "./components/pin-input.svelte";
+export { default as Cell } from "./components/pin-input-cell.svelte";

package/dist/components/pin-input/index.js

@@ -0,0 +1,2 @@
+export * as PinInput from './exports.js';
+export * from './exports.js';