sheer-ui 0.4.3 → 0.5.0

package/dist/components/sonner/toast-state.svelte.js

@@ -0,0 +1,164 @@
+import { BROWSER } from 'esm-env';
+import { untrack } from 'svelte';
+let toastsCounter = 0;
+class ToastState {
+    toasts = $state([]);
+    heights = $state([]);
+    #findToastIdx = (id) => {
+        const idx = this.toasts.findIndex((toast) => toast.id === id);
+        if (idx === -1)
+            return null;
+        return idx;
+    };
+    activeToasts = $derived.by(() => this.toasts.filter((toast) => !toast.dismiss));
+    addToast = (data) => {
+        if (!BROWSER)
+            return;
+        this.toasts.unshift(data);
+    };
+    updateToast = ({ id, data, type, message, dismissible }) => {
+        const toastIdx = this.#findToastIdx(id);
+        if (toastIdx === null)
+            return;
+        this.toasts[toastIdx] = {
+            ...this.toasts[toastIdx],
+            ...data,
+            id,
+            title: message,
+            type,
+            dismissible,
+            updated: true,
+        };
+    };
+    create = (data) => {
+        const { message, ...rest } = data;
+        const id = typeof data.id === 'number' || (data.id && data.id.length > 0) ? data.id : toastsCounter++;
+        const dismissible = data.dismissible ?? true;
+        const type = data.type ?? 'default';
+        untrack(() => {
+            const alreadyExists = this.#findToastIdx(id) !== null;
+            if (alreadyExists) {
+                this.updateToast({ id, data, type, message, dismissible });
+                return;
+            }
+            this.addToast({ ...rest, id, title: message, dismissible, type });
+        });
+        return id;
+    };
+    dismiss = (id) => {
+        untrack(() => {
+            if (id === undefined) {
+                this.toasts = this.toasts.map((toast) => ({ ...toast, dismiss: true }));
+                return;
+            }
+            const toastIdx = this.#findToastIdx(id);
+            if (toastIdx === null)
+                return;
+            const toast = this.toasts[toastIdx];
+            if (!toast)
+                return;
+            this.toasts[toastIdx] = {
+                ...toast,
+                dismiss: true,
+            };
+        });
+        return id;
+    };
+    remove = (id) => {
+        if (id === undefined) {
+            // remove all toasts
+            this.toasts = [];
+            return;
+        }
+        // remove a specific toast
+        const toastIdx = this.#findToastIdx(id);
+        if (toastIdx === null)
+            return;
+        this.toasts.splice(toastIdx, 1);
+        return id;
+    };
+    promise = (promise, data) => {
+        if (!data) {
+            // Nothing to show
+            return;
+        }
+        let id = undefined;
+        if (data.loading !== undefined) {
+            id = this.create({
+                ...data,
+                promise,
+                type: 'loading',
+                message: typeof data.loading === 'string' ? data.loading : data.loading(),
+            });
+        }
+        const p = promise instanceof Promise ? promise : promise();
+        let shouldDismiss = id !== undefined;
+        p.then((response) => {
+            if (typeof response === 'object' && response && 'ok' in response && typeof response.ok === 'boolean' && !response.ok) {
+                shouldDismiss = false;
+                const message = constructPromiseErrorMessage(response);
+                this.create({ id, type: 'error', message });
+            }
+            else if (data.success !== undefined) {
+                shouldDismiss = false;
+                const message = typeof data.success === 'function' ? data.success(response) : data.success;
+                this.create({ id, type: 'success', message });
+            }
+        }, (error) => {
+            if (data.error !== undefined) {
+                shouldDismiss = false;
+                const message = typeof data.error === 'function' ? data.error(error) : data.error;
+                this.create({ id, type: 'error', message });
+            }
+        }).finally(() => {
+            if (shouldDismiss) {
+                // Toast is still in load state (and will be indefinitely — dismiss it)
+                this.dismiss(id);
+                id = undefined;
+            }
+            data.finally?.();
+        });
+        return id;
+    };
+    custom = (component, data) => {
+        const id = data?.id || toastsCounter++;
+        this.create({ component, id, ...data });
+        return id;
+    };
+    removeHeight = (id) => {
+        this.heights = this.heights.filter((height) => height.toastId !== id);
+    };
+    setHeight = (data) => {
+        const idx = this.heights.findIndex((height) => height.toastId === data.toastId);
+        // New heights go to the front, mirroring addToast's unshift so both arrays share the visual order.
+        if (idx === -1) {
+            this.heights.unshift(data);
+            return;
+        }
+        this.heights[idx] = data;
+    };
+    reset = () => {
+        this.toasts = [];
+        this.heights = [];
+    };
+}
+const hasStatus = (value) => value !== null && typeof value === 'object' && 'status' in value;
+const constructPromiseErrorMessage = (error) => hasStatus(error) ? `HTTP error! Status: ${error.status}` : `Error! ${String(error)}`;
+export const toastState = new ToastState();
+const basicToast = (message, data) => toastState.create({
+    message,
+    ...data,
+});
+const createTypedToast = (type) => (message, data) => toastState.create({ ...data, type, message });
+export const toast = Object.assign(basicToast, {
+    success: createTypedToast('success'),
+    info: createTypedToast('info'),
+    warning: createTypedToast('warning'),
+    error: createTypedToast('error'),
+    loading: createTypedToast('loading'),
+    message: createTypedToast('default'),
+    custom: toastState.custom,
+    promise: toastState.promise,
+    dismiss: toastState.dismiss,
+    getActiveToasts: () => toastState.activeToasts,
+});

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

@@ -0,0 +1,326 @@
+import type { Component, ComponentProps, Snippet } from 'svelte';
+import type { ClassValue, HTMLAttributes, HTMLOlAttributes, MouseEventHandler } from 'svelte/elements';
+export type FixMe = unknown;
+type Expand<T> = T extends object ? (T extends infer O ? {
+    [K in keyof O]: O[K];
+} : never) : T;
+export type AnyComponent = Component<any, any, string>;
+export type ToastTypes = 'normal' | 'action' | 'success' | 'info' | 'warning' | 'error' | 'loading' | 'default';
+export type PromiseT<Data = unknown> = Promise<Data> | (() => Promise<Data>);
+export type PromiseData<ToastData = unknown> = ExternalToast & {
+    /**
+     * The loading message or a function that returns the message or
+     * a custom toast component.
+     */
+    loading?: string | (() => AnyComponent | string);
+    /**
+     * The success message or a function that returns the message or
+     * a custom toast component.
+     */
+    success?: string | ((data: ToastData) => AnyComponent | string);
+    /**
+     * The error message or a function that returns the message or
+     * a custom toast component.
+     */
+    error?: string | ((error: unknown) => AnyComponent | string);
+    /**
+     * A function that is called when the promise is finally resolved or rejected.
+     */
+    finally?: () => void | Promise<void>;
+};
+export type ToastAction = {
+    label: string | AnyComponent;
+    onClick: MouseEventHandler<HTMLButtonElement>;
+    actionButtonStyle?: string;
+};
+export declare const isAction: (action: ToastAction | AnyComponent | undefined) => action is ToastAction;
+export type ToastT<T extends AnyComponent = AnyComponent> = {
+    id: number | string;
+    title?: string | AnyComponent;
+    type: ToastTypes;
+    icon?: AnyComponent | null;
+    component?: AnyComponent;
+    componentProps?: ComponentProps<T>;
+    richColors?: boolean;
+    invert?: boolean;
+    closeButton?: boolean;
+    dismissible?: boolean;
+    /**
+     * @deprecated Use `dismissible` instead.
+     */
+    dismissable?: boolean;
+    important?: boolean;
+    description?: string | AnyComponent;
+    duration?: number;
+    action?: ToastAction | AnyComponent;
+    cancel?: ToastAction | AnyComponent;
+    onDismiss?: (toast: ToastT) => void;
+    onAutoClose?: (toast: ToastT) => void;
+    promise?: PromiseT;
+    cancelButtonStyle?: string;
+    actionButtonStyle?: string;
+    style?: string;
+    unstyled?: boolean;
+    class?: ClassValue;
+    classes?: ToastClasses;
+    descriptionClass?: ClassValue;
+    position?: Position;
+    dismiss?: boolean;
+    /**
+     * @internal This is used to determine if the toast has been updated to determine when to reset timer. Hacky but works.
+     */
+    updated?: boolean;
+};
+export type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center';
+export type HeightT = {
+    height: number;
+    toastId: number | string;
+};
+export type Theme = 'light' | 'dark';
+export type ToastToDismiss = {
+    id: number | string;
+    dismiss: boolean;
+};
+export type ExternalToast<T extends AnyComponent = AnyComponent> = Omit<ToastT<T>, 'id' | 'type' | 'title' | 'promise' | 'updated'> & {
+    id?: number | string;
+};
+type Offset = {
+    top?: string | number;
+    right?: string | number;
+    bottom?: string | number;
+    left?: string | number;
+} | string | number;
+export type ToastIcon = Snippet | null;
+type ToastIcons = {
+    /**
+     * The icon to use for the success toast,
+     * can be either a snippet, a component, or `null` to not render an icon.
+     */
+    successIcon?: ToastIcon;
+    /**
+     * The icon to use for the info toast,
+     * can be either a snippet, a component, or `null` to not render an icon.
+     */
+    infoIcon?: ToastIcon;
+    /**
+     * The icon to use for the warning toast,
+     * can be either a snippet, a component, or `null` to not render an icon.
+     */
+    warningIcon?: ToastIcon;
+    /**
+     * The icon to use for the error toast,
+     * can be either a snippet, a component, or `null` to not render an icon.
+     */
+    errorIcon?: ToastIcon;
+    /**
+     * The icon to use for the loading toast,
+     * can be either a snippet, a component, or `null` to not render an icon.
+     */
+    loadingIcon?: ToastIcon;
+    /**
+     * The icon to use for the close button,
+     * can be either a snippet, a component, or `null` to not render an icon.
+     */
+    closeIcon?: ToastIcon;
+};
+export type ToasterProps = {
+    /**
+     * Dark toasts in light mode and vice versa.
+     *
+     * @default false
+     */
+    invert?: boolean;
+    /**
+     * Toast's theme, either light, dark, or system.
+     *
+     * If using [mode-watcher](https://mode-watcher.sveco.dev), you can set this to the
+     * `userPrefersMode.current` to automatically switch themes based on those preferences.
+     *
+     * @default 'light'
+     */
+    theme?: 'light' | 'dark' | 'system';
+    /**
+     * Place where the toasts will be rendered
+     *
+     * @default 'bottom-right'
+     */
+    position?: Position;
+    /**
+     * Keyboard shortcut that will move focus to the toaster area.
+     *
+     * @default '⌥/alt + T'
+     */
+    hotkey?: string[];
+    /**
+     * Makes error and success state more colorful
+     *
+     * @default false
+     */
+    richColors?: boolean;
+    /**
+     * Toasts will be expanded by default
+     *
+     * @default false
+     */
+    expand?: boolean;
+    /**
+     * The duration of the toast in milliseconds.
+     *
+     * @default 4000
+     */
+    duration?: number;
+    /**
+     * Gap between toasts when expanded, in pixels.
+     *
+     * @default '14px'
+     */
+    gap?: number;
+    /**
+     * Amount of visible toasts
+     *
+     * @default 3
+     */
+    visibleToasts?: number;
+    /**
+     * Adds a close button to all toasts, shows on hover
+     *
+     * @default false
+     */
+    closeButton?: boolean;
+    /**
+     * These will act as default options for all toasts.
+     *
+     * @default {}
+     */
+    toastOptions?: ToastOptions;
+    /**
+     * Offset from the edges of the screen.
+     *
+     * @default '32px'
+     */
+    offset?: Offset;
+    /**
+     * Offset from the edges of the screen for mobile devices.
+     *
+     * @default '16px'
+     */
+    mobileOffset?: Offset;
+    /**
+     * Pause the toast timer when the page is hidden, e.g. when the user switches
+     * tabs. Toasts will not expire while the page is hidden.
+     *
+     * @default false
+     */
+    pauseWhenPageIsHidden?: boolean;
+    /**
+     * Directionality of toast's text
+     *
+     * @default 'auto'
+     */
+    dir?: 'ltr' | 'rtl' | 'auto';
+    /**
+     * The directions in which the toast can be swiped.
+     *
+     * @default ['top', 'right', 'bottom', 'left']
+     */
+    swipeDirections?: SwipeDirection[];
+    /**
+     * The aria-label to use for the container element, which will
+     * be combined with the hotkey, if provided like so:
+     *
+     * ```svelte
+     * <section aria-label="{containerAriaLabel} {hotkeyLabel}"
+     * </section>
+     * ```
+     *
+     * @default 'Notifications'
+     */
+    containerAriaLabel?: string;
+    /**
+     * The aria label for the close button.
+     *
+     * @default 'Close toast'
+     */
+    closeButtonAriaLabel?: string;
+} & HTMLOlAttributes;
+export type ToastOptions = {
+    /**
+     * The classes applied to the toast element.
+     */
+    class?: ClassValue;
+    /**
+     * The classes applied to the toast description element.
+     */
+    descriptionClass?: ClassValue;
+    /**
+     * The CSS styles applied to the toast element.
+     */
+    style?: string;
+    /**
+     * The CSS styles applied to the cancel button element.
+     */
+    cancelButtonStyle?: string;
+    /**
+     * The CSS styles applied to the action button element.
+     */
+    actionButtonStyle?: string;
+    /**
+     * The duration of the toast in milliseconds.
+     */
+    duration?: number;
+    /**
+     * Whether the toast should be unstyled or not.
+     */
+    unstyled?: boolean;
+    /**
+     * Classes to apply to the various elements of the toast.
+     */
+    classes?: Expand<ToastClasses>;
+    /**
+     * The aria label for the close button.
+     */
+    closeButtonAriaLabel?: string;
+    /**
+     * Whether to show the close button.
+     */
+    closeButton?: boolean;
+};
+/**
+ * The classes applied to the various elements of the toast.
+ */
+export type ToastClasses = {
+    toast?: ClassValue;
+    title?: ClassValue;
+    description?: ClassValue;
+    loader?: ClassValue;
+    closeButton?: ClassValue;
+    cancelButton?: ClassValue;
+    actionButton?: ClassValue;
+    icon?: ClassValue;
+    content?: ClassValue;
+} & ToastTypeClasses;
+type ToastTypeClasses = Partial<Record<ToastTypes, ClassValue>>;
+export type SwipeDirection = 'top' | 'right' | 'bottom' | 'left';
+export type ToastProps = {
+    toast: ToastT;
+    index: number;
+    swipeDirections?: SwipeDirection[];
+    expanded: boolean;
+    invert: boolean;
+    position: Position;
+    visibleToasts: number;
+    expandByDefault: boolean;
+    closeButton: boolean;
+    interacting: boolean;
+    cancelButtonStyle: string;
+    actionButtonStyle: string;
+    duration: number;
+    class: ClassValue;
+    descriptionClass: ClassValue;
+    classes: ToastClasses;
+    unstyled: boolean;
+    closeButtonAriaLabel: string;
+    defaultRichColors: boolean;
+    pauseWhenPageIsHidden: boolean;
+} & HTMLAttributes<HTMLLIElement> & ToastIcons;
+export {};

package/dist/components/sonner/types.js

@@ -0,0 +1 @@
+export const isAction = (action) => action.label !== undefined;

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

@@ -0,0 +1,3 @@
+import Root from './switch.svelte';
+export type { SwitchProps } from './switch.svelte';
+export { Root, Root as Switch, };

package/dist/components/switch/index.js

@@ -0,0 +1,4 @@
+import Root from './switch.svelte';
+export { Root, 
+//
+Root as Switch, };

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

@@ -0,0 +1,15 @@
+import type { ClassValue, HTMLAttributes } from 'svelte/elements';
+export type SwitchProps = Omit<HTMLAttributes<HTMLSpanElement>, 'class'> & {
+    ref?: HTMLInputElement | null;
+    id?: string;
+    class?: ClassValue | null;
+    checked?: boolean;
+    disabled?: boolean | null;
+    required?: boolean;
+    name?: string;
+    value?: string;
+    onCheckedChange?: (checked: boolean) => void;
+};
+declare const Switch: import("svelte").Component<SwitchProps, {}, "ref" | "checked">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

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

@@ -0,0 +1,9 @@
+import Root from './table.svelte';
+import Body from './table-body.svelte';
+import Caption from './table-caption.svelte';
+import Cell from './table-cell.svelte';
+import Footer from './table-footer.svelte';
+import Head from './table-head.svelte';
+import Header from './table-header.svelte';
+import Row from './table-row.svelte';
+export { Root, Body, Caption, Cell, Footer, Head, Header, Row, Root as Table, Body as TableBody, Caption as TableCaption, Cell as TableCell, Footer as TableFooter, Head as TableHead, Header as TableHeader, Row as TableRow, };

package/dist/components/table/index.js

@@ -0,0 +1,11 @@
+import Root from './table.svelte';
+import Body from './table-body.svelte';
+import Caption from './table-caption.svelte';
+import Cell from './table-cell.svelte';
+import Footer from './table-footer.svelte';
+import Head from './table-head.svelte';
+import Header from './table-header.svelte';
+import Row from './table-row.svelte';
+export { Root, Body, Caption, Cell, Footer, Head, Header, Row, 
+//
+Root as Table, Body as TableBody, Caption as TableCaption, Cell as TableCell, Footer as TableFooter, Head as TableHead, Header as TableHeader, Row as TableRow, };

package/dist/components/table/table-body.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { WithElementRef } from '../../internal/utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const TableBody: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLTableSectionElement>>, {}, "ref">;
+type TableBody = ReturnType<typeof TableBody>;
+export default TableBody;

package/dist/components/table/table-caption.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { WithElementRef } from '../../internal/utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const TableCaption: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLElement>>, {}, "ref">;
+type TableCaption = ReturnType<typeof TableCaption>;
+export default TableCaption;

package/dist/components/table/table-cell.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { WithElementRef } from '../../internal/utils.js';
+import type { HTMLTdAttributes } from 'svelte/elements';
+declare const TableCell: import("svelte").Component<WithElementRef<HTMLTdAttributes>, {}, "ref">;
+type TableCell = ReturnType<typeof TableCell>;
+export default TableCell;

package/dist/components/table/table-footer.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { WithElementRef } from '../../internal/utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const TableFooter: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLTableSectionElement>>, {}, "ref">;
+type TableFooter = ReturnType<typeof TableFooter>;
+export default TableFooter;

package/dist/components/table/table-head.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { WithElementRef } from '../../internal/utils.js';
+import type { HTMLThAttributes } from 'svelte/elements';
+declare const TableHead: import("svelte").Component<WithElementRef<HTMLThAttributes>, {}, "ref">;
+type TableHead = ReturnType<typeof TableHead>;
+export default TableHead;

package/dist/components/table/table-header.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { WithElementRef } from '../../internal/utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const TableHeader: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLTableSectionElement>>, {}, "ref">;
+type TableHeader = ReturnType<typeof TableHeader>;
+export default TableHeader;

package/dist/components/table/table-row.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { WithElementRef } from '../../internal/utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const TableRow: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLTableRowElement>>, {}, "ref">;
+type TableRow = ReturnType<typeof TableRow>;
+export default TableRow;

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

@@ -0,0 +1,5 @@
+import type { HTMLTableAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../internal/utils.js';
+declare const Table: import("svelte").Component<WithElementRef<HTMLTableAttributes>, {}, "ref">;
+type Table = ReturnType<typeof Table>;
+export default Table;

package/dist/components/tabs/components/tabs-content.svelte.d.ts

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

package/dist/components/tabs/components/tabs-list.svelte.d.ts

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

package/dist/components/tabs/components/tabs-trigger.svelte.d.ts

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

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

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

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

@@ -0,0 +1,5 @@
+export { default as Root } from './components/tabs.svelte';
+export { default as Content } from './components/tabs-content.svelte';
+export { default as List } from './components/tabs-list.svelte';
+export { default as Trigger } from './components/tabs-trigger.svelte';
+export type { TabsRootProps as RootProps, TabsContentProps as ContentProps, TabsTriggerProps as TriggerProps, TabsListProps as ListProps, } from './types.js';

package/dist/components/tabs/index.js

@@ -0,0 +1,4 @@
+export { default as Root } from './components/tabs.svelte';
+export { default as Content } from './components/tabs-content.svelte';
+export { default as List } from './components/tabs-list.svelte';
+export { default as Trigger } from './components/tabs-trigger.svelte';