compote-ui 0.58.1 → 0.58.3

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

@@ -1,4 +1,5 @@
 export { default as Toaster } from './toaster.svelte';
 export { toast } from './toast.js';
+export type { ToastOptions, ToastType } from './toast.js';
 export { createToaster } from '@ark-ui/svelte/toast';
 export type { CreateToasterReturn } from '@ark-ui/svelte/toast';

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

@@ -1 +1,10 @@
-export declare const toast: import("@zag-js/toast").Store<any>;
+import type { CreateToasterReturn } from '@ark-ui/svelte/toast';
+export type ToastOptions = Parameters<CreateToasterReturn['create']>[0];
+export type ToastType = NonNullable<ToastOptions['type']>;
+export declare const toast: import("@zag-js/toast").Store<any> & {
+    info: (title: string | ToastOptions, options?: Omit<ToastOptions, "type">) => string;
+    success: (title: string | ToastOptions, options?: Omit<ToastOptions, "type">) => string;
+    warning: (title: string | ToastOptions, options?: Omit<ToastOptions, "type">) => string;
+    error: (title: string | ToastOptions, options?: Omit<ToastOptions, "type">) => string;
+    loading: (title: string | ToastOptions, options?: Omit<ToastOptions, "type">) => string;
+};

package/dist/components/toast/toast.js

@@ -1,2 +1,14 @@
 import { createToaster } from '@ark-ui/svelte/toast';
-export const toast = createToaster({ placement: 'bottom-end' });
+const toaster = createToaster({ placement: 'bottom-end', pauseOnPageIdle: true });
+function shorthand(type) {
+    return (title, options) => typeof title === 'string'
+        ? toaster.create({ ...options, title, type })
+        : toaster.create({ ...title, type });
+}
+export const toast = Object.assign(toaster, {
+    info: shorthand('info'),
+    success: shorthand('success'),
+    warning: shorthand('warning'),
+    error: shorthand('error'),
+    loading: shorthand('loading')
+});

package/dist/components/toast/toaster.svelte

@@ -1,43 +1,72 @@
 <script lang="ts">
 	import { Toast, Toaster } from '@ark-ui/svelte/toast';
+	import type { CreateToasterReturn } from '@ark-ui/svelte/toast';
 	import { Portal } from '@ark-ui/svelte/portal';
 	import { cn } from 'tailwind-variants';
 	import type { ClassValue } from 'tailwind-variants';
 	import { toast } from './toast.js';
 	import PhX from '../../icons/PhX.svelte';
+	import PhCheckCircle from '../../icons/PhCheckCircle.svelte';
+	import PhXCircle from '../../icons/PhXCircle.svelte';
+	import PhWarning from '../../icons/PhWarning.svelte';
+	import PhInfo from '../../icons/PhInfo.svelte';
+	import PhCircleNotch from '../../icons/PhCircleNotch.svelte';
 
 	interface Props {
 		class?: ClassValue;
+		/** Custom toaster instance from `createToaster()`. Defaults to the shared `toast` instance. */
+		toaster?: CreateToasterReturn;
 	}
 
-	let { class: className }: Props = $props();
+	let { class: className, toaster: toasterInstance = toast }: Props = $props();
 </script>
 
 <Portal>
-	<Toaster toaster={toast}>
+	<Toaster toaster={toasterInstance}>
 		{#snippet children(toastItem)}
 			{@const t = toastItem()}
 			<Toast.Root
 				class={cn(
-					'relative min-w-80 rounded-lg border border-border bg-surface-1 p-4 pr-8 shadow-lg transition-all duration-200',
-					'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-top-2',
-					'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-right-full',
-					'data-[type=success]:border-green-500/50 data-[type=success]:bg-green-50 dark:data-[type=success]:bg-green-950/30',
-					'data-[type=error]:border-red-500/50 data-[type=error]:bg-red-50 dark:data-[type=error]:bg-red-950/30',
-					'data-[type=warning]:border-yellow-500/50 data-[type=warning]:bg-yellow-50 dark:data-[type=warning]:bg-yellow-950/30',
-					'data-[type=info]:border-blue-500/50 data-[type=info]:bg-blue-50 dark:data-[type=info]:bg-blue-950/30',
+					'relative flex min-w-80 items-start gap-3 rounded-lg border border-border bg-surface-1 p-4 pr-8 shadow-lg transition-all duration-200',
+					'data-[type=success]:border-success/50 data-[type=success]:bg-[color-mix(in_oklab,var(--color-success)_8%,var(--color-surface-1))]',
+					'data-[type=error]:border-danger/50 data-[type=error]:bg-[color-mix(in_oklab,var(--color-danger)_8%,var(--color-surface-1))]',
+					'data-[type=warning]:border-warning/50 data-[type=warning]:bg-[color-mix(in_oklab,var(--color-warning)_8%,var(--color-surface-1))]',
+					'data-[type=info]:border-info/50 data-[type=info]:bg-[color-mix(in_oklab,var(--color-info)_8%,var(--color-surface-1))]',
 					className
 				)}
-				style="translate: var(--x) var(--y); scale: var(--scale); z-index: var(--z-index); height: var(--height); opacity: var(--opacity);"
+				style="translate: var(--x) var(--y); scale: var(--scale); z-index: var(--z-index); height: var(--height); opacity: var(--opacity); will-change: translate, scale, opacity;"
 			>
-				{#if t.title}
-					<Toast.Title class="text-sm font-medium text-ink">{t.title}</Toast.Title>
-				{/if}
-				{#if t.description}
-					<Toast.Description class="mt-1 text-sm text-ink-dim">{t.description}</Toast.Description>
+				{#if t.type === 'success'}
+					<PhCheckCircle class="mt-0.5 size-5 shrink-0 text-success" aria-hidden="true" />
+				{:else if t.type === 'error'}
+					<PhXCircle class="mt-0.5 size-5 shrink-0 text-danger" aria-hidden="true" />
+				{:else if t.type === 'warning'}
+					<PhWarning class="mt-0.5 size-5 shrink-0 text-warning" aria-hidden="true" />
+				{:else if t.type === 'info'}
+					<PhInfo class="mt-0.5 size-5 shrink-0 text-info" aria-hidden="true" />
+				{:else if t.type === 'loading'}
+					<PhCircleNotch
+						class="mt-0.5 size-5 shrink-0 animate-spin text-ink-dim"
+						aria-hidden="true"
+					/>
 				{/if}
+				<div class="min-w-0 flex-1">
+					{#if t.title}
+						<Toast.Title class="text-sm font-medium text-ink">{t.title}</Toast.Title>
+					{/if}
+					{#if t.description}
+						<Toast.Description class="mt-1 text-sm text-ink-dim">{t.description}</Toast.Description>
+					{/if}
+					{#if t.action}
+						<Toast.ActionTrigger
+							class="mt-2 inline-flex h-7 items-center rounded-md border border-border bg-surface-1 px-2.5 text-xs font-medium text-ink shadow-sm hover:bg-surface-2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none"
+						>
+							{t.action.label}
+						</Toast.ActionTrigger>
+					{/if}
+				</div>
 				<Toast.CloseTrigger
-					class="absolute right-1.5 top-1.5 rounded p-1 text-ink-dim hover:bg-surface-2 hover:text-ink"
+					class="absolute top-1.5 right-1.5 rounded p-1 text-ink-dim hover:bg-surface-2 hover:text-ink focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none"
 					aria-label="Close notification"
 				>
 					<PhX class="size-3.5" />

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

@@ -1,7 +1,10 @@
 import { Toaster } from '@ark-ui/svelte/toast';
+import type { CreateToasterReturn } from '@ark-ui/svelte/toast';
 import type { ClassValue } from 'tailwind-variants';
 interface Props {
     class?: ClassValue;
+    /** Custom toaster instance from `createToaster()`. Defaults to the shared `toast` instance. */
+    toaster?: CreateToasterReturn;
 }
 declare const Toaster: import("svelte").Component<Props, {}, "">;
 type Toaster = ReturnType<typeof Toaster>;

package/dist/components/toggle/toggle.variants.js

@@ -7,18 +7,18 @@ export const toggle = tv({
             outline: 'border border-border hover:bg-surface-2 hover:text-ink data-pressed:bg-surface-2 data-pressed:text-ink data-pressed:shadow-sm data-[state=on]:bg-surface-2 data-[state=on]:text-ink data-[state=on]:shadow-sm'
         },
         size: {
-            sm: 'h-7 min-w-7 gap-1 px-1.5 text-xs [&_svg]:size-3.5',
-            md: 'h-8 min-w-8 gap-1.5 px-2 text-sm [&_svg]:size-4',
-            lg: 'h-9 min-w-9 gap-2 px-2.5 text-sm [&_svg]:size-5'
+            sm: 'h-8 min-w-8 gap-1 px-1.5 text-xs [&_svg]:size-3.5',
+            md: 'h-9 min-w-9 gap-1.5 px-2 text-sm [&_svg]:size-4',
+            lg: 'h-10 min-w-10 gap-2 px-2.5 text-sm [&_svg]:size-5'
         },
         icon: {
             true: ''
         }
     },
     compoundVariants: [
-        { size: 'sm', icon: true, class: 'w-7 px-0 [&_svg]:size-5' },
-        { size: 'md', icon: true, class: 'w-8 px-0 [&_svg]:size-6' },
-        { size: 'lg', icon: true, class: 'w-9 px-0 [&_svg]:size-7' }
+        { size: 'sm', icon: true, class: 'w-8 px-0 [&_svg]:size-5' },
+        { size: 'md', icon: true, class: 'w-9 px-0 [&_svg]:size-6' },
+        { size: 'lg', icon: true, class: 'w-10 px-0 [&_svg]:size-7' }
     ],
     defaultVariants: { size: 'md', variant: 'ghost' }
 });

package/dist/icons/PhCheckCircle.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	let { class: className = '', ...restProps } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 256 256"
+	class={className}
+	{...restProps}
+>
+	<path
+		fill="currentColor"
+		d="M173.66 98.34a8 8 0 0 1 0 11.32l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 0M232 128A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104m-16 0a88 88 0 1 0-88 88a88.1 88.1 0 0 0 88-88"
+	/>
+</svg>
+
+<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->

package/dist/icons/PhCheckCircle.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const PhCheckCircle: import("svelte").Component<{
+    class?: string;
+} & Record<string, any>, {}, "">;
+type PhCheckCircle = ReturnType<typeof PhCheckCircle>;
+export default PhCheckCircle;

package/dist/icons/PhCircleNotch.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	let { class: className = '', ...restProps } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 256 256"
+	class={className}
+	{...restProps}
+>
+	<path
+		fill="currentColor"
+		d="M232 128a104 104 0 0 1-208 0c0-41 23.81-78.36 60.66-95.27a8 8 0 0 1 6.68 14.54C60.15 61.59 40 93.27 40 128a88 88 0 0 0 176 0c0-34.73-20.15-66.41-51.34-80.73a8 8 0 0 1 6.68-14.54C208.19 49.64 232 87 232 128"
+	/>
+</svg>
+
+<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->

package/dist/icons/PhCircleNotch.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const PhCircleNotch: import("svelte").Component<{
+    class?: string;
+} & Record<string, any>, {}, "">;
+type PhCircleNotch = ReturnType<typeof PhCircleNotch>;
+export default PhCircleNotch;

package/dist/icons/PhInfo.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	let { class: className = '', ...restProps } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 256 256"
+	class={className}
+	{...restProps}
+>
+	<path
+		fill="currentColor"
+		d="M144 176a8 8 0 0 1-8 8a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 8 8m-32-92a12 12 0 1 1 12 12a12 12 0 0 1-12-12m120 44A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104m-16 0a88 88 0 1 0-88 88a88.1 88.1 0 0 0 88-88"
+	/>
+</svg>
+
+<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->

package/dist/icons/PhInfo.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const PhInfo: import("svelte").Component<{
+    class?: string;
+} & Record<string, any>, {}, "">;
+type PhInfo = ReturnType<typeof PhInfo>;
+export default PhInfo;

package/dist/icons/PhWarning.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	let { class: className = '', ...restProps } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 256 256"
+	class={className}
+	{...restProps}
+>
+	<path
+		fill="currentColor"
+		d="M236.8 188.09L149.35 36.22a24.76 24.76 0 0 0-42.7 0L19.2 188.09a23.51 23.51 0 0 0 0 23.72A24.35 24.35 0 0 0 40.55 224h174.9a24.35 24.35 0 0 0 21.33-12.19a23.51 23.51 0 0 0 .02-23.72m-13.87 15.71a8.5 8.5 0 0 1-7.48 4.2H40.55a8.5 8.5 0 0 1-7.48-4.2a7.59 7.59 0 0 1 0-7.72l87.45-151.87a8.75 8.75 0 0 1 15 0l87.45 151.87a7.59 7.59 0 0 1-.04 7.72M120 144v-40a8 8 0 0 1 16 0v40a8 8 0 0 1-16 0m20 36a12 12 0 1 1-12-12a12 12 0 0 1 12 12"
+	/>
+</svg>
+
+<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->

package/dist/icons/PhWarning.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const PhWarning: import("svelte").Component<{
+    class?: string;
+} & Record<string, any>, {}, "">;
+type PhWarning = ReturnType<typeof PhWarning>;
+export default PhWarning;

package/dist/icons/PhXCircle.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	let { class: className = '', ...restProps } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 256 256"
+	class={className}
+	{...restProps}
+>
+	<path
+		fill="currentColor"
+		d="M165.66 101.66L139.31 128l26.35 26.34a8 8 0 0 1-11.32 11.32L128 139.31l-26.34 26.35a8 8 0 0 1-11.32-11.32L116.69 128l-26.35-26.34a8 8 0 0 1 11.32-11.32L128 116.69l26.34-26.35a8 8 0 0 1 11.32 11.32M232 128A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104m-16 0a88 88 0 1 0-88 88a88.1 88.1 0 0 0 88-88"
+	/>
+</svg>
+
+<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->

package/dist/icons/PhXCircle.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const PhXCircle: import("svelte").Component<{
+    class?: string;
+} & Record<string, any>, {}, "">;
+type PhXCircle = ReturnType<typeof PhXCircle>;
+export default PhXCircle;

package/dist/index.d.ts

@@ -46,6 +46,7 @@ export { default as Switch } from './components/switch/switch.svelte';
 export * as Tabs from './components/tabs';
 export * as Toast from './components/toast';
 export { toast } from './components/toast';
+export type { ToastOptions, ToastType } from './components/toast';
 export { createToaster } from '@ark-ui/svelte/toast';
 export type { CreateToasterReturn } from '@ark-ui/svelte/toast';
 export { default as Toggle } from './components/toggle/toggle.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.58.1",
+	"version": "0.58.3",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev --open",