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

import { PopupClose, PopupContent, PopupTrigger } from "@gunkin/uiify";

export default function Example() {
  return (
    <div data-part="root" data-uiify-popup="">
      <PopupTrigger className="" target="actions-popover">
        Actions
      </PopupTrigger>
      <PopupContent className="" id="actions-popover" mode="auto" side="bottom" align="center">
        <a href="/profile">Profile</a>
        <PopupClose className="" target="actions-popover">
          Close
        </PopupClose>
      </PopupContent>
    </div>
  );
}

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

/* Popup, popover, and tooltip surfaces. */

@layer components {
  :where(
    [data-uiify-popover][data-part="surface"],
    [data-uiify-popup][data-part="content"],
    [data-uiify-hover-card][data-part="content"]
  ):where(:not([popover]), :popover-open) {
    display: flex;
  }

  :where(
    [data-uiify-popover][data-part="surface"],
    [data-uiify-popup][data-part="content"],
    [data-uiify-hover-card][data-part="content"]
  ) {
    flex-direction: column;
    gap: var(--space-sm);
    inline-size: max-content;
    max-inline-size: 18rem;
    padding: var(--space-md);
    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);
  }

  :where(
    [data-uiify-popover][data-part="surface"],
    [data-uiify-popup][data-part="content"],
    [data-uiify-hover-card][data-part="content"]
  )[data-state="closed"] {
    display: none;
  }

  [data-uiify-tooltip]:where(:not([popover]), :popover-open) {
    display: block;
  }

  [data-uiify-tooltip] {
    inline-size: max-content;
    max-inline-size: 16rem;
    padding-block: var(--space-xs);
    padding-inline: var(--space-sm);

    /* Cancels the UA popover default (`border: solid`, currentColor) — this
       surface is borderless by design. */
    border: none;
    border-radius: var(--radius-sm);
    background-color: var(--foreground);
    color: var(--background);
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
    box-shadow: var(--shadow-popover);
  }

  :where([data-uiify-tooltip])[data-state="closed"] {
    display: none;
  }

  @media (prefers-reduced-motion: no-preference) {
    :where(
      [data-uiify-popover][data-part="surface"],
      [data-uiify-popup][data-part="content"],
      [data-uiify-hover-card][data-part="content"],
      [data-uiify-tooltip]
    ) {
      transition: var(--transition-presence);
    }

    :where(
        [data-uiify-popover][data-part="surface"],
        [data-uiify-popup][data-part="content"],
        [data-uiify-hover-card][data-part="content"],
        [data-uiify-tooltip]
      )[popover]:not(:popover-open) {
      opacity: 0;
      scale: var(--presence-scale);
    }

    @starting-style {
      :where(
        [data-uiify-popover][data-part="surface"],
        [data-uiify-popup][data-part="content"],
        [data-uiify-hover-card][data-part="content"],
        [data-uiify-tooltip]
      ):popover-open {
        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
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

import { PopupClose, PopupContent, PopupTrigger } from "@gunkin/uiify";

export default function Example() {
  return (
    <div data-part="root" data-uiify-popup="">
      <PopupTrigger
        className={
          "relative isolate inline-flex items-center justify-center gap-1.5 min-h-10 min-w-10 px-5 py-px border-[len" +
          "gth:var(--border-width)] border-solid border-transparent rounded-full bg-clip-padding text-base font-medi" +
          "um leading-6 no-underline cursor-pointer [transition:var(--transition-colors)] focus-visible:[outline:non" +
          "e] focus-visible:[box-shadow:0_0_0_var(--ring-width)_color-mix(in_oklch,_var(--ring)_20%,_transparent)] d" +
          "isabled:opacity-50 disabled:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:cursor-not-allo" +
          "wed [&: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_2" +
          "55_/_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=page])]: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+&]:text-primary-foreground [@media_(any-hover:_hover)_and_(any-pointer:_fine)]:[&:is([d" +
          "ata-selected],[aria-pressed=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)]:[:checked:not(:disabled)+&:hover]:[background-color:color-mix(in_oklch,_var(--primar" +
          "y)_88%,_var(--primary-foreground))] bg-foreground text-background [@media_(any-hover:_hover)_and_(any-poi" +
          "nter:_fine)]:hover:[&:not(:disabled,[data-disabled])]:[background-color:color-mix(in_oklch,_var(--foregro" +
          "und)_90%,_var(--background))] active:[&:not(:disabled,[data-disabled])]:[background-color:color-mix(in_ok" +
          "lch,_var(--foreground)_80%,_var(--background))]"
        }
        target="actions-popover"
      >
        Actions
      </PopupTrigger>
      <PopupContent
        className="
          [&[data-positioning=native]]:[--uiify-anchor-offset:var(--space-sm)]
          [&_[data-positioning=native]]:[--uiify-anchor-offset:var(--space-sm)]
          [&[popover]:popover-open:not([data-positioning=native])]:[margin:revert]
          [&_[popover]:popover-open:not([data-positioning=native])]:[margin:revert] flex-col gap-sm w-max max-w-72 p-md
          border-[length:var(--border-width)] border-solid border-border rounded-lg bg-popover text-popover-foreground
          shadow-popover [&:where(:not([popover]),:popover-open)]:flex data-[state=closed]:hidden
          [&[data-positioning=native]]:[--uiify-anchor-offset:var(--space-sm)]
          motion-safe:[transition:var(--transition-presence)] motion-safe:[&:not(:popover-open)]:opacity-0
          motion-safe:[&:not(:popover-open)]:[scale:var(--presence-scale)]
          motion-safe:starting:[&:popover-open]:opacity-0
          motion-safe:starting:[&:popover-open]:[scale:var(--presence-scale)]
        "
        id="actions-popover"
        mode="auto"
        side="bottom"
        align="center"
      >
        <a href="/profile">Profile</a>
        <PopupClose
          className={
            "relative isolate inline-flex items-center justify-center gap-1.5 min-h-10 min-w-10 px-5 py-px border-[l" +
            "ength:var(--border-width)] border-solid border-transparent rounded-full bg-clip-padding text-base font-" +
            "medium leading-6 no-underline cursor-pointer [transition:var(--transition-colors)] focus-visible:[outli" +
            "ne:none] focus-visible:[box-shadow:0_0_0_var(--ring-width)_color-mix(in_oklch,_var(--ring)_20%,_transpa" +
            "rent)] disabled:opacity-50 disabled:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:curso" +
            "r-not-allowed [&:is([data-selected],[aria-pressed=true],[aria-current=page])]:[--uiify-button-rim:rgb(2" +
            "55_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-transpa" +
            "rent [&:is([data-selected],[aria-pressed=true],[aria-current=page])]:bg-primary [&:is([data-selected],[" +
            "aria-pressed=true],[aria-current=page])]:text-primary-foreground [:checked+&]:[--uiify-button-rim:rgb(2" +
            "55_255_255_/_20%)] [:checked+&]:[--uiify-button-wash:rgb(255_255_255_/_15%)] [:checked+&]:border-transp" +
            "arent [:checked+&]:bg-primary [:checked+&]:text-primary-foreground [@media_(any-hover:_hover)_and_(any-" +
            "pointer:_fine)]:[&:is([data-selected],[aria-pressed=true],[aria-current=page]):hover:not(:disabled,[dat" +
            "a-disabled])]:[background-color:color-mix(in_oklch,_var(--primary)_88%,_var(--primary-foreground))] [@m" +
            "edia_(any-hover:_hover)_and_(any-pointer:_fine)]:[:checked:not(:disabled)+&:hover]:[background-color:co" +
            "lor-mix(in_oklch,_var(--primary)_88%,_var(--primary-foreground))] bg-transparent text-foreground before" +
            ":content-none after:content-none hover:[&:not(:disabled,[data-disabled])]:[background-color:color-mix(i" +
            "n_oklch,_var(--foreground)_10%,_transparent)] active:[&:not(:disabled,[data-disabled])]:[background-col" +
            "or:color-mix(in_oklch,_var(--foreground)_16%,_transparent)]"
          }
          target="actions-popover"
        >
          Close
        </PopupClose>
      </PopupContent>
    </div>
  );
}