1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11

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

export default function Example() {
  return (
    <NumberField.Root className="" defaultValue={1} min={0} max={10}>
      <NumberField.Decrement className="" aria-label="Decrease" />
      <NumberField.Input className="" aria-label="Quantity" />
      <NumberField.Increment className="" aria-label="Increase" />
    </NumberField.Root>
  );
}

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
106. 106
107. 107
108. 108
109. 109
110. 110
111. 111
112. 112
113. 113
114. 114

/* Number field — spinbutton with increment/decrement controls. */

@layer components {
  [data-uiify-number-field] {
    display: inline-flex;
    align-items: stretch;
    border: var(--border-width) solid var(--input);
    border-radius: var(--radius-md);
    background-color: var(--card);
    overflow: hidden;
  }

  [data-uiify-number-field] > [role="spinbutton"],
  [data-uiify-number-field] > [data-part="group"] > [role="spinbutton"] {
    inline-size: 4rem;
    min-block-size: 36px;
    line-height: 1.25rem;
    padding-block: 0;
    padding-inline: var(--space-md);
    border: none;
    background: none;
    color: var(--foreground);
    font-size: var(--uiify-control-text);
    text-align: center;
    outline: none;
  }

  [data-uiify-number-field]:focus-within {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
  }

  [data-uiify-number-field] :focus-visible {
    outline: none;
  }

  [data-uiify-number-field] > button,
  [data-uiify-number-field] > [data-part="group"] > button,
  [data-uiify-number-field] > [data-part="group"] > [data-part="increment"],
  [data-uiify-number-field] > [data-part="group"] > [data-part="decrement"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    inline-size: 36px;
    block-size: 36px;
    padding: 0;
    border: none;
    border-inline-start: var(--border-width) solid var(--border);
    background-color: transparent;
    color: var(--foreground);
    font-size: var(--text-lg);
    line-height: 1;
    cursor: pointer;
    transition: var(--transition-colors);
  }

  [data-uiify-number-field] > button:empty::before,
  [data-uiify-number-field] > [data-part="group"] > button:empty::before,
  [data-uiify-number-field] > [data-part="group"] > [data-part="increment"]:empty::before,
  [data-uiify-number-field] > [data-part="group"] > [data-part="decrement"]:empty::before {
    display: block;
  }

  [data-uiify-number-field] > button:first-child:empty::before,
  [data-uiify-number-field] > [data-part="group"] > button:first-child:empty::before,
  [data-uiify-number-field]
    > [data-part="group"]
    > [data-part="decrement"]:first-child:empty::before {
    content: "←" / "";
  }

  [data-uiify-number-field] > button:last-child:empty::before,
  [data-uiify-number-field] > [data-part="group"] > button:last-child:empty::before,
  [data-uiify-number-field]
    > [data-part="group"]
    > [data-part="increment"]:last-child:empty::before {
    content: "→" / "";
  }

  [data-uiify-number-field]:dir(rtl) > button:empty::before,
  [data-uiify-number-field]:dir(rtl) > [data-part="group"] > button:empty::before,
  [data-uiify-number-field]:dir(rtl) > [data-part="group"] > [data-part="increment"]:empty::before,
  [data-uiify-number-field]:dir(rtl) > [data-part="group"] > [data-part="decrement"]:empty::before {
    scale: -1 1;
  }

  [data-uiify-number-field] > button:first-child,
  [data-uiify-number-field] > [data-part="group"] > button:first-child,
  [data-uiify-number-field] > [data-part="group"] > [data-part="decrement"]:first-child {
    border-inline-start: none;
    border-inline-end: var(--border-width) solid var(--border);
  }

  [data-uiify-number-field] > button:hover,
  [data-uiify-number-field] > [data-part="group"] > button:hover,
  [data-uiify-number-field] > [data-part="group"] > [data-part="increment"]:hover,
  [data-uiify-number-field] > [data-part="group"] > [data-part="decrement"]:hover {
    background-color: color-mix(in oklch, var(--foreground) 8%, transparent);
  }

  [data-uiify-number-field] > button[data-disabled],
  [data-uiify-number-field] > [data-part="group"] > button[data-disabled],
  [data-uiify-number-field] > [data-part="group"] > [data-part="increment"][data-disabled],
  [data-uiify-number-field] > [data-part="group"] > [data-part="decrement"][data-disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  [data-uiify-number-field] > [data-part="group"] {
    display: inline-flex;
    align-items: stretch;
  }
}

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

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

export default function Example() {
  return (
    <NumberField.Root
      className="
        inline-flex items-stretch border-[length:var(--border-width)] border-solid border-input rounded-md bg-card
        overflow-hidden focus-within:[outline:2px_solid_var(--ring)] focus-within:[outline-offset:2px]
      "
      defaultValue={1}
      min={0}
      max={10}
    >
      <NumberField.Decrement
        className={
          "inline-flex items-center justify-center flex-none [inline-size:36px] [block-size:36px] p-0 border-0 borde" +
          "r-current border-none [border-inline-start-width:var(--border-width)] [border-inline-start-style:solid] [" +
          "border-inline-start-color:var(--border)] bg-transparent text-foreground text-lg leading-none cursor-point" +
          "er [transition:var(--transition-colors)] hover:[background-color:color-mix(in_oklch,_var(--foreground)_8%" +
          ",_transparent)] data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed empty:before:block first:[b" +
          "order-inline-start:none] first:[border-inline-end-width:var(--border-width)] first:[border-inline-end-sty" +
          "le:solid] first:[border-inline-end-color:var(--border)] empty:before:content-[\"←\"_/_\"\"] rtl:empty:before:" +
          "[scale:-1_1]"
        }
        aria-label="Decrease"
      />
      <NumberField.Input
        className="
          [inline-size:4rem] [min-block-size:36px] leading-5 py-0 px-md border-0 border-current border-none bg-none
          bg-transparent text-foreground [font-size:var(--uiify-control-text)] text-center outline-none
        "
        aria-label="Quantity"
      />
      <NumberField.Increment
        className={
          "inline-flex items-center justify-center flex-none [inline-size:36px] [block-size:36px] p-0 border-0 borde" +
          "r-current border-none [border-inline-start-width:var(--border-width)] [border-inline-start-style:solid] [" +
          "border-inline-start-color:var(--border)] bg-transparent text-foreground text-lg leading-none cursor-point" +
          "er [transition:var(--transition-colors)] hover:[background-color:color-mix(in_oklch,_var(--foreground)_8%" +
          ",_transparent)] data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed empty:before:block empty:be" +
          "fore:content-[\"→\"_/_\"\"] rtl:empty:before:[scale:-1_1]"
        }
        aria-label="Increase"
      />
    </NumberField.Root>
  );
}