1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21

"use client";

import { Toast, useToast } from "@gunkin/uiify";

function ShowToast() {
  const { toast } = useToast();
  return (
    <button className="" type="button" onClick={() => toast({ title: "Saved" })}>
      Save
    </button>
  );
}

export default function Example() {
  return (
    <Toast.Provider>
      <ShowToast />
      <Toast.Viewport className="" />
    </Toast.Provider>
  );
}

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46
47. 47
48. 48
49. 49
50. 50
51. 51
52. 52
53. 53
54. 54
55. 55
56. 56
57. 57
58. 58
59. 59
60. 60
61. 61
62. 62
63. 63
64. 64
65. 65
66. 66
67. 67
68. 68
69. 69
70. 70
71. 71
72. 72
73. 73
74. 74
75. 75
76. 76
77. 77
78. 78
79. 79
80. 80
81. 81
82. 82
83. 83
84. 84
85. 85
86. 86
87. 87
88. 88
89. 89
90. 90
91. 91
92. 92
93. 93
94. 94
95. 95
96. 96
97. 97
98. 98
99. 99
100. 100
101. 101
102. 102
103. 103

/* Toast — a fixed viewport stacking cards in the corner, promoted to the top
   layer via [popover]. inset: auto overrides the UA popover default of
   inset: 0 so the corner offsets below can apply; the top-layer stack is
   ordered by show order, not z-index, so no manual z-index is needed. Cards
   use `data-part="item"`. Cards enter, leave, and restack through React view
   transitions (view-transition-class `uiify-toast`) with the shared presence
   motion; the snapshots hang off the root, so they read root tokens only. */

@layer components {
  [data-uiify-toast] [data-part="viewport"]:where(:not([popover]), :popover-open),
  [data-uiify-toast][data-part="viewport"]:where(:not([popover]), :popover-open) {
    display: flex;
  }

  [data-uiify-toast] [data-part="viewport"],
  [data-uiify-toast][data-part="viewport"] {
    position: fixed;
    inset: auto;
    inset-block-end: var(--space-lg);
    inset-inline-end: var(--space-lg);
    flex-direction: column;
    gap: var(--space-sm);
    inline-size: min(24rem, calc(100vw - 2 * var(--space-lg)));
    margin: 0;
    padding: 0;

    /* Cancels the UA popover default (`border: solid` + Canvas background) —
       the viewport is a transparent stacking container; cards carry their
       own border and background. */
    border: none;
    background: none;
    list-style: none;
  }

  [data-uiify-toast] [data-part="item"],
  [data-uiify-toast][data-part="viewport"] [data-part="item"] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-lg);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-lg);
    background-color: var(--popover);
    color: var(--popover-foreground);
    box-shadow: var(--shadow-popover);
    margin: 0;
    min-inline-size: 0;
  }

  [data-uiify-toast] [data-part="close"] {
    align-self: flex-end;
    min-block-size: 30px;
    padding-block: 0;
    padding-inline: var(--space-sm);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--popover-foreground);
    font: inherit;
    cursor: pointer;
  }

  [data-uiify-toast] [data-part="close"]:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
  }

  @media (hover: hover) and (pointer: fine) {
    [data-uiify-toast] [data-part="close"]:hover {
      background-color: var(--accent);
      color: var(--accent-foreground);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    ::view-transition-group(.uiify-toast) {
      animation-duration: var(--duration-fast);
      animation-timing-function: var(--ease-out);
    }

    ::view-transition-new(.uiify-toast):only-child {
      animation: uiify-presence-in var(--duration-fast) var(--ease-out) both;
    }

    ::view-transition-old(.uiify-toast):only-child {
      animation: uiify-presence-out var(--duration-fast) var(--ease-out) both;
    }
  }

  @keyframes uiify-presence-in {
    from {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }

  @keyframes uiify-presence-out {
    to {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46
47. 47
48. 48
49. 49
50. 50
51. 51
52. 52
53. 53
54. 54
55. 55
56. 56
57. 57
58. 58
59. 59
60. 60
61. 61
62. 62
63. 63
64. 64

"use client";

import { Toast, useToast } from "@gunkin/uiify";

function ShowToast() {
  const { toast } = useToast();
  return (
    <button
      className={
        "relative isolate inline-flex items-center justify-center gap-1.5 min-h-10 min-w-10 px-5 py-px border-[lengt" +
        "h:var(--border-width)] border-solid border-transparent rounded-full bg-clip-padding text-base font-medium l" +
        "eading-6 no-underline cursor-pointer [transition:var(--transition-colors)] focus-visible:[outline:none] foc" +
        "us-visible:[box-shadow:0_0_0_var(--ring-width)_color-mix(in_oklch,_var(--ring)_20%,_transparent)] disabled:" +
        "opacity-50 disabled:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed [&:is(" +
        "[data-selected],[aria-pressed=true],[aria-current=page])]:[--uiify-button-rim:rgb(255_255_255_/_20%)] [&:is" +
        "([data-selected],[aria-pressed=true],[aria-current=page])]:[--uiify-button-wash:rgb(255_255_255_/_15%)] [&:" +
        "is([data-selected],[aria-pressed=true],[aria-current=page])]:border-transparent [&:is([data-selected],[aria" +
        "-pressed=true],[aria-current=page])]:bg-primary [&:is([data-selected],[aria-pressed=true],[aria-current=pag" +
        "e])]:text-primary-foreground [:checked+&]:[--uiify-button-rim:rgb(255_255_255_/_20%)] [:checked+&]:[--uiify" +
        "-button-wash:rgb(255_255_255_/_15%)] [:checked+&]:border-transparent [:checked+&]:bg-primary [:checked+&]:t" +
        "ext-primary-foreground [@media_(any-hover:_hover)_and_(any-pointer:_fine)]:[&:is([data-selected],[aria-pres" +
        "sed=true],[aria-current=page]):hover:not(:disabled,[data-disabled])]:[background-color:color-mix(in_oklch,_" +
        "var(--primary)_88%,_var(--primary-foreground))] [@media_(any-hover:_hover)_and_(any-pointer:_fine)]:[:check" +
        "ed:not(:disabled)+&:hover]:[background-color:color-mix(in_oklch,_var(--primary)_88%,_var(--primary-foregrou" +
        "nd))] bg-foreground text-background [@media_(any-hover:_hover)_and_(any-pointer:_fine)]:hover:[&:not(:disab" +
        "led,[data-disabled])]:[background-color:color-mix(in_oklch,_var(--foreground)_90%,_var(--background))] acti" +
        "ve:[&:not(:disabled,[data-disabled])]:[background-color:color-mix(in_oklch,_var(--foreground)_80%,_var(--ba" +
        "ckground))]"
      }
      type="button"
      onClick={() => toast({ title: "Saved" })}
    >
      Save
    </button>
  );
}

export default function Example() {
  return (
    <Toast.Provider>
      <ShowToast />
      <Toast.Viewport
        className="
          fixed [inset:auto] [inset-block-end:var(--space-lg)] [inset-inline-end:var(--space-lg)] flex-col gap-sm
          [inline-size:min(24rem,calc(100vw_-_2_*_var(--space-lg)))] m-0 p-0 border-0 border-none bg-transparent
          list-none [&:where(:not([popover]),:popover-open)]:flex [&_[data-part=item]]:flex
          [&_[data-part=item]]:flex-col [&_[data-part=item]]:gap-xs
          [&_[data-part=item]]:[padding:var(--space-md)_var(--space-lg)]
          [&_[data-part=item]]:border-[length:var(--border-width)] [&_[data-part=item]]:border-solid
          [&_[data-part=item]]:border-border [&_[data-part=item]]:rounded-lg [&_[data-part=item]]:bg-popover
          [&_[data-part=item]]:text-popover-foreground [&_[data-part=item]]:shadow-popover [&_[data-part=item]]:m-0
          [&_[data-part=item]]:[min-inline-size:0] [&_[data-part=close]]:self-end
          [&_[data-part=close]]:[min-block-size:30px] [&_[data-part=close]]:py-0 [&_[data-part=close]]:px-sm
          [&_[data-part=close]]:border-0 [&_[data-part=close]]:border-none [&_[data-part=close]]:rounded-md
          [&_[data-part=close]]:bg-transparent [&_[data-part=close]]:text-popover-foreground
          [&_[data-part=close]]:cursor-pointer [&_[data-part=close]:focus-visible]:outline-2
          [&_[data-part=close]:focus-visible]:outline-ring [&_[data-part=close]:focus-visible]:outline-offset-2
          [@media_(hover:_hover)_and_(pointer:_fine)]:[&_[data-part=close]:hover]:bg-accent
          [@media_(hover:_hover)_and_(pointer:_fine)]:[&_[data-part=close]:hover]:text-accent-foreground
        "
      />
    </Toast.Provider>
  );
}