uisv 0.0.21 → 0.0.23

package/dist/components/toast.svelte

@@ -0,0 +1,173 @@
+<script module lang="ts">
+	import {
+		Button,
+		Icon,
+		Progress,
+		type ButtonProps,
+		type ProgressProps,
+		type ToastOptions,
+		useRafFn,
+	} from '../index.js';
+	import { boxWith } from 'svelte-toolbelt';
+	import { tv } from 'tailwind-variants';
+	import defu from 'defu';
+	import { onDestroy, onMount } from 'svelte';
+	import { getAppContext } from '../contexts.js';
+
+	export type ToastProps = ToastOptions & {
+		closeToast?: () => void;
+		expanded?: boolean;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		title,
+		description,
+		closeToast = () => {},
+		actions = [],
+		close = true,
+		color = 'primary',
+		duration = getAppContext().toaster.duration!,
+		icon,
+		progress = true,
+		orientation = 'vertical',
+		expanded = false,
+		ui = {},
+	}: ToastProps = $props();
+
+	let remaining = $state(boxWith(() => duration).current);
+
+	const { pause, resume } = useRafFn(({ delta }) => (remaining = remaining - delta));
+
+	const variants = $derived(
+		tv({
+			slots: {
+				base: 'overflow-hidden bg-surface-base shadow-lg rounded-lg border border-surface-accented space-y-4',
+				wrapper: 'm-4 flex gap-4',
+				title: 'text-sm font-medium text-labe-highlighted',
+				description: 'text-sm text-label-muted',
+				icon: 'shrink-0 size-5',
+				avatar: 'shrink-0',
+				avatarSize: '2xl',
+				actions: 'flex gap-1.5 shrink-0 m-4',
+				progress: '',
+				close: 'p-0',
+			},
+			variants: {
+				color: {
+					primary: {
+						base: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary',
+						icon: 'text-primary',
+					},
+					surface: {
+						base: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted',
+						icon: 'text-highlighted',
+					},
+					success: {
+						base: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-success',
+						icon: 'text-success',
+					},
+					info: {
+						base: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-info',
+						icon: 'text-info',
+					},
+					warning: {
+						base: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-warning',
+						icon: 'text-warning',
+					},
+					error: {
+						base: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error',
+						icon: 'text-error',
+					},
+				},
+				orientation: {
+					horizontal: {
+						base: 'items-center',
+						actions: 'items-center',
+					},
+					vertical: {
+						base: 'items-start',
+						actions: 'items-start mt-2.5',
+					},
+				},
+				title: {
+					true: {
+						description: 'mt-1',
+					},
+				},
+			},
+		})({ color, title: !!title, orientation }),
+	);
+
+	$effect(() => {
+		if (expanded) pause();
+		else resume();
+	});
+
+	onMount(resume);
+	onDestroy(pause);
+</script>
+
+<div class={variants.base({ class: ui.base })}>
+	<div class={variants.wrapper({ class: ui.wrapper })}>
+		<Icon name={icon} class={variants.icon({ class: ui.icon })} />
+
+		<div>
+			<h1 class={variants.title({ class: ui.title })}>
+				{title}
+			</h1>
+
+			{#if description}
+				<p class={variants.description({ class: ui.description })}>
+					{description}
+				</p>
+			{/if}
+		</div>
+
+		{#if orientation === 'horizontal'}
+			{@render actions_snippet()}
+		{/if}
+
+		{#if close}
+			<Button
+				{...defu(typeof close === 'boolean' ? {} : close, <ButtonProps>{
+					icon: getAppContext().icons.close,
+					color: 'surface',
+					variant: 'link',
+					onclick: closeToast,
+					ui: { base: variants.icon({ class: ui.icon }) },
+				})}
+			/>
+		{/if}
+	</div>
+
+	{#if orientation === 'vertical'}
+		{@render actions_snippet()}
+	{/if}
+
+	{#if progress}
+		<Progress
+			max={duration}
+			value={remaining}
+			{...defu(typeof progress === 'object' ? progress : {}, <ProgressProps>{
+				size: 'sm',
+				ui: { base: variants.progress({ class: ui.progress }) },
+			})}
+		/>
+	{/if}
+</div>
+
+{#snippet actions_snippet()}
+	{#if actions.length > 0}
+		<div class={variants.actions({ class: ui.actions })}>
+			{#each actions as action, idx (idx)}
+				<Button
+					{...defu(action, <ButtonProps>{
+						size: 'xs',
+					})}
+				/>
+			{/each}
+		</div>
+	{/if}
+{/snippet}

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

@@ -0,0 +1,8 @@
+import { type ToastOptions } from '../index.js';
+export type ToastProps = ToastOptions & {
+    closeToast?: () => void;
+    expanded?: boolean;
+};
+declare const Toast: import("svelte").Component<any, {}, "">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;

package/dist/components/toast.svelte.js

@@ -0,0 +1,11 @@
+import { toast as _toast } from 'svelte-sonner';
+import Toast from './toast.svelte';
+import {} from 'svelte';
+import {} from '../index.js';
+export function toast(opts) {
+    return _toast.custom(Toast, {
+        componentProps: opts,
+        id: opts.id,
+    });
+}
+export const useToasts = _toast.getActiveToasts;

package/dist/components/tooltip.svelte

@@ -0,0 +1,94 @@
+<script module lang="ts">
+	import type { TooltipContentProps, TooltipArrowProps, PortalProps } from 'bits-ui';
+	import { Tooltip } from 'bits-ui';
+	import { type KbdProps, type ButtonProps, isSnippet, Button, Kbd } from '../index.js';
+	import type { Snippet } from 'svelte';
+	import { fly } from 'svelte/transition';
+	import { tv, type ClassValue } from 'tailwind-variants';
+
+	export type TooltipProps = {
+		children?: Snippet;
+		open?: boolean;
+		kbds?: KbdProps['value'][] | KbdProps[];
+		trigger?: ButtonProps | Snippet<[Record<string, unknown>]>;
+		disabled?: boolean;
+		portal?: PortalProps;
+		content?: TooltipContentProps;
+		ui?: {
+			content?: ClassValue;
+			wrapper?: ClassValue;
+			kbds?: ClassValue;
+			arrow?: ClassValue;
+		};
+		arrow?: boolean | TooltipArrowProps;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		children,
+		open = $bindable(false),
+		kbds,
+		trigger,
+		disabled,
+		portal,
+		content,
+		ui = {},
+		arrow,
+		...rest
+	}: TooltipProps = $props();
+
+	const variants = $derived(
+		tv({
+			slots: {
+				content: '',
+				wrapper: '',
+				kbds: '',
+				kbdsize: '',
+				arrow: '',
+			},
+		})(),
+	);
+</script>
+
+<Tooltip.Root bind:open disabled={!(children || kbds?.length) || disabled}>
+	{#if !!trigger}
+		<Tooltip.Trigger {...rest}>
+			{#snippet child({ props })}
+				{#if isSnippet(trigger)}
+					{@render trigger(props)}
+				{:else}
+					<Button {...props} {...trigger} />
+				{/if}
+			{/snippet}
+		</Tooltip.Trigger>
+	{/if}
+
+	<Tooltip.Portal {...portal}>
+		<Tooltip.Content {...content} forceMount>
+			{#snippet child({ props, wrapperProps })}
+				<div {...wrapperProps} class={variants.wrapper({ class: [ui.wrapper] })}>
+					<div {...props} class={variants.content({ class: [ui.content] })} transition:fly>
+						{@render children?.()}
+
+						{#if kbds?.length}
+							<span class={variants.kbds({ class: ui.kbds })}>
+								{#each kbds as kbd, idx (idx)}
+									<Kbd {...typeof kbd === 'string' ? { value: kbd } : kbd} />
+								{/each}
+							</span>
+						{/if}
+					</div>
+				</div>
+			{/snippet}
+			children
+
+			{#if arrow}
+				<Tooltip.Arrow
+					{...typeof arrow === 'boolean' ? {} : arrow}
+					class={variants.arrow({ class: ui.arrow })}
+				/>
+			{/if}
+		</Tooltip.Content>
+	</Tooltip.Portal>
+</Tooltip.Root>

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

@@ -0,0 +1,24 @@
+import type { TooltipContentProps, TooltipArrowProps, PortalProps } from 'bits-ui';
+import { Tooltip } from 'bits-ui';
+import { type KbdProps, type ButtonProps } from '../index.js';
+import type { Snippet } from 'svelte';
+import { type ClassValue } from 'tailwind-variants';
+export type TooltipProps = {
+    children?: Snippet;
+    open?: boolean;
+    kbds?: KbdProps['value'][] | KbdProps[];
+    trigger?: ButtonProps | Snippet<[Record<string, unknown>]>;
+    disabled?: boolean;
+    portal?: PortalProps;
+    content?: TooltipContentProps;
+    ui?: {
+        content?: ClassValue;
+        wrapper?: ClassValue;
+        kbds?: ClassValue;
+        arrow?: ClassValue;
+    };
+    arrow?: boolean | TooltipArrowProps;
+};
+declare const Tooltip: import("svelte").Component<TooltipProps, {}, "open">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/contexts.d.ts

@@ -0,0 +1,54 @@
+import type { ToasterProps } from 'svelte-sonner';
+import type { ModeWatcherProps } from './mode.js';
+import type { TooltipProviderProps } from 'bits-ui';
+export declare const DEFAULT_ICONS: {
+    arrowdown: string;
+    arrowleft: string;
+    arrowright: string;
+    arrowup: string;
+    caution: string;
+    check: string;
+    chevrondoubleleft: string;
+    chevrondoubleright: string;
+    chevrondown: string;
+    chevronleft: string;
+    chevronright: string;
+    chevronup: string;
+    close: string;
+    copy: string;
+    copycheck: string;
+    dark: string;
+    drag: string;
+    ellipsis: string;
+    error: string;
+    external: string;
+    eye: string;
+    eyeoff: string;
+    file: string;
+    folder: string;
+    folderopen: string;
+    hash: string;
+    info: string;
+    light: string;
+    loading: string;
+    menu: string;
+    minus: string;
+    panelclose: string;
+    panelopen: string;
+    plus: string;
+    reload: string;
+    search: string;
+    stop: string;
+    success: string;
+    system: string;
+    tip: string;
+    upload: string;
+    warning: string;
+};
+export type AppContext = {
+    icons: Partial<typeof DEFAULT_ICONS>;
+    toaster: Partial<ToasterProps>;
+    modewatcher: ModeWatcherProps;
+    tooltip: TooltipProviderProps;
+};
+export declare const getAppContext: () => AppContext, setAppContext: (context: AppContext) => AppContext;

package/dist/contexts.js

@@ -0,0 +1,46 @@
+import { createContext } from 'svelte';
+export const DEFAULT_ICONS = {
+    arrowdown: 'i-lucide:arrow-down',
+    arrowleft: 'i-lucide:arrow-left',
+    arrowright: 'i-lucide:arrow-right',
+    arrowup: 'i-lucide:arrow-up',
+    caution: 'i-lucide:circle-alert',
+    check: 'i-lucide:check',
+    chevrondoubleleft: 'i-lucide:chevron-double-left',
+    chevrondoubleright: 'i-lucide:chevron-double-right',
+    chevrondown: 'i-lucide:chevron-down',
+    chevronleft: 'i-lucide:chevron-left',
+    chevronright: 'i-lucide:chevron-right',
+    chevronup: 'i-lucide:chevron-up',
+    close: 'i-lucide:x',
+    copy: 'i-lucide:copy',
+    copycheck: 'i-lucide:circle-check',
+    dark: 'i-lucide:moon',
+    drag: 'i-lucide:grip-vertical',
+    ellipsis: 'i-lucide:ellipsis',
+    error: 'i-lucide:circle-x',
+    external: 'i-lucide:arrow-up-right',
+    eye: 'i-lucide:eye',
+    eyeoff: 'i-lucide:eye-slash',
+    file: 'i-lucide:file',
+    folder: 'i-lucide:folder',
+    folderopen: 'i-lucide:folder-open',
+    hash: 'i-lucide:hash',
+    info: 'i-lucide:info',
+    light: 'i-lucide:sun',
+    loading: 'i-lucide:loader-circle',
+    menu: 'i-lucide:list',
+    minus: 'i-lucide:minus',
+    panelclose: 'i-lucide:caret-left',
+    panelopen: 'i-lucide:caret-right',
+    plus: 'i-lucide:plus',
+    reload: 'i-lucide:arrow-counter-clockwise',
+    search: 'i-lucide:magnifying-glass',
+    stop: 'i-lucide:square',
+    success: 'i-lucide:check-circle',
+    system: 'i-lucide:monitor',
+    tip: 'i-lucide:lightbulb',
+    upload: 'i-lucide:upload',
+    warning: 'i-lucide:warning',
+};
+export const [getAppContext, setAppContext] = createContext();

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export * from './components/index.js';
-export * from './utilities.svelte.js';
+export * from './utilities/index.js';
 export * from './types.js';
 export { ModeWatcher } from 'mode-watcher';

package/dist/index.js

@@ -1,4 +1,4 @@
 export * from './components/index.js';
-export * from './utilities.svelte.js';
+export * from './utilities/index.js';
 export * from './types.js';
 export { ModeWatcher } from 'mode-watcher';

package/dist/mode.d.ts

@@ -1 +1,90 @@
+import { setMode } from 'mode-watcher';
+export type Mode = Parameters<typeof setMode>['0'];
+export type ThemeColors = {
+    dark: string;
+    light: string;
+} | undefined;
+export type ModeWatcherProps = {
+    /**
+     * Whether to automatically track operating system preferences
+     * and update the mode accordingly.
+     *
+     * @default `true`
+     */
+    track?: boolean;
+    /**
+     * The default mode to use instead of the user's preference.
+     *
+     * @default `"system"`
+     */
+    defaultMode?: Mode;
+    /**
+     * The default theme to use, which will be applied to the root `html` element
+     * and can be managed with the `setTheme` function.
+     *
+     * @example
+     * ```html
+     * <html data-theme="your-custom-theme"></html>
+     * ```
+     *
+     * @default `undefined`
+     */
+    defaultTheme?: string;
+    /**
+     * The theme colors to use for each mode.
+     */
+    themeColors?: ThemeColors;
+    /**
+     * Whether to disable transitions when updating the mode.
+     */
+    disableTransitions?: boolean;
+    /**
+     * The classname to add to the root `html` element when the mode is dark.
+     *
+     * @default `["dark"]`
+     */
+    darkClassNames?: string[];
+    /**
+     * The classname to add to the root `html` element when the mode is light.
+     *
+     * @default `[]`
+     */
+    lightClassNames?: string[];
+    /**
+     * Optionally provide a custom local storage key to use for storing the mode.
+     *
+     * @default `'mode-watcher-mode'`
+     */
+    modeStorageKey?: string;
+    /**
+     * Optionally provide a custom local storage key to use for storing the theme.
+     *
+     * @default `'mode-watcher-theme'`
+     */
+    themeStorageKey?: string;
+    /**
+     * An optional nonce to use for the injected script tag to allow-list mode-watcher
+     * if you are using a Content Security Policy.
+     *
+     * @default `undefined`
+     */
+    nonce?: string;
+    /**
+     * Whether to disable the injected script tag that sets the initial mode.
+     * Set this if you are manually injecting the script using a hook.
+     *
+     * @default `false`
+     */
+    disableHeadScriptInjection?: boolean;
+    /**
+     * Whether to run the mode changes synchronously instead of using
+     * an animation frame. If true, will have an impact on blocking performance
+     * due to blocking the main thread.
+     *
+     * Only applicable if `disableTransitions` is set to `true`.
+     *
+     * @default `false`
+     */
+    synchronousModeChanges?: boolean;
+};
 export * from 'mode-watcher';

package/dist/mode.js

@@ -1 +1,2 @@
+import { setMode } from 'mode-watcher';
 export * from 'mode-watcher';

package/dist/utilities/index.d.ts

@@ -0,0 +1,5 @@
+export * from './isComponent.js';
+export * from './isSnippet.js';
+export * from './useElementRects.svelte.js';
+export * from './useRafFn.svelte.js';
+export * from './useStyle.svelte.js';

package/dist/utilities/index.js

@@ -0,0 +1,5 @@
+export * from './isComponent.js';
+export * from './isSnippet.js';
+export * from './useElementRects.svelte.js';
+export * from './useRafFn.svelte.js';
+export * from './useStyle.svelte.js';

package/dist/utilities/isComponent.d.ts

@@ -0,0 +1,7 @@
+import type { Component } from 'svelte';
+/**
+ * Checks if a value is a Svelte component
+ * @param v - The value to check
+ * @returns true if the value is a component, false otherwise
+ */
+export declare function isComponent(v: unknown): v is Component;

package/dist/utilities/isComponent.js

@@ -0,0 +1,10 @@
+/**
+ * Checks if a value is a Svelte component
+ * @param v - The value to check
+ * @returns true if the value is a component, false otherwise
+ */
+export function isComponent(v) {
+    if (typeof document !== 'undefined')
+        return typeof v === 'function';
+    return typeof v === 'function' && 'render' in v;
+}

package/dist/utilities/isSnippet.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+/**
+ * Checks if a value is a Svelte snippet
+ * @param v - The value to check
+ * @returns true if the value is a snippet, false otherwise
+ */
+export declare function isSnippet<T>(v: unknown): v is Snippet<[T]>;

package/dist/utilities/isSnippet.js

@@ -0,0 +1,8 @@
+/**
+ * Checks if a value is a Svelte snippet
+ * @param v - The value to check
+ * @returns true if the value is a snippet, false otherwise
+ */
+export function isSnippet(v) {
+    return typeof v === 'function' && !('render' in v);
+}

package/dist/utilities/useElementRects.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type ElementSizeOptions, type MaybeGetter } from 'runed';
+/**
+ * Returns a reactive value holding the dom rect of `node`s.
+ *
+ * Accepts an `options` object with the following properties:
+ * - `initialSize`: The initial size of the element. Defaults to `{ width: 0, height: 0 }`.
+ * - `box`: The box model to use. Can be either `"content-box"` or `"border-box"`. Defaults to `"border-box"`.
+ *
+ * @returns an array of dom rects.
+ */
+export declare function useElementRects(nodes: MaybeGetter<HTMLElement[]>, options?: ElementSizeOptions): DOMRect[];

package/dist/{utilities.svelte.js → utilities/useElementRects.svelte.js}

@@ -1,22 +1,4 @@
 import { extract, useMutationObserver, useResizeObserver, } from 'runed';
-/**
- * Checks if a value is a Svelte component
- * @param v - The value to check
- * @returns true if the value is a component, false otherwise
- */
-export function isComponent(v) {
-    if (typeof document !== 'undefined')
-        return typeof v === 'function';
-    return typeof v === 'function' && 'render' in v;
-}
-/**
- * Checks if a value is a Svelte snippet
- * @param v - The value to check
- * @returns true if the value is a snippet, false otherwise
- */
-export function isSnippet(v) {
-    return typeof v === 'function' && !('render' in v);
-}
 /**
  * Returns a reactive value holding the dom rect of `node`s.
  *
@@ -47,23 +29,3 @@ export function useElementRects(nodes, options = {}) {
     });
     return rects;
 }
-let uisv_usestyle_id = 0;
-/**
- * Inject reactive style element in head.
- * @param css string
- */
-export function useStyle(css) {
-    const id = `uisv_styletag_${++uisv_usestyle_id}`;
-    let el = $state();
-    $effect(() => {
-        if (!el) {
-            el = (document.getElementById(id) || document.createElement('style'));
-            if (!el.isConnected) {
-                el.id = id;
-                document.head.appendChild(el);
-            }
-        }
-        el.textContent = extract(css);
-    });
-    return { id };
-}

package/dist/utilities/useRafFn.svelte.d.ts

@@ -0,0 +1,43 @@
+export interface UseRafFnCallbackArguments {
+    /**
+     * Time elapsed between this and the last frame.
+     */
+    delta: number;
+    /**
+     * Time elapsed since the creation of the web page. See {@link https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp#the_time_origin Time origin}.
+     */
+    timestamp: DOMHighResTimeStamp;
+}
+export interface UseRafFnOptions {
+    /**
+     * Start the requestAnimationFrame loop immediately on creation
+     *
+     * @default true
+     */
+    immediate?: boolean;
+    /**
+     * The maximum frame per second to execute the function.
+     * Set to `-1` to disable the limit.
+     *
+     * @default -1
+     */
+    fpslimit?: number;
+    /**
+     * After the requestAnimationFrame loop executed once, it will be automatically stopped.
+     *
+     * @default false
+     */
+    once?: boolean;
+}
+/**
+ * Call function on every `requestAnimationFrame`. With controls of pausing and resuming.
+ *
+ * @see https://vueuse.org/useRafFn
+ * @param fn
+ * @param options
+ */
+export declare function useRafFn(fn: (args: UseRafFnCallbackArguments) => void, options?: UseRafFnOptions): {
+    is_active: boolean;
+    pause: () => void;
+    resume: () => void;
+};