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

import { Accordion } from "@gunkin/uiify";

export default function Example() {
  return (
    <Accordion
      className=""
      id="faq"
      type="single"
      defaultValue="shipping"
      slotProps={{
        item: { className: "" },
        trigger: { className: "" },
        panel: { className: "" },
      }}
      items={[
        { value: "shipping", label: "Shipping", panel: <>Ships in 2–3 days.</> },
        { value: "returns", label: "Returns", panel: <>Returns are accepted for 30 days.</> },
      ]}
    />
  );
}

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
104. 104
105. 105

/* Accordion — built on native <details>/<summary>. Item is the <details>,
   trigger the <summary>, content a div. A rotating chevron tracks open state.
   [data-part] selectors keep the public anatomy independent from consumer classes. */

@layer components {
  :where([data-uiify-accordion]) {
    inline-size: 100%;
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
  }

  [data-uiify-accordion] > [data-part="item"] {
    border-block-end: var(--border-width) solid var(--border);
  }

  [data-uiify-accordion] > [data-part="item"]:last-child {
    border-block-end: none;
  }

  [data-uiify-accordion] [data-part="trigger"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-lg);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    font-weight: var(--weight-medium);
    cursor: pointer;
    list-style: none;
  }

  [data-uiify-accordion] [data-part="trigger"]::-webkit-details-marker {
    display: none;
  }

  [data-uiify-accordion] [data-part="trigger"]:hover {
    background-color: var(--secondary);
  }

  [data-uiify-accordion] [data-part="trigger"]:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 var(--ring-width) color-mix(in oklch, var(--ring) 20%, transparent);
  }

  /* Chevron. */
  [data-uiify-accordion] [data-part="trigger"]::after {
    content: "+";
    display: grid;
    place-items: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    flex: 0 0 1.5rem;
    color: var(--muted-foreground);
    font:
      1.25rem/1 ui-monospace,
      monospace;
    transition: rotate var(--duration-fast) var(--ease-out);
  }

  [data-uiify-accordion] [data-part="item"][open] > [data-part="trigger"]::after {
    content: "−";
  }

  [data-uiify-accordion] [data-part="item"][open] > [data-part="trigger"] {
    color: var(--primary);
  }

  [data-uiify-accordion] {
    interpolate-size: allow-keywords;
  }

  [data-uiify-accordion] > [data-part="item"]::details-content {
    block-size: 0;
    overflow: clip;
  }

  [data-uiify-accordion] > [data-part="item"][open]::details-content {
    block-size: auto;
  }

  /* Shared presence timing; block-size only interpolates where the block above applies. */
  @media (prefers-reduced-motion: no-preference) {
    [data-uiify-accordion] > [data-part="item"]::details-content {
      opacity: 0;
      transition:
        opacity var(--duration-fast) var(--ease-out),
        block-size var(--duration-fast) var(--ease-out),
        content-visibility var(--duration-fast) allow-discrete;
    }

    [data-uiify-accordion] > [data-part="item"][open]::details-content {
      opacity: 1;
    }
  }

  [data-uiify-accordion] [data-part="panel"] {
    padding-block: 0 var(--space-lg);
    padding-inline: var(--space-lg);
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
  }
}

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

import { Accordion } from "@gunkin/uiify";

export default function Example() {
  return (
    <Accordion
      className="
        [inline-size:100%] border-[length:var(--border-width)] border-solid border-border rounded-xl overflow-hidden
        [interpolate-size:allow-keywords]
      "
      id="faq"
      type="single"
      defaultValue="shipping"
      slotProps={{
        item: {
          className: "[border-block-end:var(--border-width)_solid_var(--border)] " + "last:[border-block-end:none]",
        },
        trigger: {
          className:
            "flex items-center justify-between gap-md p-lg text-sm " +
            "[line-height:var(--leading-normal)] font-[number:var(--weight-medium)] " +
            "cursor-pointer list-none [&::-webkit-details-marker]:hidden hover:bg-secondary " +
            "focus-visible:[outline:none] " +
            "focus-visible:[box-shadow:inset_0_0_0_var(--ring-width)_color-mix(in_oklch,_var(--ring)_20%,_transparent)]",
        },
        panel: {
          className:
            "[padding-block:0_var(--space-lg)] px-lg text-muted-foreground text-sm " +
            "[line-height:var(--leading-normal)]",
        },
      }}
      items={[
        { value: "shipping", label: "Shipping", panel: <>Ships in 2–3 days.</> },
        { value: "returns", label: "Returns", panel: <>Returns are accepted for 30 days.</> },
      ]}
    />
  );
}