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 aria-label="Decrease" />
      <NumberField.Input aria-label="Quantity" />
      <NumberField.Increment 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
115. 115

/* 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);
    corner-shape: squircle;
    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
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

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 [corner-" +
        "shape:squircle] bg-card overflow-hidden [&>[role=spinbutton]]:[inline-size:4rem] [&>[role=spinbutton]]:[min" +
        "-block-size:36px] [&>[role=spinbutton]]:leading-5 [&>[role=spinbutton]]:py-0 [&>[role=spinbutton]]:px-md [&" +
        ">[role=spinbutton]]:border-0 [&>[role=spinbutton]]:border-current [&>[role=spinbutton]]:border-none [&>[rol" +
        "e=spinbutton]]:bg-none [&>[role=spinbutton]]:bg-transparent [&>[role=spinbutton]]:text-foreground [&>[role=" +
        "spinbutton]]:[font-size:var(--uiify-control-text)] [&>[role=spinbutton]]:text-center [&>[role=spinbutton]]:" +
        "[outline:none] [&>[data-part=group]>[role=spinbutton]]:[inline-size:4rem] [&>[data-part=group]>[role=spinbu" +
        "tton]]:[min-block-size:36px] [&>[data-part=group]>[role=spinbutton]]:leading-5 [&>[data-part=group]>[role=s" +
        "pinbutton]]:py-0 [&>[data-part=group]>[role=spinbutton]]:px-md [&>[data-part=group]>[role=spinbutton]]:bord" +
        "er-0 [&>[data-part=group]>[role=spinbutton]]:border-current [&>[data-part=group]>[role=spinbutton]]:border-" +
        "none [&>[data-part=group]>[role=spinbutton]]:bg-none [&>[data-part=group]>[role=spinbutton]]:bg-transparent" +
        " [&>[data-part=group]>[role=spinbutton]]:text-foreground [&>[data-part=group]>[role=spinbutton]]:[font-size" +
        ":var(--uiify-control-text)] [&>[data-part=group]>[role=spinbutton]]:text-center [&>[data-part=group]>[role=" +
        "spinbutton]]:[outline:none] focus-within:[outline:2px_solid_var(--ring)] focus-within:[outline-offset:2px] " +
        "[&_:focus-visible]:[outline:none] [&>button]:inline-flex [&>button]:items-center [&>button]:justify-center " +
        "[&>button]:flex-none [&>button]:[inline-size:36px] [&>button]:[block-size:36px] [&>button]:p-0 [&>button]:b" +
        "order-0 [&>button]:border-current [&>button]:border-none [&>button]:[border-inline-start-width:var(--border" +
        "-width)] [&>button]:[border-inline-start-style:solid] [&>button]:[border-inline-start-color:var(--border)] " +
        "[&>button]:bg-transparent [&>button]:text-foreground [&>button]:text-lg [&>button]:leading-none [&>button]:" +
        "cursor-pointer [&>button]:[transition:var(--transition-colors)] [&>[data-part=group]>button]:inline-flex [&" +
        ">[data-part=group]>button]:items-center [&>[data-part=group]>button]:justify-center [&>[data-part=group]>bu" +
        "tton]:flex-none [&>[data-part=group]>button]:[inline-size:36px] [&>[data-part=group]>button]:[block-size:36" +
        "px] [&>[data-part=group]>button]:p-0 [&>[data-part=group]>button]:border-0 [&>[data-part=group]>button]:bor" +
        "der-current [&>[data-part=group]>button]:border-none [&>[data-part=group]>button]:[border-inline-start-widt" +
        "h:var(--border-width)] [&>[data-part=group]>button]:[border-inline-start-style:solid] [&>[data-part=group]>" +
        "button]:[border-inline-start-color:var(--border)] [&>[data-part=group]>button]:bg-transparent [&>[data-part" +
        "=group]>button]:text-foreground [&>[data-part=group]>button]:text-lg [&>[data-part=group]>button]:leading-n" +
        "one [&>[data-part=group]>button]:cursor-pointer [&>[data-part=group]>button]:[transition:var(--transition-c" +
        "olors)] [&>[data-part=group]>[data-part=increment]]:inline-flex [&>[data-part=group]>[data-part=increment]]" +
        ":items-center [&>[data-part=group]>[data-part=increment]]:justify-center [&>[data-part=group]>[data-part=in" +
        "crement]]:flex-none [&>[data-part=group]>[data-part=increment]]:[inline-size:36px] [&>[data-part=group]>[da" +
        "ta-part=increment]]:[block-size:36px] [&>[data-part=group]>[data-part=increment]]:p-0 [&>[data-part=group]>" +
        "[data-part=increment]]:border-0 [&>[data-part=group]>[data-part=increment]]:border-current [&>[data-part=gr" +
        "oup]>[data-part=increment]]:border-none [&>[data-part=group]>[data-part=increment]]:[border-inline-start-wi" +
        "dth:var(--border-width)] [&>[data-part=group]>[data-part=increment]]:[border-inline-start-style:solid] [&>[" +
        "data-part=group]>[data-part=increment]]:[border-inline-start-color:var(--border)] [&>[data-part=group]>[dat" +
        "a-part=increment]]:bg-transparent [&>[data-part=group]>[data-part=increment]]:text-foreground [&>[data-part" +
        "=group]>[data-part=increment]]:text-lg [&>[data-part=group]>[data-part=increment]]:leading-none [&>[data-pa" +
        "rt=group]>[data-part=increment]]:cursor-pointer [&>[data-part=group]>[data-part=increment]]:[transition:var" +
        "(--transition-colors)] [&>[data-part=group]>[data-part=decrement]]:inline-flex [&>[data-part=group]>[data-p" +
        "art=decrement]]:items-center [&>[data-part=group]>[data-part=decrement]]:justify-center [&>[data-part=group" +
        "]>[data-part=decrement]]:flex-none [&>[data-part=group]>[data-part=decrement]]:[inline-size:36px] [&>[data-" +
        "part=group]>[data-part=decrement]]:[block-size:36px] [&>[data-part=group]>[data-part=decrement]]:p-0 [&>[da" +
        "ta-part=group]>[data-part=decrement]]:border-0 [&>[data-part=group]>[data-part=decrement]]:border-current [" +
        "&>[data-part=group]>[data-part=decrement]]:border-none [&>[data-part=group]>[data-part=decrement]]:[border-" +
        "inline-start-width:var(--border-width)] [&>[data-part=group]>[data-part=decrement]]:[border-inline-start-st" +
        "yle:solid] [&>[data-part=group]>[data-part=decrement]]:[border-inline-start-color:var(--border)] [&>[data-p" +
        "art=group]>[data-part=decrement]]:bg-transparent [&>[data-part=group]>[data-part=decrement]]:text-foregroun" +
        "d [&>[data-part=group]>[data-part=decrement]]:text-lg [&>[data-part=group]>[data-part=decrement]]:leading-n" +
        "one [&>[data-part=group]>[data-part=decrement]]:cursor-pointer [&>[data-part=group]>[data-part=decrement]]:" +
        "[transition:var(--transition-colors)] [&>button:empty::before]:block [&>[data-part=group]>button:empty::bef" +
        "ore]:block [&>[data-part=group]>[data-part=increment]:empty::before]:block [&>[data-part=group]>[data-part=" +
        "decrement]:empty::before]:block [&>button:first-child:empty::before]:content-[\"←\"_/_\"\"] [&>[data-part=group" +
        "]>button:first-child:empty::before]:content-[\"←\"_/_\"\"] [&>[data-part=group]>[data-part=decrement]:first-chi" +
        "ld:empty::before]:content-[\"←\"_/_\"\"] [&>button:last-child:empty::before]:content-[\"→\"_/_\"\"] [&>[data-part=g" +
        "roup]>button:last-child:empty::before]:content-[\"→\"_/_\"\"] [&>[data-part=group]>[data-part=increment]:last-c" +
        "hild:empty::before]:content-[\"→\"_/_\"\"] [&:dir(rtl)>button:empty::before]:[scale:-1_1] [&:dir(rtl)>[data-par" +
        "t=group]>button:empty::before]:[scale:-1_1] [&:dir(rtl)>[data-part=group]>[data-part=increment]:empty::befo" +
        "re]:[scale:-1_1] [&:dir(rtl)>[data-part=group]>[data-part=decrement]:empty::before]:[scale:-1_1] [&>button:" +
        "first-child]:[border-inline-start:none] [&>button:first-child]:[border-inline-end-width:var(--border-width)" +
        "] [&>button:first-child]:[border-inline-end-style:solid] [&>button:first-child]:[border-inline-end-color:va" +
        "r(--border)] [&>[data-part=group]>button:first-child]:[border-inline-start:none] [&>[data-part=group]>butto" +
        "n:first-child]:[border-inline-end-width:var(--border-width)] [&>[data-part=group]>button:first-child]:[bord" +
        "er-inline-end-style:solid] [&>[data-part=group]>button:first-child]:[border-inline-end-color:var(--border)]" +
        " [&>[data-part=group]>[data-part=decrement]:first-child]:[border-inline-start:none] [&>[data-part=group]>[d" +
        "ata-part=decrement]:first-child]:[border-inline-end-width:var(--border-width)] [&>[data-part=group]>[data-p" +
        "art=decrement]:first-child]:[border-inline-end-style:solid] [&>[data-part=group]>[data-part=decrement]:firs" +
        "t-child]:[border-inline-end-color:var(--border)] [&>button:hover]:[background-color:color-mix(in_oklch,_var" +
        "(--foreground)_8%,_transparent)] [&>[data-part=group]>button:hover]:[background-color:color-mix(in_oklch,_v" +
        "ar(--foreground)_8%,_transparent)] [&>[data-part=group]>[data-part=increment]:hover]:[background-color:colo" +
        "r-mix(in_oklch,_var(--foreground)_8%,_transparent)] [&>[data-part=group]>[data-part=decrement]:hover]:[back" +
        "ground-color:color-mix(in_oklch,_var(--foreground)_8%,_transparent)] [&>button[data-disabled]]:opacity-50 [" +
        "&>button[data-disabled]]:cursor-not-allowed [&>[data-part=group]>button[data-disabled]]:opacity-50 [&>[data" +
        "-part=group]>button[data-disabled]]:cursor-not-allowed [&>[data-part=group]>[data-part=increment][data-disa" +
        "bled]]:opacity-50 [&>[data-part=group]>[data-part=increment][data-disabled]]:cursor-not-allowed [&>[data-pa" +
        "rt=group]>[data-part=decrement][data-disabled]]:opacity-50 [&>[data-part=group]>[data-part=decrement][data-" +
        "disabled]]:cursor-not-allowed [&>[data-part=group]]:inline-flex [&>[data-part=group]]:items-stretch"
      }
      defaultValue={1}
      min={0}
      max={10}
    >
      <NumberField.Decrement aria-label="Decrease" />
      <NumberField.Input aria-label="Quantity" />
      <NumberField.Increment 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
115. 115
116. 116
117. 117
118. 118
119. 119
120. 120
121. 121
122. 122
123. 123
124. 124
125. 125
126. 126
127. 127
128. 128
129. 129
130. 130
131. 131
132. 132
133. 133
134. 134
135. 135
136. 136
137. 137
138. 138
139. 139
140. 140
141. 141
142. 142
143. 143
144. 144
145. 145
146. 146
147. 147
148. 148
149. 149
150. 150
151. 151
152. 152
153. 153
154. 154
155. 155
156. 156
157. 157
158. 158
159. 159
160. 160
161. 161
162. 162
163. 163
164. 164
165. 165
166. 166
167. 167
168. 168
169. 169
170. 170
171. 171
172. 172
173. 173
174. 174
175. 175
176. 176
177. 177
178. 178
179. 179

/* app.css */

@layer reset, ui, app, tokens, base, demo, components, utilities, theme;

@import "@gunkin/uiify/styles/reset";

@import "@gunkin/uiify/components/behavior.css";

@import "@gunkin/uiify/styles/tokens";

@import "@gunkin/uiify/styles/tailwind";

@import "tailwindcss/utilities.css";

@theme { --spacing: 0.25rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; }

@source inline('inline-flex items-stretch border-[length:var(--border-width)] border-solid border-input rounded-md [corner-shape:squircle] bg-card overflow-hidden [&>[role=spinbutton]]:[inline-size:4rem] [&>[role=spinbutton]]:[min-block-size:36px] [&>[role=spinbutton]]:leading-5 [&>[role=spinbutton]]:py-0 [&>[role=spinbutton]]:px-md [&>[role=spinbutton]]:border-0 [&>[role=spinbutton]]:border-current [&>[role=spinbutton]]:border-none [&>[role=spinbutton]]:bg-none [&>[role=spinbutton]]:bg-transparent [&>[role=spinbutton]]:text-foreground [&>[role=spinbutton]]:[font-size:var(--uiify-control-text)] [&>[role=spinbutton]]:text-center [&>[role=spinbutton]]:[outline:none] [&>[data-part=group]>[role=spinbutton]]:[inline-size:4rem] [&>[data-part=group]>[role=spinbutton]]:[min-block-size:36px] [&>[data-part=group]>[role=spinbutton]]:leading-5 [&>[data-part=group]>[role=spinbutton]]:py-0 [&>[data-part=group]>[role=spinbutton]]:px-md [&>[data-part=group]>[role=spinbutton]]:border-0 [&>[data-part=group]>[role=spinbutton]]:border-current [&>[data-part=group]>[role=spinbutton]]:border-none [&>[data-part=group]>[role=spinbutton]]:bg-none [&>[data-part=group]>[role=spinbutton]]:bg-transparent [&>[data-part=group]>[role=spinbutton]]:text-foreground [&>[data-part=group]>[role=spinbutton]]:[font-size:var(--uiify-control-text)] [&>[data-part=group]>[role=spinbutton]]:text-center [&>[data-part=group]>[role=spinbutton]]:[outline:none] focus-within:[outline:2px_solid_var(--ring)] focus-within:[outline-offset:2px] [&_:focus-visible]:[outline:none] [&>button]:inline-flex [&>button]:items-center [&>button]:justify-center [&>button]:flex-none [&>button]:[inline-size:36px] [&>button]:[block-size:36px] [&>button]:p-0 [&>button]:border-0 [&>button]:border-current [&>button]:border-none [&>button]:[border-inline-start-width:var(--border-width)] [&>button]:[border-inline-start-style:solid] [&>button]:[border-inline-start-color:var(--border)] [&>button]:bg-transparent [&>button]:text-foreground [&>button]:text-lg [&>button]:leading-none [&>button]:cursor-pointer [&>button]:[transition:var(--transition-colors)] [&>[data-part=group]>button]:inline-flex [&>[data-part=group]>button]:items-center [&>[data-part=group]>button]:justify-center [&>[data-part=group]>button]:flex-none [&>[data-part=group]>button]:[inline-size:36px] [&>[data-part=group]>button]:[block-size:36px] [&>[data-part=group]>button]:p-0 [&>[data-part=group]>button]:border-0 [&>[data-part=group]>button]:border-current [&>[data-part=group]>button]:border-none [&>[data-part=group]>button]:[border-inline-start-width:var(--border-width)] [&>[data-part=group]>button]:[border-inline-start-style:solid] [&>[data-part=group]>button]:[border-inline-start-color:var(--border)] [&>[data-part=group]>button]:bg-transparent [&>[data-part=group]>button]:text-foreground [&>[data-part=group]>button]:text-lg [&>[data-part=group]>button]:leading-none [&>[data-part=group]>button]:cursor-pointer [&>[data-part=group]>button]:[transition:var(--transition-colors)] [&>[data-part=group]>[data-part=increment]]:inline-flex [&>[data-part=group]>[data-part=increment]]:items-center [&>[data-part=group]>[data-part=increment]]:justify-center [&>[data-part=group]>[data-part=increment]]:flex-none [&>[data-part=group]>[data-part=increment]]:[inline-size:36px] [&>[data-part=group]>[data-part=increment]]:[block-size:36px] [&>[data-part=group]>[data-part=increment]]:p-0 [&>[data-part=group]>[data-part=increment]]:border-0 [&>[data-part=group]>[data-part=increment]]:border-current [&>[data-part=group]>[data-part=increment]]:border-none [&>[data-part=group]>[data-part=increment]]:[border-inline-start-width:var(--border-width)] [&>[data-part=group]>[data-part=increment]]:[border-inline-start-style:solid] [&>[data-part=group]>[data-part=increment]]:[border-inline-start-color:var(--border)] [&>[data-part=group]>[data-part=increment]]:bg-transparent [&>[data-part=group]>[data-part=increment]]:text-foreground [&>[data-part=group]>[data-part=increment]]:text-lg [&>[data-part=group]>[data-part=increment]]:leading-none [&>[data-part=group]>[data-part=increment]]:cursor-pointer [&>[data-part=group]>[data-part=increment]]:[transition:var(--transition-colors)] [&>[data-part=group]>[data-part=decrement]]:inline-flex [&>[data-part=group]>[data-part=decrement]]:items-center [&>[data-part=group]>[data-part=decrement]]:justify-center [&>[data-part=group]>[data-part=decrement]]:flex-none [&>[data-part=group]>[data-part=decrement]]:[inline-size:36px] [&>[data-part=group]>[data-part=decrement]]:[block-size:36px] [&>[data-part=group]>[data-part=decrement]]:p-0 [&>[data-part=group]>[data-part=decrement]]:border-0 [&>[data-part=group]>[data-part=decrement]]:border-current [&>[data-part=group]>[data-part=decrement]]:border-none [&>[data-part=group]>[data-part=decrement]]:[border-inline-start-width:var(--border-width)] [&>[data-part=group]>[data-part=decrement]]:[border-inline-start-style:solid] [&>[data-part=group]>[data-part=decrement]]:[border-inline-start-color:var(--border)] [&>[data-part=group]>[data-part=decrement]]:bg-transparent [&>[data-part=group]>[data-part=decrement]]:text-foreground [&>[data-part=group]>[data-part=decrement]]:text-lg [&>[data-part=group]>[data-part=decrement]]:leading-none [&>[data-part=group]>[data-part=decrement]]:cursor-pointer [&>[data-part=group]>[data-part=decrement]]:[transition:var(--transition-colors)] [&>button:empty::before]:block [&>[data-part=group]>button:empty::before]:block [&>[data-part=group]>[data-part=increment]:empty::before]:block [&>[data-part=group]>[data-part=decrement]:empty::before]:block [&>button:first-child:empty::before]:content-["←"_/_""] [&>[data-part=group]>button:first-child:empty::before]:content-["←"_/_""] [&>[data-part=group]>[data-part=decrement]:first-child:empty::before]:content-["←"_/_""] [&>button:last-child:empty::before]:content-["→"_/_""] [&>[data-part=group]>button:last-child:empty::before]:content-["→"_/_""] [&>[data-part=group]>[data-part=increment]:last-child:empty::before]:content-["→"_/_""] [&:dir(rtl)>button:empty::before]:[scale:-1_1] [&:dir(rtl)>[data-part=group]>button:empty::before]:[scale:-1_1] [&:dir(rtl)>[data-part=group]>[data-part=increment]:empty::before]:[scale:-1_1] [&:dir(rtl)>[data-part=group]>[data-part=decrement]:empty::before]:[scale:-1_1] [&>button:first-child]:[border-inline-start:none] [&>button:first-child]:[border-inline-end-width:var(--border-width)] [&>button:first-child]:[border-inline-end-style:solid] [&>button:first-child]:[border-inline-end-color:var(--border)] [&>[data-part=group]>button:first-child]:[border-inline-start:none] [&>[data-part=group]>button:first-child]:[border-inline-end-width:var(--border-width)] [&>[data-part=group]>button:first-child]:[border-inline-end-style:solid] [&>[data-part=group]>button:first-child]:[border-inline-end-color:var(--border)] [&>[data-part=group]>[data-part=decrement]:first-child]:[border-inline-start:none] [&>[data-part=group]>[data-part=decrement]:first-child]:[border-inline-end-width:var(--border-width)] [&>[data-part=group]>[data-part=decrement]:first-child]:[border-inline-end-style:solid] [&>[data-part=group]>[data-part=decrement]:first-child]:[border-inline-end-color:var(--border)] [&>button:hover]:[background-color:color-mix(in_oklch,_var(--foreground)_8%,_transparent)] [&>[data-part=group]>button:hover]:[background-color:color-mix(in_oklch,_var(--foreground)_8%,_transparent)] [&>[data-part=group]>[data-part=increment]:hover]:[background-color:color-mix(in_oklch,_var(--foreground)_8%,_transparent)] [&>[data-part=group]>[data-part=decrement]:hover]:[background-color:color-mix(in_oklch,_var(--foreground)_8%,_transparent)] [&>button[data-disabled]]:opacity-50 [&>button[data-disabled]]:cursor-not-allowed [&>[data-part=group]>button[data-disabled]]:opacity-50 [&>[data-part=group]>button[data-disabled]]:cursor-not-allowed [&>[data-part=group]>[data-part=increment][data-disabled]]:opacity-50 [&>[data-part=group]>[data-part=increment][data-disabled]]:cursor-not-allowed [&>[data-part=group]>[data-part=decrement][data-disabled]]:opacity-50 [&>[data-part=group]>[data-part=decrement][data-disabled]]:cursor-not-allowed [&>[data-part=group]]:inline-flex [&>[data-part=group]]:items-stretch');

@layer base { :root { --uiify-control-text: var(--text-sm); } @media (pointer: coarse) { :root { --uiify-control-text: var(--text-base); } } }

/* Authored animation and registered properties used by the Tailwind skin.
 * Visual rules belong in utility recipes; only at-rule definitions live here. */
@layer components {
  @keyframes uiify-presence-in {
    from {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

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

@property --uiify-spinner-tail {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --uiify-spinner-length {
  syntax: "<angle>";
  inherits: false;
  initial-value: 36deg;
}

@layer components {
  @keyframes uiify-spinner-rotate {
    to {
      transform: rotate(360deg);
    }
  }
}

@layer components {
  @keyframes uiify-spinner-orbit {
    0% {
      --uiify-spinner-tail: 0deg;
      --uiify-spinner-length: 36deg;
    }

    50% {
      --uiify-spinner-tail: 90deg;
      --uiify-spinner-length: 324deg;
    }

    100% {
      --uiify-spinner-tail: 360deg;
      --uiify-spinner-length: 36deg;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-pulse {
    50% {
      opacity: 0.45;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-shimmer {
    to {
      background-position: -200% 0;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-reveal {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

@property --candle-body-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-body-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-slot {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 100%;
}

@property --candle-wick-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-wick-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --line-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-prev-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-count {
  syntax: "<integer>";
  inherits: false;
  initial-value: 1;
}

@property --line-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@layer components {
  @keyframes uiify-otp-input-caret-blink {
    50% {
      opacity: 0;
    }
  }
}