@zag-js/toast 0.2.4 → 0.2.5

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.
Files changed (4) hide show
  1. package/dist/index.d.ts +155 -155
  2. package/dist/index.js +14 -13
  3. package/dist/index.mjs +14 -13
  4. package/package.json +2 -2
package/dist/index.d.ts CHANGED
@@ -2,9 +2,9 @@ import * as _zag_js_core from '@zag-js/core';
2
2
  import { Machine, StateMachine } from '@zag-js/core';
3
3
  import { RootProperties, CommonProperties, Direction, DirectionProperty, Context, RequiredBy, PropTypes, NormalizeProps } from '@zag-js/types';
4
4
 
5
- declare type Type = "success" | "error" | "loading" | "info" | "custom";
6
- declare type Placement = "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end";
7
- declare type SharedContext = {
5
+ type Type = "success" | "error" | "loading" | "info" | "custom";
6
+ type Placement = "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end";
7
+ type SharedContext = {
8
8
  /**
9
9
  * Whether to pause toast when the user leaves the browser tab
10
10
  */
@@ -14,7 +14,7 @@ declare type SharedContext = {
14
14
  */
15
15
  pauseOnInteraction?: boolean;
16
16
  };
17
- declare type ToastOptions = {
17
+ type ToastOptions = {
18
18
  /**
19
19
  * The unique id of the toast
20
20
  */
@@ -65,11 +65,11 @@ declare type ToastOptions = {
65
65
  */
66
66
  onUpdate?: VoidFunction;
67
67
  };
68
- declare type Options = Partial<ToastOptions>;
69
- declare type RenderOptions = Omit<ToastOptions, "render"> & {
68
+ type Options = Partial<ToastOptions>;
69
+ type RenderOptions = Omit<ToastOptions, "render"> & {
70
70
  dismiss(): void;
71
71
  };
72
- declare type MachineContext = SharedContext & RootProperties & CommonProperties & Omit<ToastOptions, "removeDelay"> & {
72
+ type MachineContext = SharedContext & RootProperties & CommonProperties & Omit<ToastOptions, "removeDelay"> & {
73
73
  /**
74
74
  * The duration for the toast to kept alive before it is removed.
75
75
  * Useful for exit transitions.
@@ -88,14 +88,14 @@ declare type MachineContext = SharedContext & RootProperties & CommonProperties
88
88
  */
89
89
  remaining: number;
90
90
  };
91
- declare type MachineState = {
91
+ type MachineState = {
92
92
  value: "active" | "active:temp" | "dismissing" | "inactive" | "persist";
93
93
  tags: "visible" | "paused" | "updating";
94
94
  };
95
- declare type State = StateMachine.State<MachineContext, MachineState>;
96
- declare type Send = StateMachine.Send;
97
- declare type Service = Machine<MachineContext, MachineState>;
98
- declare type GroupPublicContext = SharedContext & DirectionProperty & CommonProperties & {
95
+ type State = StateMachine.State<MachineContext, MachineState>;
96
+ type Send = StateMachine.Send;
97
+ type Service = Machine<MachineContext, MachineState>;
98
+ type GroupPublicContext = SharedContext & DirectionProperty & CommonProperties & {
99
99
  /**
100
100
  * The gutter or spacing between toasts
101
101
  */
@@ -113,29 +113,29 @@ declare type GroupPublicContext = SharedContext & DirectionProperty & CommonProp
113
113
  */
114
114
  offsets: string | Record<"left" | "right" | "bottom" | "top", string>;
115
115
  };
116
- declare type UserDefinedGroupContext = RequiredBy<GroupPublicContext, "id">;
117
- declare type GroupComputedContext = Readonly<{
116
+ type UserDefinedGroupContext = RequiredBy<GroupPublicContext, "id">;
117
+ type GroupComputedContext = Readonly<{
118
118
  /**
119
119
  * @computed
120
120
  * The total number of toasts in the group
121
121
  */
122
122
  readonly count: number;
123
123
  }>;
124
- declare type GroupPrivateContext = Context<{}>;
125
- declare type GroupMachineContext = GroupPublicContext & GroupComputedContext & GroupPrivateContext;
126
- declare type GroupState = StateMachine.State<GroupMachineContext>;
127
- declare type GroupSend = (event: StateMachine.Event<StateMachine.AnyEventObject>) => void;
128
- declare type MaybeFunction<Value, Args> = Value | ((arg: Args) => Value);
129
- declare type PromiseOptions<Value> = {
124
+ type GroupPrivateContext = Context<{}>;
125
+ type GroupMachineContext = GroupPublicContext & GroupComputedContext & GroupPrivateContext;
126
+ type GroupState = StateMachine.State<GroupMachineContext>;
127
+ type GroupSend = (event: StateMachine.Event<StateMachine.AnyEventObject>) => void;
128
+ type MaybeFunction<Value, Args> = Value | ((arg: Args) => Value);
129
+ type PromiseOptions<Value> = {
130
130
  loading: ToastOptions;
131
131
  success: MaybeFunction<ToastOptions, Value>;
132
132
  error: MaybeFunction<ToastOptions, Error>;
133
133
  };
134
- declare type GroupProps = {
134
+ type GroupProps = {
135
135
  placement: Placement;
136
136
  label?: string;
137
137
  };
138
- declare type Toaster = {
138
+ type Toaster = {
139
139
  count: number;
140
140
  isVisible(id: string): boolean;
141
141
  upsert(options: ToastOptions): string | undefined;
@@ -177,25 +177,25 @@ declare function createToastMachine(options?: Options): _zag_js_core.Machine<Mac
177
177
  declare const anatomy: Omit<{
178
178
  parts: <U extends string>(...parts: U[]) => Omit<{
179
179
  parts: any;
180
- extend: <V extends string>(...parts: V[]) => Omit<{
180
+ extendWith: <V extends string>(...parts: V[]) => Omit<{
181
181
  parts: any;
182
- extend: <V_1 extends string>(...parts: V_1[]) => Omit<{
182
+ extendWith: <V_1 extends string>(...parts: V_1[]) => Omit<{
183
183
  parts: any;
184
- extend: <V_2 extends string>(...parts: V_2[]) => Omit<{
184
+ extendWith: <V_2 extends string>(...parts: V_2[]) => Omit<{
185
185
  parts: any;
186
- extend: <V_3 extends string>(...parts: V_3[]) => Omit<{
186
+ extendWith: <V_3 extends string>(...parts: V_3[]) => Omit<{
187
187
  parts: any;
188
- extend: <V_4 extends string>(...parts: V_4[]) => Omit<{
188
+ extendWith: <V_4 extends string>(...parts: V_4[]) => Omit<{
189
189
  parts: any;
190
- extend: <V_5 extends string>(...parts: V_5[]) => Omit<{
190
+ extendWith: <V_5 extends string>(...parts: V_5[]) => Omit<{
191
191
  parts: any;
192
- extend: <V_6 extends string>(...parts: V_6[]) => Omit<{
192
+ extendWith: <V_6 extends string>(...parts: V_6[]) => Omit<{
193
193
  parts: any;
194
- extend: <V_7 extends string>(...parts: V_7[]) => Omit<{
194
+ extendWith: <V_7 extends string>(...parts: V_7[]) => Omit<{
195
195
  parts: any;
196
- extend: <V_8 extends string>(...parts: V_8[]) => Omit<{
196
+ extendWith: <V_8 extends string>(...parts: V_8[]) => Omit<{
197
197
  parts: any;
198
- extend: <V_9 extends string>(...parts: V_9[]) => Omit<any, "parts">;
198
+ extendWith: <V_9 extends string>(...parts: V_9[]) => Omit<any, "parts">;
199
199
  build: () => Record<U | V | V_1 | V_2 | V_3 | V_4 | V_5 | V_6 | V_7 | V_8, {
200
200
  selector: string;
201
201
  attrs: Record<"data-scope" | "data-part", string>;
@@ -246,28 +246,28 @@ declare const anatomy: Omit<{
246
246
  attrs: Record<"data-scope" | "data-part", string>;
247
247
  }>;
248
248
  }, "parts">;
249
- extend: <V_10 extends string>(...parts: V_10[]) => Omit<{
249
+ extendWith: <V_10 extends string>(...parts: V_10[]) => Omit<{
250
250
  parts: <U extends string>(...parts: U[]) => Omit<{
251
251
  parts: any;
252
- extend: <V extends string>(...parts: V[]) => Omit<{
252
+ extendWith: <V extends string>(...parts: V[]) => Omit<{
253
253
  parts: any;
254
- extend: <V_1 extends string>(...parts: V_1[]) => Omit<{
254
+ extendWith: <V_1 extends string>(...parts: V_1[]) => Omit<{
255
255
  parts: any;
256
- extend: <V_2 extends string>(...parts: V_2[]) => Omit<{
256
+ extendWith: <V_2 extends string>(...parts: V_2[]) => Omit<{
257
257
  parts: any;
258
- extend: <V_3 extends string>(...parts: V_3[]) => Omit<{
258
+ extendWith: <V_3 extends string>(...parts: V_3[]) => Omit<{
259
259
  parts: any;
260
- extend: <V_4 extends string>(...parts: V_4[]) => Omit<{
260
+ extendWith: <V_4 extends string>(...parts: V_4[]) => Omit<{
261
261
  parts: any;
262
- extend: <V_5 extends string>(...parts: V_5[]) => Omit<{
262
+ extendWith: <V_5 extends string>(...parts: V_5[]) => Omit<{
263
263
  parts: any;
264
- extend: <V_6 extends string>(...parts: V_6[]) => Omit<{
264
+ extendWith: <V_6 extends string>(...parts: V_6[]) => Omit<{
265
265
  parts: any;
266
- extend: <V_7 extends string>(...parts: V_7[]) => Omit<{
266
+ extendWith: <V_7 extends string>(...parts: V_7[]) => Omit<{
267
267
  parts: any;
268
- extend: <V_8 extends string>(...parts: V_8[]) => Omit<{
268
+ extendWith: <V_8 extends string>(...parts: V_8[]) => Omit<{
269
269
  parts: any;
270
- extend: <V_9 extends string>(...parts: V_9[]) => Omit<any, "parts">;
270
+ extendWith: <V_9 extends string>(...parts: V_9[]) => Omit<any, "parts">;
271
271
  build: () => Record<U | V | V_1 | V_2 | V_3 | V_4 | V_5 | V_6 | V_7 | V_8, {
272
272
  selector: string;
273
273
  attrs: Record<"data-scope" | "data-part", string>;
@@ -318,28 +318,28 @@ declare const anatomy: Omit<{
318
318
  attrs: Record<"data-scope" | "data-part", string>;
319
319
  }>;
320
320
  }, "parts">;
321
- extend: <V_11 extends string>(...parts: V_11[]) => Omit<{
321
+ extendWith: <V_11 extends string>(...parts: V_11[]) => Omit<{
322
322
  parts: <U extends string>(...parts: U[]) => Omit<{
323
323
  parts: any;
324
- extend: <V extends string>(...parts: V[]) => Omit<{
324
+ extendWith: <V extends string>(...parts: V[]) => Omit<{
325
325
  parts: any;
326
- extend: <V_1 extends string>(...parts: V_1[]) => Omit<{
326
+ extendWith: <V_1 extends string>(...parts: V_1[]) => Omit<{
327
327
  parts: any;
328
- extend: <V_2 extends string>(...parts: V_2[]) => Omit<{
328
+ extendWith: <V_2 extends string>(...parts: V_2[]) => Omit<{
329
329
  parts: any;
330
- extend: <V_3 extends string>(...parts: V_3[]) => Omit<{
330
+ extendWith: <V_3 extends string>(...parts: V_3[]) => Omit<{
331
331
  parts: any;
332
- extend: <V_4 extends string>(...parts: V_4[]) => Omit<{
332
+ extendWith: <V_4 extends string>(...parts: V_4[]) => Omit<{
333
333
  parts: any;
334
- extend: <V_5 extends string>(...parts: V_5[]) => Omit<{
334
+ extendWith: <V_5 extends string>(...parts: V_5[]) => Omit<{
335
335
  parts: any;
336
- extend: <V_6 extends string>(...parts: V_6[]) => Omit<{
336
+ extendWith: <V_6 extends string>(...parts: V_6[]) => Omit<{
337
337
  parts: any;
338
- extend: <V_7 extends string>(...parts: V_7[]) => Omit<{
338
+ extendWith: <V_7 extends string>(...parts: V_7[]) => Omit<{
339
339
  parts: any;
340
- extend: <V_8 extends string>(...parts: V_8[]) => Omit<{
340
+ extendWith: <V_8 extends string>(...parts: V_8[]) => Omit<{
341
341
  parts: any;
342
- extend: <V_9 extends string>(...parts: V_9[]) => Omit<any, "parts">;
342
+ extendWith: <V_9 extends string>(...parts: V_9[]) => Omit<any, "parts">;
343
343
  build: () => Record<U | V | V_1 | V_2 | V_3 | V_4 | V_5 | V_6 | V_7 | V_8, {
344
344
  selector: string;
345
345
  attrs: Record<"data-scope" | "data-part", string>;
@@ -390,28 +390,28 @@ declare const anatomy: Omit<{
390
390
  attrs: Record<"data-scope" | "data-part", string>;
391
391
  }>;
392
392
  }, "parts">;
393
- extend: <V_12 extends string>(...parts: V_12[]) => Omit<{
393
+ extendWith: <V_12 extends string>(...parts: V_12[]) => Omit<{
394
394
  parts: <U extends string>(...parts: U[]) => Omit<{
395
395
  parts: any;
396
- extend: <V extends string>(...parts: V[]) => Omit<{
396
+ extendWith: <V extends string>(...parts: V[]) => Omit<{
397
397
  parts: any;
398
- extend: <V_1 extends string>(...parts: V_1[]) => Omit<{
398
+ extendWith: <V_1 extends string>(...parts: V_1[]) => Omit<{
399
399
  parts: any;
400
- extend: <V_2 extends string>(...parts: V_2[]) => Omit<{
400
+ extendWith: <V_2 extends string>(...parts: V_2[]) => Omit<{
401
401
  parts: any;
402
- extend: <V_3 extends string>(...parts: V_3[]) => Omit<{
402
+ extendWith: <V_3 extends string>(...parts: V_3[]) => Omit<{
403
403
  parts: any;
404
- extend: <V_4 extends string>(...parts: V_4[]) => Omit<{
404
+ extendWith: <V_4 extends string>(...parts: V_4[]) => Omit<{
405
405
  parts: any;
406
- extend: <V_5 extends string>(...parts: V_5[]) => Omit<{
406
+ extendWith: <V_5 extends string>(...parts: V_5[]) => Omit<{
407
407
  parts: any;
408
- extend: <V_6 extends string>(...parts: V_6[]) => Omit<{
408
+ extendWith: <V_6 extends string>(...parts: V_6[]) => Omit<{
409
409
  parts: any;
410
- extend: <V_7 extends string>(...parts: V_7[]) => Omit<{
410
+ extendWith: <V_7 extends string>(...parts: V_7[]) => Omit<{
411
411
  parts: any;
412
- extend: <V_8 extends string>(...parts: V_8[]) => Omit<{
412
+ extendWith: <V_8 extends string>(...parts: V_8[]) => Omit<{
413
413
  parts: any;
414
- extend: <V_9 extends string>(...parts: V_9[]) => Omit<any, "parts">;
414
+ extendWith: <V_9 extends string>(...parts: V_9[]) => Omit<any, "parts">;
415
415
  build: () => Record<U | V | V_1 | V_2 | V_3 | V_4 | V_5 | V_6 | V_7 | V_8, {
416
416
  selector: string;
417
417
  attrs: Record<"data-scope" | "data-part", string>;
@@ -462,28 +462,28 @@ declare const anatomy: Omit<{
462
462
  attrs: Record<"data-scope" | "data-part", string>;
463
463
  }>;
464
464
  }, "parts">;
465
- extend: <V_13 extends string>(...parts: V_13[]) => Omit<{
465
+ extendWith: <V_13 extends string>(...parts: V_13[]) => Omit<{
466
466
  parts: <U extends string>(...parts: U[]) => Omit<{
467
467
  parts: any;
468
- extend: <V extends string>(...parts: V[]) => Omit<{
468
+ extendWith: <V extends string>(...parts: V[]) => Omit<{
469
469
  parts: any;
470
- extend: <V_1 extends string>(...parts: V_1[]) => Omit<{
470
+ extendWith: <V_1 extends string>(...parts: V_1[]) => Omit<{
471
471
  parts: any;
472
- extend: <V_2 extends string>(...parts: V_2[]) => Omit<{
472
+ extendWith: <V_2 extends string>(...parts: V_2[]) => Omit<{
473
473
  parts: any;
474
- extend: <V_3 extends string>(...parts: V_3[]) => Omit<{
474
+ extendWith: <V_3 extends string>(...parts: V_3[]) => Omit<{
475
475
  parts: any;
476
- extend: <V_4 extends string>(...parts: V_4[]) => Omit<{
476
+ extendWith: <V_4 extends string>(...parts: V_4[]) => Omit<{
477
477
  parts: any;
478
- extend: <V_5 extends string>(...parts: V_5[]) => Omit<{
478
+ extendWith: <V_5 extends string>(...parts: V_5[]) => Omit<{
479
479
  parts: any;
480
- extend: <V_6 extends string>(...parts: V_6[]) => Omit<{
480
+ extendWith: <V_6 extends string>(...parts: V_6[]) => Omit<{
481
481
  parts: any;
482
- extend: <V_7 extends string>(...parts: V_7[]) => Omit<{
482
+ extendWith: <V_7 extends string>(...parts: V_7[]) => Omit<{
483
483
  parts: any;
484
- extend: <V_8 extends string>(...parts: V_8[]) => Omit<{
484
+ extendWith: <V_8 extends string>(...parts: V_8[]) => Omit<{
485
485
  parts: any;
486
- extend: <V_9 extends string>(...parts: V_9[]) => Omit<any, "parts">;
486
+ extendWith: <V_9 extends string>(...parts: V_9[]) => Omit<any, "parts">;
487
487
  build: () => Record<U | V | V_1 | V_2 | V_3 | V_4 | V_5 | V_6 | V_7 | V_8, {
488
488
  selector: string;
489
489
  attrs: Record<"data-scope" | "data-part", string>;
@@ -534,28 +534,28 @@ declare const anatomy: Omit<{
534
534
  attrs: Record<"data-scope" | "data-part", string>;
535
535
  }>;
536
536
  }, "parts">;
537
- extend: <V_14 extends string>(...parts: V_14[]) => Omit<{
537
+ extendWith: <V_14 extends string>(...parts: V_14[]) => Omit<{
538
538
  parts: <U extends string>(...parts: U[]) => Omit<{
539
539
  parts: any;
540
- extend: <V extends string>(...parts: V[]) => Omit<{
540
+ extendWith: <V extends string>(...parts: V[]) => Omit<{
541
541
  parts: any;
542
- extend: <V_1 extends string>(...parts: V_1[]) => Omit<{
542
+ extendWith: <V_1 extends string>(...parts: V_1[]) => Omit<{
543
543
  parts: any;
544
- extend: <V_2 extends string>(...parts: V_2[]) => Omit<{
544
+ extendWith: <V_2 extends string>(...parts: V_2[]) => Omit<{
545
545
  parts: any;
546
- extend: <V_3 extends string>(...parts: V_3[]) => Omit<{
546
+ extendWith: <V_3 extends string>(...parts: V_3[]) => Omit<{
547
547
  parts: any;
548
- extend: <V_4 extends string>(...parts: V_4[]) => Omit<{
548
+ extendWith: <V_4 extends string>(...parts: V_4[]) => Omit<{
549
549
  parts: any;
550
- extend: <V_5 extends string>(...parts: V_5[]) => Omit<{
550
+ extendWith: <V_5 extends string>(...parts: V_5[]) => Omit<{
551
551
  parts: any;
552
- extend: <V_6 extends string>(...parts: V_6[]) => Omit<{
552
+ extendWith: <V_6 extends string>(...parts: V_6[]) => Omit<{
553
553
  parts: any;
554
- extend: <V_7 extends string>(...parts: V_7[]) => Omit<{
554
+ extendWith: <V_7 extends string>(...parts: V_7[]) => Omit<{
555
555
  parts: any;
556
- extend: <V_8 extends string>(...parts: V_8[]) => Omit<{
556
+ extendWith: <V_8 extends string>(...parts: V_8[]) => Omit<{
557
557
  parts: any;
558
- extend: <V_9 extends string>(...parts: V_9[]) => Omit<any, "parts">;
558
+ extendWith: <V_9 extends string>(...parts: V_9[]) => Omit<any, "parts">;
559
559
  build: () => Record<U | V | V_1 | V_2 | V_3 | V_4 | V_5 | V_6 | V_7 | V_8, {
560
560
  selector: string;
561
561
  attrs: Record<"data-scope" | "data-part", string>;
@@ -606,28 +606,28 @@ declare const anatomy: Omit<{
606
606
  attrs: Record<"data-scope" | "data-part", string>;
607
607
  }>;
608
608
  }, "parts">;
609
- extend: <V_15 extends string>(...parts: V_15[]) => Omit<{
609
+ extendWith: <V_15 extends string>(...parts: V_15[]) => Omit<{
610
610
  parts: <U extends string>(...parts: U[]) => Omit<{
611
611
  parts: any;
612
- extend: <V extends string>(...parts: V[]) => Omit<{
612
+ extendWith: <V extends string>(...parts: V[]) => Omit<{
613
613
  parts: any;
614
- extend: <V_1 extends string>(...parts: V_1[]) => Omit<{
614
+ extendWith: <V_1 extends string>(...parts: V_1[]) => Omit<{
615
615
  parts: any;
616
- extend: <V_2 extends string>(...parts: V_2[]) => Omit<{
616
+ extendWith: <V_2 extends string>(...parts: V_2[]) => Omit<{
617
617
  parts: any;
618
- extend: <V_3 extends string>(...parts: V_3[]) => Omit<{
618
+ extendWith: <V_3 extends string>(...parts: V_3[]) => Omit<{
619
619
  parts: any;
620
- extend: <V_4 extends string>(...parts: V_4[]) => Omit<{
620
+ extendWith: <V_4 extends string>(...parts: V_4[]) => Omit<{
621
621
  parts: any;
622
- extend: <V_5 extends string>(...parts: V_5[]) => Omit<{
622
+ extendWith: <V_5 extends string>(...parts: V_5[]) => Omit<{
623
623
  parts: any;
624
- extend: <V_6 extends string>(...parts: V_6[]) => Omit<{
624
+ extendWith: <V_6 extends string>(...parts: V_6[]) => Omit<{
625
625
  parts: any;
626
- extend: <V_7 extends string>(...parts: V_7[]) => Omit<{
626
+ extendWith: <V_7 extends string>(...parts: V_7[]) => Omit<{
627
627
  parts: any;
628
- extend: <V_8 extends string>(...parts: V_8[]) => Omit<{
628
+ extendWith: <V_8 extends string>(...parts: V_8[]) => Omit<{
629
629
  parts: any;
630
- extend: <V_9 extends string>(...parts: V_9[]) => Omit<any, "parts">;
630
+ extendWith: <V_9 extends string>(...parts: V_9[]) => Omit<any, "parts">;
631
631
  build: () => Record<U | V | V_1 | V_2 | V_3 | V_4 | V_5 | V_6 | V_7 | V_8, {
632
632
  selector: string;
633
633
  attrs: Record<"data-scope" | "data-part", string>;
@@ -678,28 +678,28 @@ declare const anatomy: Omit<{
678
678
  attrs: Record<"data-scope" | "data-part", string>;
679
679
  }>;
680
680
  }, "parts">;
681
- extend: <V_16 extends string>(...parts: V_16[]) => Omit<{
681
+ extendWith: <V_16 extends string>(...parts: V_16[]) => Omit<{
682
682
  parts: <U extends string>(...parts: U[]) => Omit<{
683
683
  parts: any;
684
- extend: <V extends string>(...parts: V[]) => Omit<{
684
+ extendWith: <V extends string>(...parts: V[]) => Omit<{
685
685
  parts: any;
686
- extend: <V_1 extends string>(...parts: V_1[]) => Omit<{
686
+ extendWith: <V_1 extends string>(...parts: V_1[]) => Omit<{
687
687
  parts: any;
688
- extend: <V_2 extends string>(...parts: V_2[]) => Omit<{
688
+ extendWith: <V_2 extends string>(...parts: V_2[]) => Omit<{
689
689
  parts: any;
690
- extend: <V_3 extends string>(...parts: V_3[]) => Omit<{
690
+ extendWith: <V_3 extends string>(...parts: V_3[]) => Omit<{
691
691
  parts: any;
692
- extend: <V_4 extends string>(...parts: V_4[]) => Omit<{
692
+ extendWith: <V_4 extends string>(...parts: V_4[]) => Omit<{
693
693
  parts: any;
694
- extend: <V_5 extends string>(...parts: V_5[]) => Omit<{
694
+ extendWith: <V_5 extends string>(...parts: V_5[]) => Omit<{
695
695
  parts: any;
696
- extend: <V_6 extends string>(...parts: V_6[]) => Omit<{
696
+ extendWith: <V_6 extends string>(...parts: V_6[]) => Omit<{
697
697
  parts: any;
698
- extend: <V_7 extends string>(...parts: V_7[]) => Omit<{
698
+ extendWith: <V_7 extends string>(...parts: V_7[]) => Omit<{
699
699
  parts: any;
700
- extend: <V_8 extends string>(...parts: V_8[]) => Omit<{
700
+ extendWith: <V_8 extends string>(...parts: V_8[]) => Omit<{
701
701
  parts: any;
702
- extend: <V_9 extends string>(...parts: V_9[]) => Omit<any, "parts">;
702
+ extendWith: <V_9 extends string>(...parts: V_9[]) => Omit<any, "parts">;
703
703
  build: () => Record<U | V | V_1 | V_2 | V_3 | V_4 | V_5 | V_6 | V_7 | V_8, {
704
704
  selector: string;
705
705
  attrs: Record<"data-scope" | "data-part", string>;
@@ -750,28 +750,28 @@ declare const anatomy: Omit<{
750
750
  attrs: Record<"data-scope" | "data-part", string>;
751
751
  }>;
752
752
  }, "parts">;
753
- extend: <V_17 extends string>(...parts: V_17[]) => Omit<{
753
+ extendWith: <V_17 extends string>(...parts: V_17[]) => Omit<{
754
754
  parts: <U extends string>(...parts: U[]) => Omit<{
755
755
  parts: any;
756
- extend: <V extends string>(...parts: V[]) => Omit<{
756
+ extendWith: <V extends string>(...parts: V[]) => Omit<{
757
757
  parts: any;
758
- extend: <V_1 extends string>(...parts: V_1[]) => Omit<{
758
+ extendWith: <V_1 extends string>(...parts: V_1[]) => Omit<{
759
759
  parts: any;
760
- extend: <V_2 extends string>(...parts: V_2[]) => Omit<{
760
+ extendWith: <V_2 extends string>(...parts: V_2[]) => Omit<{
761
761
  parts: any;
762
- extend: <V_3 extends string>(...parts: V_3[]) => Omit<{
762
+ extendWith: <V_3 extends string>(...parts: V_3[]) => Omit<{
763
763
  parts: any;
764
- extend: <V_4 extends string>(...parts: V_4[]) => Omit<{
764
+ extendWith: <V_4 extends string>(...parts: V_4[]) => Omit<{
765
765
  parts: any;
766
- extend: <V_5 extends string>(...parts: V_5[]) => Omit<{
766
+ extendWith: <V_5 extends string>(...parts: V_5[]) => Omit<{
767
767
  parts: any;
768
- extend: <V_6 extends string>(...parts: V_6[]) => Omit<{
768
+ extendWith: <V_6 extends string>(...parts: V_6[]) => Omit<{
769
769
  parts: any;
770
- extend: <V_7 extends string>(...parts: V_7[]) => Omit<{
770
+ extendWith: <V_7 extends string>(...parts: V_7[]) => Omit<{
771
771
  parts: any;
772
- extend: <V_8 extends string>(...parts: V_8[]) => Omit<{
772
+ extendWith: <V_8 extends string>(...parts: V_8[]) => Omit<{
773
773
  parts: any;
774
- extend: <V_9 extends string>(...parts: V_9[]) => Omit<any, "parts">;
774
+ extendWith: <V_9 extends string>(...parts: V_9[]) => Omit<any, "parts">;
775
775
  build: () => Record<U | V | V_1 | V_2 | V_3 | V_4 | V_5 | V_6 | V_7 | V_8, {
776
776
  selector: string;
777
777
  attrs: Record<"data-scope" | "data-part", string>;
@@ -822,28 +822,28 @@ declare const anatomy: Omit<{
822
822
  attrs: Record<"data-scope" | "data-part", string>;
823
823
  }>;
824
824
  }, "parts">;
825
- extend: <V_18 extends string>(...parts: V_18[]) => Omit<{
825
+ extendWith: <V_18 extends string>(...parts: V_18[]) => Omit<{
826
826
  parts: <U extends string>(...parts: U[]) => Omit<{
827
827
  parts: any;
828
- extend: <V extends string>(...parts: V[]) => Omit<{
828
+ extendWith: <V extends string>(...parts: V[]) => Omit<{
829
829
  parts: any;
830
- extend: <V_1 extends string>(...parts: V_1[]) => Omit<{
830
+ extendWith: <V_1 extends string>(...parts: V_1[]) => Omit<{
831
831
  parts: any;
832
- extend: <V_2 extends string>(...parts: V_2[]) => Omit<{
832
+ extendWith: <V_2 extends string>(...parts: V_2[]) => Omit<{
833
833
  parts: any;
834
- extend: <V_3 extends string>(...parts: V_3[]) => Omit<{
834
+ extendWith: <V_3 extends string>(...parts: V_3[]) => Omit<{
835
835
  parts: any;
836
- extend: <V_4 extends string>(...parts: V_4[]) => Omit<{
836
+ extendWith: <V_4 extends string>(...parts: V_4[]) => Omit<{
837
837
  parts: any;
838
- extend: <V_5 extends string>(...parts: V_5[]) => Omit<{
838
+ extendWith: <V_5 extends string>(...parts: V_5[]) => Omit<{
839
839
  parts: any;
840
- extend: <V_6 extends string>(...parts: V_6[]) => Omit<{
840
+ extendWith: <V_6 extends string>(...parts: V_6[]) => Omit<{
841
841
  parts: any;
842
- extend: <V_7 extends string>(...parts: V_7[]) => Omit<{
842
+ extendWith: <V_7 extends string>(...parts: V_7[]) => Omit<{
843
843
  parts: any;
844
- extend: <V_8 extends string>(...parts: V_8[]) => Omit<{
844
+ extendWith: <V_8 extends string>(...parts: V_8[]) => Omit<{
845
845
  parts: any;
846
- extend: <V_9 extends string>(...parts: V_9[]) => Omit<any, "parts">;
846
+ extendWith: <V_9 extends string>(...parts: V_9[]) => Omit<any, "parts">;
847
847
  build: () => Record<U | V | V_1 | V_2 | V_3 | V_4 | V_5 | V_6 | V_7 | V_8, {
848
848
  selector: string;
849
849
  attrs: Record<"data-scope" | "data-part", string>;
@@ -894,28 +894,28 @@ declare const anatomy: Omit<{
894
894
  attrs: Record<"data-scope" | "data-part", string>;
895
895
  }>;
896
896
  }, "parts">;
897
- extend: <V_19 extends string>(...parts: V_19[]) => Omit<{
897
+ extendWith: <V_19 extends string>(...parts: V_19[]) => Omit<{
898
898
  parts: <U extends string>(...parts: U[]) => Omit<{
899
899
  parts: any;
900
- extend: <V extends string>(...parts: V[]) => Omit<{
900
+ extendWith: <V extends string>(...parts: V[]) => Omit<{
901
901
  parts: any;
902
- extend: <V_1 extends string>(...parts: V_1[]) => Omit<{
902
+ extendWith: <V_1 extends string>(...parts: V_1[]) => Omit<{
903
903
  parts: any;
904
- extend: <V_2 extends string>(...parts: V_2[]) => Omit<{
904
+ extendWith: <V_2 extends string>(...parts: V_2[]) => Omit<{
905
905
  parts: any;
906
- extend: <V_3 extends string>(...parts: V_3[]) => Omit<{
906
+ extendWith: <V_3 extends string>(...parts: V_3[]) => Omit<{
907
907
  parts: any;
908
- extend: <V_4 extends string>(...parts: V_4[]) => Omit<{
908
+ extendWith: <V_4 extends string>(...parts: V_4[]) => Omit<{
909
909
  parts: any;
910
- extend: <V_5 extends string>(...parts: V_5[]) => Omit<{
910
+ extendWith: <V_5 extends string>(...parts: V_5[]) => Omit<{
911
911
  parts: any;
912
- extend: <V_6 extends string>(...parts: V_6[]) => Omit<{
912
+ extendWith: <V_6 extends string>(...parts: V_6[]) => Omit<{
913
913
  parts: any;
914
- extend: <V_7 extends string>(...parts: V_7[]) => Omit<{
914
+ extendWith: <V_7 extends string>(...parts: V_7[]) => Omit<{
915
915
  parts: any;
916
- extend: <V_8 extends string>(...parts: V_8[]) => Omit<{
916
+ extendWith: <V_8 extends string>(...parts: V_8[]) => Omit<{
917
917
  parts: any;
918
- extend: <V_9 extends string>(...parts: V_9[]) => Omit<any, "parts">;
918
+ extendWith: <V_9 extends string>(...parts: V_9[]) => Omit<any, "parts">;
919
919
  build: () => Record<U | V | V_1 | V_2 | V_3 | V_4 | V_5 | V_6 | V_7 | V_8, {
920
920
  selector: string;
921
921
  attrs: Record<"data-scope" | "data-part", string>;
@@ -966,58 +966,58 @@ declare const anatomy: Omit<{
966
966
  attrs: Record<"data-scope" | "data-part", string>;
967
967
  }>;
968
968
  }, "parts">;
969
- extend: <V_20 extends string>(...parts: V_20[]) => Omit<any, "parts">;
970
- build: () => Record<"title" | "description" | "root" | "closeButton" | V_10 | V_11 | V_12 | V_13 | V_14 | V_15 | V_16 | V_17 | V_18 | V_19, {
969
+ extendWith: <V_20 extends string>(...parts: V_20[]) => Omit<any, "parts">;
970
+ build: () => Record<"group" | "root" | "title" | "description" | "closeTrigger" | V_10 | V_11 | V_12 | V_13 | V_14 | V_15 | V_16 | V_17 | V_18 | V_19, {
971
971
  selector: string;
972
972
  attrs: Record<"data-scope" | "data-part", string>;
973
973
  }>;
974
974
  }, "parts">;
975
- build: () => Record<"title" | "description" | "root" | "closeButton" | V_10 | V_11 | V_12 | V_13 | V_14 | V_15 | V_16 | V_17 | V_18, {
975
+ build: () => Record<"group" | "root" | "title" | "description" | "closeTrigger" | V_10 | V_11 | V_12 | V_13 | V_14 | V_15 | V_16 | V_17 | V_18, {
976
976
  selector: string;
977
977
  attrs: Record<"data-scope" | "data-part", string>;
978
978
  }>;
979
979
  }, "parts">;
980
- build: () => Record<"title" | "description" | "root" | "closeButton" | V_10 | V_11 | V_12 | V_13 | V_14 | V_15 | V_16 | V_17, {
980
+ build: () => Record<"group" | "root" | "title" | "description" | "closeTrigger" | V_10 | V_11 | V_12 | V_13 | V_14 | V_15 | V_16 | V_17, {
981
981
  selector: string;
982
982
  attrs: Record<"data-scope" | "data-part", string>;
983
983
  }>;
984
984
  }, "parts">;
985
- build: () => Record<"title" | "description" | "root" | "closeButton" | V_10 | V_11 | V_12 | V_13 | V_14 | V_15 | V_16, {
985
+ build: () => Record<"group" | "root" | "title" | "description" | "closeTrigger" | V_10 | V_11 | V_12 | V_13 | V_14 | V_15 | V_16, {
986
986
  selector: string;
987
987
  attrs: Record<"data-scope" | "data-part", string>;
988
988
  }>;
989
989
  }, "parts">;
990
- build: () => Record<"title" | "description" | "root" | "closeButton" | V_10 | V_11 | V_12 | V_13 | V_14 | V_15, {
990
+ build: () => Record<"group" | "root" | "title" | "description" | "closeTrigger" | V_10 | V_11 | V_12 | V_13 | V_14 | V_15, {
991
991
  selector: string;
992
992
  attrs: Record<"data-scope" | "data-part", string>;
993
993
  }>;
994
994
  }, "parts">;
995
- build: () => Record<"title" | "description" | "root" | "closeButton" | V_10 | V_11 | V_12 | V_13 | V_14, {
995
+ build: () => Record<"group" | "root" | "title" | "description" | "closeTrigger" | V_10 | V_11 | V_12 | V_13 | V_14, {
996
996
  selector: string;
997
997
  attrs: Record<"data-scope" | "data-part", string>;
998
998
  }>;
999
999
  }, "parts">;
1000
- build: () => Record<"title" | "description" | "root" | "closeButton" | V_10 | V_11 | V_12 | V_13, {
1000
+ build: () => Record<"group" | "root" | "title" | "description" | "closeTrigger" | V_10 | V_11 | V_12 | V_13, {
1001
1001
  selector: string;
1002
1002
  attrs: Record<"data-scope" | "data-part", string>;
1003
1003
  }>;
1004
1004
  }, "parts">;
1005
- build: () => Record<"title" | "description" | "root" | "closeButton" | V_10 | V_11 | V_12, {
1005
+ build: () => Record<"group" | "root" | "title" | "description" | "closeTrigger" | V_10 | V_11 | V_12, {
1006
1006
  selector: string;
1007
1007
  attrs: Record<"data-scope" | "data-part", string>;
1008
1008
  }>;
1009
1009
  }, "parts">;
1010
- build: () => Record<"title" | "description" | "root" | "closeButton" | V_10 | V_11, {
1010
+ build: () => Record<"group" | "root" | "title" | "description" | "closeTrigger" | V_10 | V_11, {
1011
1011
  selector: string;
1012
1012
  attrs: Record<"data-scope" | "data-part", string>;
1013
1013
  }>;
1014
1014
  }, "parts">;
1015
- build: () => Record<"title" | "description" | "root" | "closeButton" | V_10, {
1015
+ build: () => Record<"group" | "root" | "title" | "description" | "closeTrigger" | V_10, {
1016
1016
  selector: string;
1017
1017
  attrs: Record<"data-scope" | "data-part", string>;
1018
1018
  }>;
1019
1019
  }, "parts">;
1020
- build: () => Record<"title" | "description" | "root" | "closeButton", {
1020
+ build: () => Record<"group" | "root" | "title" | "description" | "closeTrigger", {
1021
1021
  selector: string;
1022
1022
  attrs: Record<"data-scope" | "data-part", string>;
1023
1023
  }>;
@@ -1037,7 +1037,7 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
1037
1037
  rootProps: T["element"];
1038
1038
  titleProps: T["element"];
1039
1039
  descriptionProps: T["element"];
1040
- closeButtonProps: T["button"];
1040
+ closeTriggerProps: T["button"];
1041
1041
  render(): any;
1042
1042
  };
1043
1043
 
package/dist/index.js CHANGED
@@ -139,13 +139,18 @@ function warn(...a) {
139
139
  // src/toast-group.connect.ts
140
140
  var import_core = require("@zag-js/core");
141
141
 
142
+ // src/toast.anatomy.ts
143
+ var import_anatomy = require("@zag-js/anatomy");
144
+ var anatomy = (0, import_anatomy.createAnatomy)("toast").parts("group", "root", "title", "description", "closeTrigger");
145
+ var parts = anatomy.build();
146
+
142
147
  // src/toast.dom.ts
143
148
  var dom = defineDomHelpers({
144
149
  getGroupId: (placement) => `toast-group:${placement}`,
145
- getContainerId: (ctx) => `toast:${ctx.id}`,
146
- getTitleId: (ctx) => `toast-title:${ctx.id}`,
147
- getDescriptionId: (ctx) => `toast-description:${ctx.id}`,
148
- getCloseButtonId: (ctx) => `toast-close-button:${ctx.id}`,
150
+ getRootId: (ctx) => `toast:${ctx.id}`,
151
+ getTitleId: (ctx) => `toast:${ctx.id}:title`,
152
+ getDescriptionId: (ctx) => `toast:${ctx.id}:description`,
153
+ getCloseTriggerId: (ctx) => `toast${ctx.id}:close`,
149
154
  getPortalId: (ctx) => `toast-portal:${ctx.id}`,
150
155
  getPortalEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getPortalId(ctx)),
151
156
  createPortalEl: (ctx) => {
@@ -313,6 +318,7 @@ function groupConnect(state, send, normalize) {
313
318
  getGroupProps(options) {
314
319
  const { placement, label = "Notifications" } = options;
315
320
  return normalize.element({
321
+ ...parts.group.attrs,
316
322
  tabIndex: -1,
317
323
  "aria-label": label,
318
324
  id: dom.getGroupId(placement),
@@ -586,11 +592,6 @@ function groupMachine(userContext) {
586
592
  });
587
593
  }
588
594
 
589
- // src/toast.anatomy.ts
590
- var import_anatomy = require("@zag-js/anatomy");
591
- var anatomy = (0, import_anatomy.createAnatomy)("toast").parts("root", "title", "description", "closeButton");
592
- var parts = anatomy.build();
593
-
594
595
  // src/toast.connect.ts
595
596
  function connect(state, send, normalize) {
596
597
  const isVisible = state.hasTag("visible");
@@ -617,7 +618,7 @@ function connect(state, send, normalize) {
617
618
  rootProps: normalize.element({
618
619
  ...parts.root.attrs,
619
620
  dir: state.context.dir,
620
- id: dom.getContainerId(state.context),
621
+ id: dom.getRootId(state.context),
621
622
  "data-open": dataAttr(isVisible),
622
623
  "data-type": state.context.type,
623
624
  "data-placement": placement,
@@ -666,9 +667,9 @@ function connect(state, send, normalize) {
666
667
  ...parts.description.attrs,
667
668
  id: dom.getDescriptionId(state.context)
668
669
  }),
669
- closeButtonProps: normalize.button({
670
- id: dom.getCloseButtonId(state.context),
671
- ...parts.closeButton.attrs,
670
+ closeTriggerProps: normalize.button({
671
+ id: dom.getCloseTriggerId(state.context),
672
+ ...parts.closeTrigger.attrs,
672
673
  type: "button",
673
674
  "aria-label": "Dismiss notification",
674
675
  onClick() {
package/dist/index.mjs CHANGED
@@ -109,13 +109,18 @@ function warn(...a) {
109
109
  // src/toast-group.connect.ts
110
110
  import { subscribe } from "@zag-js/core";
111
111
 
112
+ // src/toast.anatomy.ts
113
+ import { createAnatomy } from "@zag-js/anatomy";
114
+ var anatomy = createAnatomy("toast").parts("group", "root", "title", "description", "closeTrigger");
115
+ var parts = anatomy.build();
116
+
112
117
  // src/toast.dom.ts
113
118
  var dom = defineDomHelpers({
114
119
  getGroupId: (placement) => `toast-group:${placement}`,
115
- getContainerId: (ctx) => `toast:${ctx.id}`,
116
- getTitleId: (ctx) => `toast-title:${ctx.id}`,
117
- getDescriptionId: (ctx) => `toast-description:${ctx.id}`,
118
- getCloseButtonId: (ctx) => `toast-close-button:${ctx.id}`,
120
+ getRootId: (ctx) => `toast:${ctx.id}`,
121
+ getTitleId: (ctx) => `toast:${ctx.id}:title`,
122
+ getDescriptionId: (ctx) => `toast:${ctx.id}:description`,
123
+ getCloseTriggerId: (ctx) => `toast${ctx.id}:close`,
119
124
  getPortalId: (ctx) => `toast-portal:${ctx.id}`,
120
125
  getPortalEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getPortalId(ctx)),
121
126
  createPortalEl: (ctx) => {
@@ -283,6 +288,7 @@ function groupConnect(state, send, normalize) {
283
288
  getGroupProps(options) {
284
289
  const { placement, label = "Notifications" } = options;
285
290
  return normalize.element({
291
+ ...parts.group.attrs,
286
292
  tabIndex: -1,
287
293
  "aria-label": label,
288
294
  id: dom.getGroupId(placement),
@@ -556,11 +562,6 @@ function groupMachine(userContext) {
556
562
  });
557
563
  }
558
564
 
559
- // src/toast.anatomy.ts
560
- import { createAnatomy } from "@zag-js/anatomy";
561
- var anatomy = createAnatomy("toast").parts("root", "title", "description", "closeButton");
562
- var parts = anatomy.build();
563
-
564
565
  // src/toast.connect.ts
565
566
  function connect(state, send, normalize) {
566
567
  const isVisible = state.hasTag("visible");
@@ -587,7 +588,7 @@ function connect(state, send, normalize) {
587
588
  rootProps: normalize.element({
588
589
  ...parts.root.attrs,
589
590
  dir: state.context.dir,
590
- id: dom.getContainerId(state.context),
591
+ id: dom.getRootId(state.context),
591
592
  "data-open": dataAttr(isVisible),
592
593
  "data-type": state.context.type,
593
594
  "data-placement": placement,
@@ -636,9 +637,9 @@ function connect(state, send, normalize) {
636
637
  ...parts.description.attrs,
637
638
  id: dom.getDescriptionId(state.context)
638
639
  }),
639
- closeButtonProps: normalize.button({
640
- id: dom.getCloseButtonId(state.context),
641
- ...parts.closeButton.attrs,
640
+ closeTriggerProps: normalize.button({
641
+ id: dom.getCloseTriggerId(state.context),
642
+ ...parts.closeTrigger.attrs,
642
643
  type: "button",
643
644
  "aria-label": "Dismiss notification",
644
645
  onClick() {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/toast",
3
- "version": "0.2.4",
3
+ "version": "0.2.5",
4
4
  "description": "Core logic for the toast widget implemented as a state machine",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
@@ -30,7 +30,7 @@
30
30
  },
31
31
  "dependencies": {
32
32
  "@zag-js/anatomy": "0.1.1",
33
- "@zag-js/core": "0.2.2",
33
+ "@zag-js/core": "0.2.3",
34
34
  "@zag-js/types": "0.3.1"
35
35
  },
36
36
  "devDependencies": {