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

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

export default function Example() {
  return (
    <Rating
      className=""
      defaultValue={3}
      id="movie-rating"
      slotProps={{
        input: { className: "" },
        label: { className: "" },
      }}
    />
  );
}

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

/* Rating — a native radio group of stars. Inputs are visually hidden;
   flex-direction: row-reverse restores left-to-right visual order over
   reversed DOM order. Each input+label pair sits in its own [data-part="item"]
   wrapper (ChoiceGroup's shape), so `~` alone can't reach across pairs —
   `:has()` promotes a checked/hovered item onto its later (= more-preferred,
   thanks to row-reverse) sibling wrappers. This keeps the uncontrolled rating functional without
   JavaScript. */

@layer components {
  [data-uiify-rating] {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: var(--space-xs);
  }

  [data-uiify-rating] > [data-part="item"] > input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  [data-uiify-rating] > [data-part="item"] > label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--input);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition-colors);
  }

  [data-uiify-rating] > [data-part="item"]:has(> input:checked) > label,
  [data-uiify-rating] > [data-part="item"]:has(> input:checked) ~ [data-part="item"] > label {
    color: var(--primary);
  }

  [data-uiify-rating]:not([data-disabled], [data-readonly])
    > [data-part="item"]:has(> label:hover)
    > label,
  [data-uiify-rating]:not([data-disabled], [data-readonly])
    > [data-part="item"]:has(> label:hover)
    ~ [data-part="item"]
    > label {
    color: var(--primary);
  }

  [data-uiify-rating] > [data-part="item"] > input:focus-visible ~ label {
    outline: none;
    box-shadow: 0 0 0 var(--ring-width) color-mix(in oklch, var(--ring) 20%, transparent);
    border-radius: var(--radius-xs);
  }

  [data-uiify-rating][data-readonly] > [data-part="item"] > label {
    cursor: default;
  }

  [data-uiify-rating][data-disabled] > [data-part="item"] > label {
    cursor: default;
    opacity: 0.5;
  }
}

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

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

export default function Example() {
  return (
    <Rating
      className="
        group/rating inline-flex [flex-direction:row-reverse] gap-xs
        [&>[data-part=item]:has(>input:checked)>label]:text-primary
        [&>[data-part=item]:has(>input:checked)~[data-part=item]>label]:text-primary
        [&:not([data-disabled],[data-readonly])>[data-part=item]:has(>label:hover)>label]:text-primary
        [&:not([data-disabled],[data-readonly])>[data-part=item]:has(>label:hover)~[data-part=item]>label]:text-primary
      "
      defaultValue={3}
      id="movie-rating"
      slotProps={{
        input: {
          className:
            "peer absolute [inline-size:1px] [block-size:1px] [margin:-1px] overflow-hidden " +
            "[clip-path:inset(50%)] whitespace-nowrap",
        },
        label: {
          className:
            "inline-flex items-center justify-center text-input [font-size:1.5rem] " +
            "leading-none cursor-pointer [transition:var(--transition-colors)] " +
            "peer-checked:text-primary peer-focus-visible:[outline:none] " +
            "peer-focus-visible:[box-shadow:0_0_0_var(--ring-width)_color-mix(in_oklch,_var(--ring)_20%,_transparent)] " +
            "peer-focus-visible:rounded-xs group-data-[readonly]/rating:cursor-default " +
            "group-data-[disabled]/rating:cursor-default " +
            "group-data-[disabled]/rating:opacity-50",
        },
      }}
    />
  );
}