@adea-ai/ui 0.113.0 → 0.113.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ui/toast/toast.d.ts +13 -0
- package/dist/components/ui/toast/toast.d.ts.map +1 -1
- package/dist/components/ui/toast/toast.js +22 -7
- package/dist/components/ui/toast/toast.js.map +1 -1
- package/dist/r/src/components/ui/toast/toast.tsx +20 -1
- package/package.json +1 -1
- package/src/components/ui/toast/toast.tsx +20 -1
|
@@ -34,6 +34,12 @@ export type ToastOptions = {
|
|
|
34
34
|
/** Which Toaster region to render into. */
|
|
35
35
|
region?: string;
|
|
36
36
|
};
|
|
37
|
+
/**
|
|
38
|
+
* The error contract, resolved: destructive tone, persistent unless the caller
|
|
39
|
+
* says otherwise. Exported because this decision is the part a caller depends
|
|
40
|
+
* on and the part testable without a browser — the card render itself needs one.
|
|
41
|
+
*/
|
|
42
|
+
export declare function errorToastOptions(title: string, options?: Omit<ToastOptions, 'title' | 'tone'>): ToastOptions;
|
|
37
43
|
/**
|
|
38
44
|
* The toast API. `show` is the general form; the tone helpers are shorthand for
|
|
39
45
|
* the four cases that come up constantly.
|
|
@@ -41,6 +47,13 @@ export type ToastOptions = {
|
|
|
41
47
|
export declare const toast: {
|
|
42
48
|
show(options: ToastOptions): number;
|
|
43
49
|
success(title: string, options?: Omit<ToastOptions, "title" | "tone">): number;
|
|
50
|
+
/**
|
|
51
|
+
* A failure the user caused. Persistent by default — an error that times out
|
|
52
|
+
* while its reader is mid-sentence has not been reported — but `persistent`
|
|
53
|
+
* stays caller-owned: a failure inside a retry loop (a failed "check again",
|
|
54
|
+
* a background poll) passes `persistent: false` and a `duration`, because a
|
|
55
|
+
* dismiss-only toast there is one more thing to close by hand.
|
|
56
|
+
*/
|
|
44
57
|
error(title: string, options?: Omit<ToastOptions, "title" | "tone">): number;
|
|
45
58
|
warning(title: string, options?: Omit<ToastOptions, "title" | "tone">): number;
|
|
46
59
|
info(title: string, options?: Omit<ToastOptions, "title" | "tone">): number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/toast/toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,YAAY,EAA4B,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAE9F,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAInD;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,KAAK,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,GAAG,MAAM,CAAA;AAgB3E,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACpB,iFAAiF;IACjF,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,2CAA2C;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAoDD;;;GAGG;AACH,eAAO,MAAM,KAAK;kBACF,YAAY,GAAG,MAAM;mBAKpB,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG,MAAM;
|
|
1
|
+
{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/toast/toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,YAAY,EAA4B,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAE9F,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAInD;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,KAAK,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,GAAG,MAAM,CAAA;AAgB3E,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACpB,iFAAiF;IACjF,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,2CAA2C;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAoDD;;;;GAIG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,MAAM,EACb,OAAO,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,MAAM,CAAC,GAC7C,YAAY,CAEd;AAED;;;GAGG;AACH,eAAO,MAAM,KAAK;kBACF,YAAY,GAAG,MAAM;mBAKpB,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG,MAAM;IAG9E;;;;;;OAMG;iBACU,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG,MAAM;mBAG7D,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG,MAAM;gBAGlE,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG,MAAM;IAG3E;;;;OAIG;YACK,CAAC,WACE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,OAAO,CAAC,CAAC,CAAC,CAAC,YAC9B;QACR,OAAO,EAAE,MAAM,CAAA;QACf,OAAO,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC,CAAA;QACvC,KAAK,EAAE,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,OAAO,KAAK,MAAM,CAAC,CAAA;KAC7C,GACA,OAAO,CAAC,CAAC,CAAC;;;CAgCd,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,MAAM,CAAC,GAAG;IACtE,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAA;IACpE,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAyBD,iFAAiF;AACjF,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,eA4B1C;AAED,OAAO,EAAE,OAAO,EAAE,CAAA"}
|
|
@@ -89,6 +89,19 @@ function ToastCard(props) {
|
|
|
89
89
|
});
|
|
90
90
|
}
|
|
91
91
|
/**
|
|
92
|
+
* The error contract, resolved: destructive tone, persistent unless the caller
|
|
93
|
+
* says otherwise. Exported because this decision is the part a caller depends
|
|
94
|
+
* on and the part testable without a browser — the card render itself needs one.
|
|
95
|
+
*/
|
|
96
|
+
function errorToastOptions(title, options) {
|
|
97
|
+
return {
|
|
98
|
+
...options,
|
|
99
|
+
title,
|
|
100
|
+
tone: "destructive",
|
|
101
|
+
persistent: options?.persistent ?? true
|
|
102
|
+
};
|
|
103
|
+
}
|
|
104
|
+
/**
|
|
92
105
|
* The toast API. `show` is the general form; the tone helpers are shorthand for
|
|
93
106
|
* the four cases that come up constantly.
|
|
94
107
|
*/
|
|
@@ -103,13 +116,15 @@ var toast = {
|
|
|
103
116
|
tone: "success"
|
|
104
117
|
});
|
|
105
118
|
},
|
|
119
|
+
/**
|
|
120
|
+
* A failure the user caused. Persistent by default — an error that times out
|
|
121
|
+
* while its reader is mid-sentence has not been reported — but `persistent`
|
|
122
|
+
* stays caller-owned: a failure inside a retry loop (a failed "check again",
|
|
123
|
+
* a background poll) passes `persistent: false` and a `duration`, because a
|
|
124
|
+
* dismiss-only toast there is one more thing to close by hand.
|
|
125
|
+
*/
|
|
106
126
|
error(title, options) {
|
|
107
|
-
return toast.show(
|
|
108
|
-
...options,
|
|
109
|
-
title,
|
|
110
|
-
tone: "destructive",
|
|
111
|
-
persistent: true
|
|
112
|
-
});
|
|
127
|
+
return toast.show(errorToastOptions(title, options));
|
|
113
128
|
},
|
|
114
129
|
warning(title, options) {
|
|
115
130
|
return toast.show({
|
|
@@ -198,6 +213,6 @@ function Toaster(props) {
|
|
|
198
213
|
} }));
|
|
199
214
|
}
|
|
200
215
|
//#endregion
|
|
201
|
-
export { Toaster, toast, toaster };
|
|
216
|
+
export { Toaster, errorToastOptions, toast, toaster };
|
|
202
217
|
|
|
203
218
|
//# sourceMappingURL=toast.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toast.js","names":["Toast","KobalteToast","ToastComponentProps","toaster","X","ComponentProps","JSX","Show","splitProps","cn","ToastTone","toastTones","Record","default","success","warning","destructive","info","ToastOptions","title","description","tone","action","Element","persistent","duration","region","ToastCard","props","_$createComponent","toastId","priority","class","style","children","_tmpl$","_el$2","_tmpl$3","_$insert","Title","when","Description","_el$3","_tmpl$2","CloseButton","toast","show","options","_$mergeProps","Omit","error","promise","Promise","T","messages","pending","data","resolved","state","dismiss","clear","ToasterProps","Region","position","toasterPosition","toasterAlignment","Toaster","local","rest","regionId","limit","swipeDirection","pauseOnInteraction","pauseOnPageIdle","List","_$createComponent","KobalteToast","_$mergeProps"],"sources":["../../../../src/components/ui/toast/toast.tsx"],"sourcesContent":["import { Toast as KobalteToast, type ToastComponentProps, toaster } from '@kobalte/core/toast'\nimport { X } from 'lucide-solid'\nimport type { ComponentProps, JSX } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * Toast.\n *\n * A short, self-dismissing message about something that already happened.\n *\n * The rules that make toasts helpful rather than hostile are built into this\n * API rather than left to callers:\n *\n * - A toast never carries the only route to an action. Anything important\n * enough to need doing belongs in the interface, not in a message that\n * disappears. `action` exists, but it is a convenience, not a flow.\n * - Errors from user-initiated work get `priority=\"high\"` so a screen reader\n * interrupts to announce them; background progress uses the default low\n * priority so it is not read over whatever the user is doing.\n * - A toast with a way to undo is preferred to a confirmation dialog for a\n * reversible action. Undo after the fact costs the user nothing; a modal\n * before it costs everyone a click.\n *\n * `Toaster` is mounted once, near the root of the app.\n */\n\ntype ToastTone = 'default' | 'success' | 'warning' | 'destructive' | 'info'\n\n/**\n * The tone dot's colour. A custom property rather than five colour utilities\n * because the value is applied inline (the tone is data, not markup) and a\n * Tailwind colour class cannot be built from a runtime value without becoming\n * invisible to the linter.\n */\nconst toastTones: Record<ToastTone, string> = {\n default: 'var(--foreground)',\n success: 'var(--success)',\n warning: 'var(--warning)',\n destructive: 'var(--destructive)',\n info: 'var(--info)',\n}\n\nexport type ToastOptions = {\n title: string\n description?: string\n tone?: ToastTone\n /** A control rendered inside the toast, usually an Undo. */\n action?: JSX.Element\n /** Keep the toast until it is dismissed. Use for a failure the user must see. */\n persistent?: boolean\n /** Milliseconds before auto-dismiss. Overrides the region's setting. */\n duration?: number\n /** Which Toaster region to render into. */\n region?: string\n}\n\nfunction ToastCard(props: ToastComponentProps & ToastOptions) {\n const tone = () => props.tone ?? 'default'\n\n return (\n <KobalteToast\n toastId={props.toastId}\n /**\n * A user-initiated outcome is announced; a background one waits its turn.\n * A failure the user caused is worth interrupting for; a sync finishing\n * quietly is not.\n */\n priority={tone() === 'destructive' ? 'high' : 'low'}\n duration={props.duration}\n persistent={props.persistent}\n class={cn(\n 'pointer-events-auto flex w-full items-start gap-3 rounded-xl border border-border bg-popover p-3 shadow-lg',\n 'data-[opened]:animate-in data-[opened]:slide-in-from-right-full data-[opened]:fade-in-0',\n 'data-[closed]:animate-out data-[closed]:slide-out-to-right-full data-[closed]:fade-out-0',\n 'data-[swipe=move]:translate-x-(--kb-toast-swipe-move-x) data-[swipe=move]:transition-none',\n 'data-[swipe=cancel]:translate-x-0 data-[swipe=cancel]:transition-transform',\n 'data-[swipe=end]:animate-out data-[swipe=end]:slide-out-to-right-full'\n )}\n style={{ '--toast-tone': toastTones[tone()] }}\n >\n <span\n aria-hidden=\"true\"\n class=\"mt-1.5 size-1.5 shrink-0 rounded-full\"\n style={{ 'background-color': 'var(--toast-tone)' }}\n />\n <div class=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n <KobalteToast.Title class=\"text-sm font-medium\">{props.title}</KobalteToast.Title>\n <Show when={props.description}>\n <KobalteToast.Description class=\"text-sm text-muted-foreground\">\n {props.description}\n </KobalteToast.Description>\n </Show>\n <Show when={props.action}>\n <div class=\"mt-1.5 flex items-center gap-2\">{props.action}</div>\n </Show>\n </div>\n <KobalteToast.CloseButton\n aria-label=\"Dismiss notification\"\n class=\"text-muted-foreground shrink-0 rounded-sm p-0.5 transition-colors ease-out outline-none hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle\"\n >\n <X class=\"size-3.5\" />\n </KobalteToast.CloseButton>\n </KobalteToast>\n )\n}\n\n/**\n * The toast API. `show` is the general form; the tone helpers are shorthand for\n * the four cases that come up constantly.\n */\nexport const toast = {\n show(options: ToastOptions): number {\n return toaster.show((props) => <ToastCard {...props} {...options} />, {\n region: options.region,\n })\n },\n success(title: string, options?: Omit<ToastOptions, 'title' | 'tone'>): number {\n return toast.show({ ...options, title, tone: 'success' })\n },\n error(title: string, options?: Omit<ToastOptions, 'title' | 'tone'>): number {\n return toast.show({ ...options, title, tone: 'destructive', persistent: true })\n },\n warning(title: string, options?: Omit<ToastOptions, 'title' | 'tone'>): number {\n return toast.show({ ...options, title, tone: 'warning' })\n },\n info(title: string, options?: Omit<ToastOptions, 'title' | 'tone'>): number {\n return toast.show({ ...options, title, tone: 'info' })\n },\n /**\n * A toast that resolves with a promise: pending, then success or failure.\n * The right shape for an operation with a visible duration, because the user\n * gets one message instead of three.\n */\n promise<T>(\n promise: Promise<T> | (() => Promise<T>),\n messages: {\n pending: string\n success: string | ((data: T) => string)\n error: string | ((error: unknown) => string)\n }\n ): Promise<T> {\n const resolved = typeof promise === 'function' ? promise() : promise\n toaster.promise(resolved, (props) => {\n const tone: ToastTone =\n props.state === 'fulfilled'\n ? 'success'\n : props.state === 'rejected'\n ? 'destructive'\n : 'default'\n const title =\n props.state === 'pending'\n ? messages.pending\n : props.state === 'fulfilled'\n ? typeof messages.success === 'function'\n ? messages.success(props.data as T)\n : messages.success\n : typeof messages.error === 'function'\n ? messages.error(props.error)\n : messages.error\n return (\n <ToastCard\n toastId={props.toastId}\n title={title}\n tone={tone}\n persistent={props.state === 'rejected'}\n />\n )\n })\n return resolved\n },\n dismiss: toaster.dismiss,\n clear: toaster.clear,\n}\n\nexport type ToasterProps = ComponentProps<typeof KobalteToast.Region> & {\n /** Where the stack sits. Defaults to the bottom-right, clear of the shell. */\n position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n region?: string\n}\n\n/**\n * `class` lands on the region too: the props describe the region, and the\n * region is the element a caller lays out (an inset clear of a status bar, a\n * narrower stack). The list inside it is an implementation detail.\n *\n * The corner is set on the region, not the list. The region is the `fixed`\n * element: an inset on the list inside it positions nothing, and the region falls\n * back to wherever it happens to sit in the document flow.\n */\nconst toasterPosition = {\n 'top-left': 'top-0 left-0',\n 'top-right': 'top-0 right-0',\n 'bottom-left': 'bottom-0 left-0',\n 'bottom-right': 'bottom-0 right-0',\n}\n\nconst toasterAlignment = {\n 'top-left': 'items-start',\n 'top-right': 'items-end',\n 'bottom-left': 'items-start',\n 'bottom-right': 'items-end',\n}\n\n/** Mount once, near the root. Renders the stack and owns its timing defaults. */\nexport function Toaster(props: ToasterProps) {\n const [local, rest] = splitProps(props, ['position', 'region', 'class'])\n\n return (\n <KobalteToast.Region\n regionId={local.region}\n duration={5000}\n limit={3}\n swipeDirection=\"right\"\n pauseOnInteraction\n pauseOnPageIdle\n /**\n * The toast region is a top layer: opening a dialog must not hide an\n * in-flight notification, and clicking a toast must not dismiss the\n * dialog behind it.\n */\n class={cn(\n 'pointer-events-none fixed z-(--z-toast) flex max-h-screen w-full flex-col gap-2 p-4 sm:max-w-sm',\n toasterPosition[local.position ?? 'bottom-right'],\n local.class\n )}\n {...rest}\n >\n <KobalteToast.List\n class={cn('flex flex-col gap-2', toasterAlignment[local.position ?? 'bottom-right'])}\n />\n </KobalteToast.Region>\n )\n}\n\nexport { toaster }\n"],"mappings":";;;;;;;;;;;;;;;AAmCA,IAAMW,aAAwC;CAC5CE,SAAS;CACTC,SAAS;CACTC,SAAS;CACTC,aAAa;CACbC,MAAM;AACR;AAgBA,SAASU,UAAUC,OAA2C;CAC5D,MAAMP,aAAaO,MAAMP,QAAQ;CAEjC,OAAAQ,gBACG5B,OAAY;EAAA,IACX6B,UAAO;GAAA,OAAEF,MAAME;EAAO;EAAA,IAMtBC,WAAQ;GAAA,OAAEV,KAAK,MAAM,gBAAgB,SAAS;EAAK;EAAA,IACnDI,WAAQ;GAAA,OAAEG,MAAMH;EAAQ;EAAA,IACxBD,aAAU;GAAA,OAAEI,MAAMJ;EAAU;EAAA,KAAA,WAAA;GAAA,OACrBf,GACL,8GACA,2FACA,4FACA,6FACA,8EACA,uEACF;EAAC;EAAA,IACDwB,QAAK;GAAA,OAAE,EAAE,gBAAgBtB,WAAWU,KAAK,GAAG;EAAC;EAAA,IAAAa,WAAA;GAAA,OAAA;IAAAC,OAAA;WAAA;KAAA,IAAAC,QAAAC,QAAA;KAAAC,OAAAF,OAAAP,gBAQ1C5B,MAAasC,OAAK;MAAA,SAAA;MAAA,IAAAL,WAAA;OAAA,OAA8BN,MAAMT;MAAK;KAAA,CAAA,GAAA,IAAA;KAAAmB,OAAAF,OAAAP,gBAC3DtB,MAAI;MAAA,IAACiC,OAAI;OAAA,OAAEZ,MAAMR;MAAW;MAAA,IAAAc,WAAA;OAAA,OAAAL,gBAC1B5B,MAAawC,aAAW;QAAA,SAAA;QAAA,IAAAP,WAAA;SAAA,OACtBN,MAAMR;QAAW;OAAA,CAAA;MAAA;KAAA,CAAA,GAAA,IAAA;KAAAkB,OAAAF,OAAAP,gBAGrBtB,MAAI;MAAA,IAACiC,OAAI;OAAA,OAAEZ,MAAMN;MAAM;MAAA,IAAAY,WAAA;OAAA,IAAAQ,QAAAC,QAAA;OAAAL,OAAAI,aACuBd,MAAMN,MAAM;OAAA,OAAAoB;MAAA;KAAA,CAAA,GAAA,IAAA;KAAA,OAAAN;IAAA,EAAA,CAAA;IAAAP,gBAG5D5B,MAAa2C,aAAW;KAAA,cAAA;KAAA,SAAA;KAAA,IAAAV,WAAA;MAAA,OAAAL,gBAItBzB,GAAC,EAAA,SAAA,WAAA,CAAA;KAAA;IAAA,CAAA;GAAA;EAAA;CAAA,CAAA;AAIV;;;;;AAMA,IAAayC,QAAQ;CACnBC,KAAKC,SAA+B;EAClC,OAAO5C,QAAQ2C,MAAMlB,UAAKC,gBAAMF,WAASqB,WAAKpB,OAAWmB,OAAO,CAAA,GAAM,EACpErB,QAAQqB,QAAQrB,OAClB,CAAC;CACH;CACAZ,QAAQK,OAAe4B,SAAwD;EAC7E,OAAOF,MAAMC,KAAK;GAAE,GAAGC;GAAS5B;GAAOE,MAAM;EAAU,CAAC;CAC1D;CACA6B,MAAM/B,OAAe4B,SAAwD;EAC3E,OAAOF,MAAMC,KAAK;GAAE,GAAGC;GAAS5B;GAAOE,MAAM;GAAeG,YAAY;EAAK,CAAC;CAChF;CACAT,QAAQI,OAAe4B,SAAwD;EAC7E,OAAOF,MAAMC,KAAK;GAAE,GAAGC;GAAS5B;GAAOE,MAAM;EAAU,CAAC;CAC1D;CACAJ,KAAKE,OAAe4B,SAAwD;EAC1E,OAAOF,MAAMC,KAAK;GAAE,GAAGC;GAAS5B;GAAOE,MAAM;EAAO,CAAC;CACvD;;;;;;CAMA8B,QACEA,SACAG,UAKY;EACZ,MAAMG,WAAW,OAAON,YAAY,aAAaA,QAAQ,IAAIA;EAC7DhD,QAAQgD,QAAQM,WAAW7B,UAAU;GACnC,MAAMP,OACJO,MAAM8B,UAAU,cACZ,YACA9B,MAAM8B,UAAU,aACd,gBACA;GACR,MAAMvC,QACJS,MAAM8B,UAAU,YACZJ,SAASC,UACT3B,MAAM8B,UAAU,cACd,OAAOJ,SAASxC,YAAY,aAC1BwC,SAASxC,QAAQc,MAAM4B,IAAS,IAChCF,SAASxC,UACX,OAAOwC,SAASJ,UAAU,aACxBI,SAASJ,MAAMtB,MAAMsB,KAAK,IAC1BI,SAASJ;GACnB,OAAArB,gBACGF,WAAS;IAAA,IACRG,UAAO;KAAA,OAAEF,MAAME;IAAO;IACfX;IACDE;IAAI,IACVG,aAAU;KAAA,OAAEI,MAAM8B,UAAU;IAAU;GAAA,CAAA;EAG5C,CAAC;EACD,OAAOD;CACT;CACAE,SAASxD,QAAQwD;CACjBC,OAAOzD,QAAQyD;AACjB;;;;;;;;;;AAiBA,IAAMI,kBAAkB;CACtB,YAAY;CACZ,aAAa;CACb,eAAe;CACf,gBAAgB;AAClB;AAEA,IAAMC,mBAAmB;CACvB,YAAY;CACZ,aAAa;CACb,eAAe;CACf,gBAAgB;AAClB;;AAGA,SAAgBC,QAAQtC,OAAqB;CAC3C,MAAM,CAACuC,OAAOC,QAAQ5D,WAAWoB,OAAO;EAAC;EAAY;EAAU;CAAO,CAAC;CAEvE,OAAAC,gBACG5B,MAAa6D,QAAMd,WAAA;EAAA,IAClBqB,WAAQ;GAAA,OAAEF,MAAMzC;EAAM;EACtBD,UAAU;EACV6C,OAAO;EACPC,gBAAc;EACdC,oBAAkB;EAClBC,iBAAe;EAAA,KAAA,WAAA;GAAA,OAMRhE,GACL,mGACAuD,gBAAgBG,MAAMJ,YAAY,iBAClCI,MAAMnC,KACR;EAAC;CAAA,GACGoC,MAAI,EAAA,IAAAlC,WAAA;EAAA,OAAAL,gBAEP5B,MAAayE,MAAI,EAAA,KAAA,WAAA;GAAA,OACTjE,GAAG,uBAAuBwD,iBAAiBE,MAAMJ,YAAY,eAAe;EAAC,EAAA,CAAA;CAAA,EAAA,CAAA,CAAA;AAI5F"}
|
|
1
|
+
{"version":3,"file":"toast.js","names":["Toast","KobalteToast","ToastComponentProps","toaster","X","ComponentProps","JSX","Show","splitProps","cn","ToastTone","toastTones","Record","default","success","warning","destructive","info","ToastOptions","title","description","tone","action","Element","persistent","duration","region","ToastCard","props","_$createComponent","toastId","priority","class","style","children","_tmpl$","_el$2","_tmpl$3","_$insert","Title","when","Description","_el$3","_tmpl$2","CloseButton","errorToastOptions","options","Omit","toast","show","_$mergeProps","error","promise","Promise","T","messages","pending","data","resolved","state","dismiss","clear","ToasterProps","Region","position","toasterPosition","toasterAlignment","Toaster","local","rest","regionId","limit","swipeDirection","pauseOnInteraction","pauseOnPageIdle","List","_$createComponent","KobalteToast","_$mergeProps"],"sources":["../../../../src/components/ui/toast/toast.tsx"],"sourcesContent":["import { Toast as KobalteToast, type ToastComponentProps, toaster } from '@kobalte/core/toast'\nimport { X } from 'lucide-solid'\nimport type { ComponentProps, JSX } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * Toast.\n *\n * A short, self-dismissing message about something that already happened.\n *\n * The rules that make toasts helpful rather than hostile are built into this\n * API rather than left to callers:\n *\n * - A toast never carries the only route to an action. Anything important\n * enough to need doing belongs in the interface, not in a message that\n * disappears. `action` exists, but it is a convenience, not a flow.\n * - Errors from user-initiated work get `priority=\"high\"` so a screen reader\n * interrupts to announce them; background progress uses the default low\n * priority so it is not read over whatever the user is doing.\n * - A toast with a way to undo is preferred to a confirmation dialog for a\n * reversible action. Undo after the fact costs the user nothing; a modal\n * before it costs everyone a click.\n *\n * `Toaster` is mounted once, near the root of the app.\n */\n\ntype ToastTone = 'default' | 'success' | 'warning' | 'destructive' | 'info'\n\n/**\n * The tone dot's colour. A custom property rather than five colour utilities\n * because the value is applied inline (the tone is data, not markup) and a\n * Tailwind colour class cannot be built from a runtime value without becoming\n * invisible to the linter.\n */\nconst toastTones: Record<ToastTone, string> = {\n default: 'var(--foreground)',\n success: 'var(--success)',\n warning: 'var(--warning)',\n destructive: 'var(--destructive)',\n info: 'var(--info)',\n}\n\nexport type ToastOptions = {\n title: string\n description?: string\n tone?: ToastTone\n /** A control rendered inside the toast, usually an Undo. */\n action?: JSX.Element\n /** Keep the toast until it is dismissed. Use for a failure the user must see. */\n persistent?: boolean\n /** Milliseconds before auto-dismiss. Overrides the region's setting. */\n duration?: number\n /** Which Toaster region to render into. */\n region?: string\n}\n\nfunction ToastCard(props: ToastComponentProps & ToastOptions) {\n const tone = () => props.tone ?? 'default'\n\n return (\n <KobalteToast\n toastId={props.toastId}\n /**\n * A user-initiated outcome is announced; a background one waits its turn.\n * A failure the user caused is worth interrupting for; a sync finishing\n * quietly is not.\n */\n priority={tone() === 'destructive' ? 'high' : 'low'}\n duration={props.duration}\n persistent={props.persistent}\n class={cn(\n 'pointer-events-auto flex w-full items-start gap-3 rounded-xl border border-border bg-popover p-3 shadow-lg',\n 'data-[opened]:animate-in data-[opened]:slide-in-from-right-full data-[opened]:fade-in-0',\n 'data-[closed]:animate-out data-[closed]:slide-out-to-right-full data-[closed]:fade-out-0',\n 'data-[swipe=move]:translate-x-(--kb-toast-swipe-move-x) data-[swipe=move]:transition-none',\n 'data-[swipe=cancel]:translate-x-0 data-[swipe=cancel]:transition-transform',\n 'data-[swipe=end]:animate-out data-[swipe=end]:slide-out-to-right-full'\n )}\n style={{ '--toast-tone': toastTones[tone()] }}\n >\n <span\n aria-hidden=\"true\"\n class=\"mt-1.5 size-1.5 shrink-0 rounded-full\"\n style={{ 'background-color': 'var(--toast-tone)' }}\n />\n <div class=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n <KobalteToast.Title class=\"text-sm font-medium\">{props.title}</KobalteToast.Title>\n <Show when={props.description}>\n <KobalteToast.Description class=\"text-sm text-muted-foreground\">\n {props.description}\n </KobalteToast.Description>\n </Show>\n <Show when={props.action}>\n <div class=\"mt-1.5 flex items-center gap-2\">{props.action}</div>\n </Show>\n </div>\n <KobalteToast.CloseButton\n aria-label=\"Dismiss notification\"\n class=\"text-muted-foreground shrink-0 rounded-sm p-0.5 transition-colors ease-out outline-none hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle\"\n >\n <X class=\"size-3.5\" />\n </KobalteToast.CloseButton>\n </KobalteToast>\n )\n}\n\n/**\n * The error contract, resolved: destructive tone, persistent unless the caller\n * says otherwise. Exported because this decision is the part a caller depends\n * on and the part testable without a browser — the card render itself needs one.\n */\nexport function errorToastOptions(\n title: string,\n options?: Omit<ToastOptions, 'title' | 'tone'>\n): ToastOptions {\n return { ...options, title, tone: 'destructive', persistent: options?.persistent ?? true }\n}\n\n/**\n * The toast API. `show` is the general form; the tone helpers are shorthand for\n * the four cases that come up constantly.\n */\nexport const toast = {\n show(options: ToastOptions): number {\n return toaster.show((props) => <ToastCard {...props} {...options} />, {\n region: options.region,\n })\n },\n success(title: string, options?: Omit<ToastOptions, 'title' | 'tone'>): number {\n return toast.show({ ...options, title, tone: 'success' })\n },\n /**\n * A failure the user caused. Persistent by default — an error that times out\n * while its reader is mid-sentence has not been reported — but `persistent`\n * stays caller-owned: a failure inside a retry loop (a failed \"check again\",\n * a background poll) passes `persistent: false` and a `duration`, because a\n * dismiss-only toast there is one more thing to close by hand.\n */\n error(title: string, options?: Omit<ToastOptions, 'title' | 'tone'>): number {\n return toast.show(errorToastOptions(title, options))\n },\n warning(title: string, options?: Omit<ToastOptions, 'title' | 'tone'>): number {\n return toast.show({ ...options, title, tone: 'warning' })\n },\n info(title: string, options?: Omit<ToastOptions, 'title' | 'tone'>): number {\n return toast.show({ ...options, title, tone: 'info' })\n },\n /**\n * A toast that resolves with a promise: pending, then success or failure.\n * The right shape for an operation with a visible duration, because the user\n * gets one message instead of three.\n */\n promise<T>(\n promise: Promise<T> | (() => Promise<T>),\n messages: {\n pending: string\n success: string | ((data: T) => string)\n error: string | ((error: unknown) => string)\n }\n ): Promise<T> {\n const resolved = typeof promise === 'function' ? promise() : promise\n toaster.promise(resolved, (props) => {\n const tone: ToastTone =\n props.state === 'fulfilled'\n ? 'success'\n : props.state === 'rejected'\n ? 'destructive'\n : 'default'\n const title =\n props.state === 'pending'\n ? messages.pending\n : props.state === 'fulfilled'\n ? typeof messages.success === 'function'\n ? messages.success(props.data as T)\n : messages.success\n : typeof messages.error === 'function'\n ? messages.error(props.error)\n : messages.error\n return (\n <ToastCard\n toastId={props.toastId}\n title={title}\n tone={tone}\n persistent={props.state === 'rejected'}\n />\n )\n })\n return resolved\n },\n dismiss: toaster.dismiss,\n clear: toaster.clear,\n}\n\nexport type ToasterProps = ComponentProps<typeof KobalteToast.Region> & {\n /** Where the stack sits. Defaults to the bottom-right, clear of the shell. */\n position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n region?: string\n}\n\n/**\n * `class` lands on the region too: the props describe the region, and the\n * region is the element a caller lays out (an inset clear of a status bar, a\n * narrower stack). The list inside it is an implementation detail.\n *\n * The corner is set on the region, not the list. The region is the `fixed`\n * element: an inset on the list inside it positions nothing, and the region falls\n * back to wherever it happens to sit in the document flow.\n */\nconst toasterPosition = {\n 'top-left': 'top-0 left-0',\n 'top-right': 'top-0 right-0',\n 'bottom-left': 'bottom-0 left-0',\n 'bottom-right': 'bottom-0 right-0',\n}\n\nconst toasterAlignment = {\n 'top-left': 'items-start',\n 'top-right': 'items-end',\n 'bottom-left': 'items-start',\n 'bottom-right': 'items-end',\n}\n\n/** Mount once, near the root. Renders the stack and owns its timing defaults. */\nexport function Toaster(props: ToasterProps) {\n const [local, rest] = splitProps(props, ['position', 'region', 'class'])\n\n return (\n <KobalteToast.Region\n regionId={local.region}\n duration={5000}\n limit={3}\n swipeDirection=\"right\"\n pauseOnInteraction\n pauseOnPageIdle\n /**\n * The toast region is a top layer: opening a dialog must not hide an\n * in-flight notification, and clicking a toast must not dismiss the\n * dialog behind it.\n */\n class={cn(\n 'pointer-events-none fixed z-(--z-toast) flex max-h-screen w-full flex-col gap-2 p-4 sm:max-w-sm',\n toasterPosition[local.position ?? 'bottom-right'],\n local.class\n )}\n {...rest}\n >\n <KobalteToast.List\n class={cn('flex flex-col gap-2', toasterAlignment[local.position ?? 'bottom-right'])}\n />\n </KobalteToast.Region>\n )\n}\n\nexport { toaster }\n"],"mappings":"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"}
|
|
@@ -105,6 +105,18 @@ function ToastCard(props: ToastComponentProps & ToastOptions) {
|
|
|
105
105
|
)
|
|
106
106
|
}
|
|
107
107
|
|
|
108
|
+
/**
|
|
109
|
+
* The error contract, resolved: destructive tone, persistent unless the caller
|
|
110
|
+
* says otherwise. Exported because this decision is the part a caller depends
|
|
111
|
+
* on and the part testable without a browser — the card render itself needs one.
|
|
112
|
+
*/
|
|
113
|
+
export function errorToastOptions(
|
|
114
|
+
title: string,
|
|
115
|
+
options?: Omit<ToastOptions, 'title' | 'tone'>
|
|
116
|
+
): ToastOptions {
|
|
117
|
+
return { ...options, title, tone: 'destructive', persistent: options?.persistent ?? true }
|
|
118
|
+
}
|
|
119
|
+
|
|
108
120
|
/**
|
|
109
121
|
* The toast API. `show` is the general form; the tone helpers are shorthand for
|
|
110
122
|
* the four cases that come up constantly.
|
|
@@ -118,8 +130,15 @@ export const toast = {
|
|
|
118
130
|
success(title: string, options?: Omit<ToastOptions, 'title' | 'tone'>): number {
|
|
119
131
|
return toast.show({ ...options, title, tone: 'success' })
|
|
120
132
|
},
|
|
133
|
+
/**
|
|
134
|
+
* A failure the user caused. Persistent by default — an error that times out
|
|
135
|
+
* while its reader is mid-sentence has not been reported — but `persistent`
|
|
136
|
+
* stays caller-owned: a failure inside a retry loop (a failed "check again",
|
|
137
|
+
* a background poll) passes `persistent: false` and a `duration`, because a
|
|
138
|
+
* dismiss-only toast there is one more thing to close by hand.
|
|
139
|
+
*/
|
|
121
140
|
error(title: string, options?: Omit<ToastOptions, 'title' | 'tone'>): number {
|
|
122
|
-
return toast.show(
|
|
141
|
+
return toast.show(errorToastOptions(title, options))
|
|
123
142
|
},
|
|
124
143
|
warning(title: string, options?: Omit<ToastOptions, 'title' | 'tone'>): number {
|
|
125
144
|
return toast.show({ ...options, title, tone: 'warning' })
|
package/package.json
CHANGED
|
@@ -105,6 +105,18 @@ function ToastCard(props: ToastComponentProps & ToastOptions) {
|
|
|
105
105
|
)
|
|
106
106
|
}
|
|
107
107
|
|
|
108
|
+
/**
|
|
109
|
+
* The error contract, resolved: destructive tone, persistent unless the caller
|
|
110
|
+
* says otherwise. Exported because this decision is the part a caller depends
|
|
111
|
+
* on and the part testable without a browser — the card render itself needs one.
|
|
112
|
+
*/
|
|
113
|
+
export function errorToastOptions(
|
|
114
|
+
title: string,
|
|
115
|
+
options?: Omit<ToastOptions, 'title' | 'tone'>
|
|
116
|
+
): ToastOptions {
|
|
117
|
+
return { ...options, title, tone: 'destructive', persistent: options?.persistent ?? true }
|
|
118
|
+
}
|
|
119
|
+
|
|
108
120
|
/**
|
|
109
121
|
* The toast API. `show` is the general form; the tone helpers are shorthand for
|
|
110
122
|
* the four cases that come up constantly.
|
|
@@ -118,8 +130,15 @@ export const toast = {
|
|
|
118
130
|
success(title: string, options?: Omit<ToastOptions, 'title' | 'tone'>): number {
|
|
119
131
|
return toast.show({ ...options, title, tone: 'success' })
|
|
120
132
|
},
|
|
133
|
+
/**
|
|
134
|
+
* A failure the user caused. Persistent by default — an error that times out
|
|
135
|
+
* while its reader is mid-sentence has not been reported — but `persistent`
|
|
136
|
+
* stays caller-owned: a failure inside a retry loop (a failed "check again",
|
|
137
|
+
* a background poll) passes `persistent: false` and a `duration`, because a
|
|
138
|
+
* dismiss-only toast there is one more thing to close by hand.
|
|
139
|
+
*/
|
|
121
140
|
error(title: string, options?: Omit<ToastOptions, 'title' | 'tone'>): number {
|
|
122
|
-
return toast.show(
|
|
141
|
+
return toast.show(errorToastOptions(title, options))
|
|
123
142
|
},
|
|
124
143
|
warning(title: string, options?: Omit<ToastOptions, 'title' | 'tone'>): number {
|
|
125
144
|
return toast.show({ ...options, title, tone: 'warning' })
|