@viraui/react 2026.7.0 → 2026.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (211) hide show
  1. package/dist/catalog.json +9 -3
  2. package/dist/components/button/button.css +1 -1
  3. package/dist/components/direction-provider/index.d.ts +2 -0
  4. package/dist/components/direction-provider/index.js +2 -0
  5. package/dist/components/index.d.ts +1 -0
  6. package/dist/components/menu/menu-popup.d.ts +2 -2
  7. package/dist/components/menu/menu.css +1 -1
  8. package/dist/components/progressive-blur/progressive-blur.css +1 -1
  9. package/dist/components/prose/prose.d.ts +5 -4
  10. package/dist/components/select/select-group.js +1 -1
  11. package/dist/components/select/select.d.ts +4 -1
  12. package/dist/components/select/select.js +4 -1
  13. package/dist/components/spinner/spinner.d.ts +6 -1
  14. package/dist/components/spinner/variants/arc.css +1 -0
  15. package/dist/components/spinner/variants/arc.d.ts +2 -0
  16. package/dist/components/spinner/variants/arc.js +19 -0
  17. package/dist/components/spinner/variants/arc.module.js +8 -0
  18. package/dist/components/spinner/variants/atom.css +1 -0
  19. package/dist/components/spinner/variants/atom.d.ts +6 -0
  20. package/dist/components/spinner/variants/atom.js +40 -0
  21. package/dist/components/spinner/variants/atom.module.js +8 -0
  22. package/dist/components/spinner/variants/blocks.css +1 -0
  23. package/dist/components/spinner/variants/blocks.d.ts +2 -0
  24. package/dist/components/spinner/variants/blocks.js +25 -0
  25. package/dist/components/spinner/variants/blocks.module.js +8 -0
  26. package/dist/components/spinner/variants/bouncing-dots.css +1 -0
  27. package/dist/components/spinner/variants/bouncing-dots.d.ts +2 -0
  28. package/dist/components/spinner/variants/bouncing-dots.js +21 -0
  29. package/dist/components/spinner/variants/bouncing-dots.module.js +8 -0
  30. package/dist/components/spinner/variants/cascade.css +1 -0
  31. package/dist/components/spinner/variants/cascade.d.ts +2 -0
  32. package/dist/components/spinner/variants/cascade.js +34 -0
  33. package/dist/components/spinner/variants/cascade.module.js +8 -0
  34. package/dist/components/spinner/variants/circular-dots.css +1 -0
  35. package/dist/components/spinner/variants/circular-dots.d.ts +2 -0
  36. package/dist/components/spinner/variants/circular-dots.js +26 -0
  37. package/dist/components/spinner/variants/circular-dots.module.js +8 -0
  38. package/dist/components/spinner/variants/classic-v2.css +1 -0
  39. package/dist/components/spinner/variants/classic-v2.d.ts +2 -0
  40. package/dist/components/spinner/variants/classic-v2.js +24 -0
  41. package/dist/components/spinner/variants/classic-v2.module.js +8 -0
  42. package/dist/components/spinner/variants/classic.css +1 -0
  43. package/dist/components/spinner/variants/classic.d.ts +2 -0
  44. package/dist/components/spinner/variants/classic.js +22 -0
  45. package/dist/components/spinner/variants/classic.module.js +8 -0
  46. package/dist/components/spinner/variants/clock.css +1 -0
  47. package/dist/components/spinner/variants/clock.d.ts +2 -0
  48. package/dist/components/spinner/variants/clock.js +18 -0
  49. package/dist/components/spinner/variants/clock.module.js +8 -0
  50. package/dist/components/spinner/variants/comet.css +1 -0
  51. package/dist/components/spinner/variants/comet.d.ts +2 -0
  52. package/dist/components/spinner/variants/comet.js +33 -0
  53. package/dist/components/spinner/variants/comet.module.js +10 -0
  54. package/dist/components/spinner/variants/compass.css +1 -0
  55. package/dist/components/spinner/variants/compass.d.ts +2 -0
  56. package/dist/components/spinner/variants/compass.js +16 -0
  57. package/dist/components/spinner/variants/compass.module.js +8 -0
  58. package/dist/components/spinner/variants/dual.css +1 -0
  59. package/dist/components/spinner/variants/dual.d.ts +2 -0
  60. package/dist/components/spinner/variants/dual.js +25 -0
  61. package/dist/components/spinner/variants/dual.module.js +10 -0
  62. package/dist/components/spinner/variants/eclipse.css +1 -0
  63. package/dist/components/spinner/variants/eclipse.d.ts +6 -0
  64. package/dist/components/spinner/variants/eclipse.js +21 -0
  65. package/dist/components/spinner/variants/eclipse.module.js +9 -0
  66. package/dist/components/spinner/variants/flip.css +1 -0
  67. package/dist/components/spinner/variants/flip.d.ts +2 -0
  68. package/dist/components/spinner/variants/flip.js +17 -0
  69. package/dist/components/spinner/variants/flip.module.js +8 -0
  70. package/dist/components/spinner/variants/gather.css +1 -0
  71. package/dist/components/spinner/variants/gather.d.ts +2 -0
  72. package/dist/components/spinner/variants/gather.js +50 -0
  73. package/dist/components/spinner/variants/gather.module.js +11 -0
  74. package/dist/components/spinner/variants/index.d.ts +9 -1
  75. package/dist/components/spinner/variants/index.js +96 -10
  76. package/dist/components/spinner/variants/leap.css +1 -0
  77. package/dist/components/spinner/variants/leap.d.ts +6 -0
  78. package/dist/components/spinner/variants/leap.js +27 -0
  79. package/dist/components/spinner/variants/leap.module.js +8 -0
  80. package/dist/components/spinner/variants/linear-dots.css +1 -0
  81. package/dist/components/spinner/variants/linear-dots.d.ts +2 -0
  82. package/dist/components/spinner/variants/linear-dots.js +21 -0
  83. package/dist/components/spinner/variants/linear-dots.module.js +8 -0
  84. package/dist/components/spinner/variants/loading.css +1 -0
  85. package/dist/components/spinner/variants/loading.d.ts +2 -0
  86. package/dist/components/spinner/variants/loading.js +50 -0
  87. package/dist/components/spinner/variants/loading.module.js +8 -0
  88. package/dist/components/spinner/variants/morph.css +1 -0
  89. package/dist/components/spinner/variants/morph.d.ts +2 -0
  90. package/dist/components/spinner/variants/morph.js +17 -0
  91. package/dist/components/spinner/variants/morph.module.js +8 -0
  92. package/dist/components/spinner/variants/orbit.css +1 -0
  93. package/dist/components/spinner/variants/orbit.d.ts +2 -0
  94. package/dist/components/spinner/variants/orbit.js +24 -0
  95. package/dist/components/spinner/variants/orbit.module.js +8 -0
  96. package/dist/components/spinner/variants/pulse.css +1 -0
  97. package/dist/components/spinner/variants/pulse.d.ts +2 -0
  98. package/dist/components/spinner/variants/pulse.js +19 -0
  99. package/dist/components/spinner/variants/pulse.module.js +8 -0
  100. package/dist/components/spinner/variants/radar.css +1 -0
  101. package/dist/components/spinner/variants/radar.d.ts +2 -0
  102. package/dist/components/spinner/variants/radar.js +53 -0
  103. package/dist/components/spinner/variants/radar.module.js +8 -0
  104. package/dist/components/spinner/variants/ring.css +1 -0
  105. package/dist/components/spinner/variants/ring.d.ts +2 -0
  106. package/dist/components/spinner/variants/ring.js +24 -0
  107. package/dist/components/spinner/variants/ring.module.js +8 -0
  108. package/dist/components/spinner/variants/ripple.css +1 -0
  109. package/dist/components/spinner/variants/ripple.d.ts +2 -0
  110. package/dist/components/spinner/variants/ripple.js +23 -0
  111. package/dist/components/spinner/variants/ripple.module.js +8 -0
  112. package/dist/components/spinner/variants/slide.css +1 -0
  113. package/dist/components/spinner/variants/slide.d.ts +2 -0
  114. package/dist/components/spinner/variants/slide.js +24 -0
  115. package/dist/components/spinner/variants/slide.module.js +8 -0
  116. package/dist/components/spinner/variants/snake.css +1 -0
  117. package/dist/components/spinner/variants/snake.d.ts +2 -0
  118. package/dist/components/spinner/variants/snake.js +19 -0
  119. package/dist/components/spinner/variants/snake.module.js +11 -0
  120. package/dist/components/spinner/variants/swirl.css +1 -0
  121. package/dist/components/spinner/variants/swirl.d.ts +2 -0
  122. package/dist/components/spinner/variants/swirl.js +35 -0
  123. package/dist/components/spinner/variants/swirl.module.js +8 -0
  124. package/dist/components/spinner/variants/trace.css +1 -0
  125. package/dist/components/spinner/variants/trace.d.ts +2 -0
  126. package/dist/components/spinner/variants/trace.js +28 -0
  127. package/dist/components/spinner/variants/trace.module.js +8 -0
  128. package/dist/components/spinner/variants/wave.css +1 -0
  129. package/dist/components/spinner/variants/wave.d.ts +2 -0
  130. package/dist/components/spinner/variants/wave.js +25 -0
  131. package/dist/components/spinner/variants/wave.module.js +8 -0
  132. package/dist/components/text/text.css +1 -1
  133. package/dist/components/text/text.d.ts +10 -2
  134. package/dist/components/title/title.d.ts +7 -0
  135. package/dist/index.js +2 -1
  136. package/dist/preflight.css +1 -1
  137. package/dist/specs/components/accordion/props.xml +2 -2
  138. package/dist/specs/components/accordion/usage.xml +2 -0
  139. package/dist/specs/components/autocomplete/patterns.xml +4 -4
  140. package/dist/specs/components/autocomplete/props.xml +2 -2
  141. package/dist/specs/components/autocomplete/usage.xml +1 -1
  142. package/dist/specs/components/button/patterns.xml +2 -2
  143. package/dist/specs/components/button/props.xml +4 -4
  144. package/dist/specs/components/button/usage.xml +2 -1
  145. package/dist/specs/components/chip/patterns.xml +2 -2
  146. package/dist/specs/components/chip/props.xml +2 -2
  147. package/dist/specs/components/chip/usage.xml +2 -0
  148. package/dist/specs/components/direction-provider/a11y.xml +6 -0
  149. package/dist/specs/components/direction-provider/meta.xml +20 -0
  150. package/dist/specs/components/direction-provider/patterns.xml +27 -0
  151. package/dist/specs/components/direction-provider/props.xml +18 -0
  152. package/dist/specs/components/direction-provider/usage.xml +10 -0
  153. package/dist/specs/components/disclosure/patterns.xml +2 -2
  154. package/dist/specs/components/disclosure/props.xml +2 -2
  155. package/dist/specs/components/disclosure/usage.xml +2 -0
  156. package/dist/specs/components/glow/patterns.xml +1 -1
  157. package/dist/specs/components/grid/patterns.xml +3 -3
  158. package/dist/specs/components/icon-button/props.xml +4 -4
  159. package/dist/specs/components/icon-button/usage.xml +3 -1
  160. package/dist/specs/components/menu/patterns.xml +18 -18
  161. package/dist/specs/components/menu/props.xml +5 -5
  162. package/dist/specs/components/menu/usage.xml +3 -1
  163. package/dist/specs/components/meter/patterns.xml +1 -1
  164. package/dist/specs/components/progressive-blur/usage.xml +2 -0
  165. package/dist/specs/components/prose/meta.xml +1 -1
  166. package/dist/specs/components/prose/patterns.xml +34 -10
  167. package/dist/specs/components/prose/props.xml +3 -1
  168. package/dist/specs/components/prose/usage.xml +4 -1
  169. package/dist/specs/components/select/patterns.xml +2 -2
  170. package/dist/specs/components/select/props.xml +4 -4
  171. package/dist/specs/components/select/usage.xml +2 -0
  172. package/dist/specs/components/slider/patterns.xml +1 -1
  173. package/dist/specs/components/spinner/props.xml +1 -1
  174. package/dist/specs/components/spinner/usage.xml +1 -1
  175. package/dist/specs/components/stack/patterns.xml +4 -4
  176. package/dist/specs/components/stack/props.xml +1 -0
  177. package/dist/specs/components/stack/usage.xml +1 -0
  178. package/dist/specs/components/surface/patterns.xml +3 -3
  179. package/dist/specs/components/tabs/patterns.xml +3 -3
  180. package/dist/specs/components/tabs/props.xml +1 -1
  181. package/dist/specs/components/tabs/usage.xml +2 -1
  182. package/dist/specs/components/text/meta.xml +2 -1
  183. package/dist/specs/components/text/patterns.xml +19 -16
  184. package/dist/specs/components/text/props.xml +8 -6
  185. package/dist/specs/components/text/usage.xml +9 -3
  186. package/dist/specs/components/textfield/patterns.xml +3 -3
  187. package/dist/specs/components/textfield/props.xml +2 -2
  188. package/dist/specs/components/textfield/usage.xml +2 -1
  189. package/dist/specs/components/title/meta.xml +2 -1
  190. package/dist/specs/components/title/patterns.xml +11 -10
  191. package/dist/specs/components/title/props.xml +5 -4
  192. package/dist/specs/components/title/usage.xml +8 -3
  193. package/dist/specs/components/toggle-button/patterns.xml +8 -8
  194. package/dist/specs/components/toggle-button/props.xml +3 -3
  195. package/dist/specs/components/toggle-button/usage.xml +2 -0
  196. package/dist/specs/components/toggle-group/patterns.xml +3 -3
  197. package/dist/specs/components/tooltip/patterns.xml +7 -7
  198. package/dist/specs/foundation/attributes.xml +22 -0
  199. package/dist/specs/foundation/bootstrap.xml +1 -1
  200. package/dist/specs/foundation/modules.xml +16 -7
  201. package/dist/specs/foundation/toggles.xml +1 -1
  202. package/dist/specs/index.xml +14 -4
  203. package/package.json +2 -2
  204. package/dist/components/spinner/variants/bars.d.ts +0 -2
  205. package/dist/components/spinner/variants/bars.js +0 -134
  206. package/dist/components/spinner/variants/dot-grid.css +0 -1
  207. package/dist/components/spinner/variants/dot-grid.d.ts +0 -2
  208. package/dist/components/spinner/variants/dot-grid.js +0 -57
  209. package/dist/components/spinner/variants/dot-grid.module.js +0 -16
  210. package/dist/components/spinner/variants/dots.d.ts +0 -2
  211. package/dist/components/spinner/variants/dots.js +0 -189
package/dist/catalog.json CHANGED
@@ -86,6 +86,12 @@
86
86
  "summary": "Compound drawer sheet with `Dialog.Trigger`, `Dialog.Sheet`, `Dialog.Close`, and Base UI pass-through `Dialog.Provider`, `Dialog.Indent`, and `Dialog.IndentBackground` for app-shell indent effects.",
87
87
  "agentDocs": "./specs/components/dialog/meta.xml"
88
88
  },
89
+ {
90
+ "id": "direction-provider",
91
+ "name": "DirectionProvider",
92
+ "summary": "Transparent re-export of Base UI DirectionProvider and useDirection. Enables RTL behavior for Base UI–backed components; does not set HTML dir or CSS direction — pair with document dir=rtl on a portal ancestor (usually html).",
93
+ "agentDocs": "./specs/components/direction-provider/meta.xml"
94
+ },
89
95
  {
90
96
  "id": "disclosure",
91
97
  "name": "Disclosure",
@@ -179,7 +185,7 @@
179
185
  {
180
186
  "id": "prose",
181
187
  "name": "Prose",
182
- "summary": "Grouping region that applies heading-aware em rhythm to direct document blocks.",
188
+ "summary": "Text-wall grouping region (articles, docs, privacy) with heading-aware em rhythm; reading column via parent Stack `maxWidth` sized for body Text `size`.",
183
189
  "agentDocs": "./specs/components/prose/meta.xml"
184
190
  },
185
191
  {
@@ -257,7 +263,7 @@
257
263
  {
258
264
  "id": "text",
259
265
  "name": "Text",
260
- "summary": "Theme-aware body-copy primitive with tone, family, and responsive body sizing.",
266
+ "summary": "Theme-aware body-copy primitive with tone, family, sizing, and readable-measure props (`maxWidth` / `lineHeight` / `balanced`).",
261
267
  "agentDocs": "./specs/components/text/meta.xml"
262
268
  },
263
269
  {
@@ -275,7 +281,7 @@
275
281
  {
276
282
  "id": "title",
277
283
  "name": "Title",
278
- "summary": "Theme-aware heading and display typography primitive.",
284
+ "summary": "Theme-aware heading and display typography with readable-measure props (`maxWidth` / `lineHeight` / `balanced`).",
279
285
  "agentDocs": "./specs/components/title/meta.xml"
280
286
  },
281
287
  {
@@ -1 +1 @@
1
- @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-button-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-height{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-padding-inline{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-padding-block{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-spinner-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-button-icon-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-button-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}.viraui__button-module__Button_oPhrP{--vui-button-background:var(--global-primary);--vui-button-color:var(--base-1);--vui-button-height:var(--space-2xl);--vui-button-padding-inline:calc(var(--space-s) + var(--space-2xs));--vui-button-padding-block:var(--space-s);--vui-button-icon-size:calc(var(--space-xl) - var(--space-s) - var(--space-xs) - var(--space-2xs));--vui-button-spinner-color:currentColor;--vui-button-radius:var(--radius-m);max-block-size:min-content;-webkit-user-select:none;user-select:none;margin-block:0;margin-inline:0;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;min-inline-size:fit-content;min-block-size:round(to-zero,var(--vui-button-height),2px);block-size:round(to-zero,var(--vui-button-height),2px);justify-content:center;text-decoration:none;white-space:nowrap;appearance:button;overflow:hidden;position:relative;padding:var(--vui-button-padding-block) var(--vui-button-padding-inline);font-weight:400;font-variation-settings:"wght" 400;gap:var(--space-s);border:1px solid #0000;background:var(--vui-button-background);color:var(--vui-button-color);font-size:var(--font-scale-body-m);border-radius:var(--vui-button-radius);transition:translate var(--easing-elastic) var(--duration-instant);will-change:translate;&:not(:disabled){background-clip:padding-box}&:not(:disabled,[aria-disabled=true]):active{translate:0 1px}&[data-pill=true]{--__corner-shape:round;border-radius:var(--radius-full)}&[data-size=l]{--vui-button-height:calc(var(--space-2xl) + var(--space-xs));--vui-button-padding-inline:var(--space-m);--vui-button-padding-block:var(--space-s);--vui-button-radius:var(--radius-m);--vui-button-icon-size:calc(var(--space-l) - var(--space-xs))}&[data-size=s]{--vui-button-height:var(--space-xl);--vui-button-padding-inline:var(--space-s);--vui-button-padding-block:var(--space-xs);--vui-button-radius:var(--radius-s);--vui-button-icon-size:calc(var(--space-l) - var(--space-s));gap:var(--space-xs);font-size:var(--font-scale-body-s)}&[data-variant=primary]{--vui-button-background:var(--global-primary);--vui-button-color:contrast-color(var(--global-primary));&:hover{--vui-button-background:oklab(from var(--global-primary) calc(l + 0.05) a b)}}&[data-variant=secondary]{--vui-button-background:var(--global-contrast);--vui-button-color:var(--global-foreground);background-clip:unset;&:hover{--vui-button-background:oklab(from var(--global-contrast) l a b / calc(alpha + 0.03))}@container root style(--is-light-mode: black){--vui-button-background:oklab(from var(--global-contrast) l a b / 0.1)}}&[data-variant=flat]{--vui-button-background:#0000;--vui-button-color:var(--global-foreground);background-clip:unset;&:hover{--vui-button-background:var(--global-contrast);--vui-button-color:var(--base-7)}}&[data-variant=destructive]{--vui-button-background:oklab(from var(--highlight-red) l a b / 12%);--vui-button-color:var(--highlight-red);outline-color:var(--highlight-red);&:hover{--vui-button-background:oklab(from var(--highlight-red) l a b / 30%)}}&[data-addon-position=start]{flex-direction:row;padding-inline-end:calc(var(--vui-button-padding-inline) * 1.2)}&[data-addon-position=end]{flex-direction:row-reverse;padding-inline-start:calc(var(--vui-button-padding-inline) * 1.2)}&[data-icon-only=true]{gap:0;padding-block:var(--vui-button-padding-block);padding-inline:var(--vui-button-padding-block);inline-size:var(--vui-button-height);min-inline-size:var(--vui-button-height);max-inline-size:var(--vui-button-height);aspect-ratio:1/1}&:disabled,&:disabled:active,&:disabled:hover,&[aria-disabled=true],&[aria-disabled=true]:active,&[aria-disabled=true]:hover{--vui-button-background:var(--global-disabled-background);--vui-button-color:var(--global-disabled-foreground);cursor:not-allowed;box-shadow:none;translate:0}&[data-variant=flat]:is(:disabled,[aria-disabled=true]),&[data-variant=flat]:is(:disabled,[aria-disabled=true]):active,&[data-variant=flat]:is(:disabled,[aria-disabled=true]):hover{--vui-button-background:#0000}&[data-loading=true]:is(:disabled,[data-disabled],[aria-disabled=true]){pointer-events:none;border:0;box-shadow:none;--vui-button-color:var(--base-7)}}.viraui__button-module__Content_w-pX-{display:inline-grid;place-items:center;&[data-loading=true]{opacity:0}&:first-child>svg{block-size:round(to-zero,var(--vui-button-icon-size),2px);inline-size:round(to-zero,var(--vui-button-icon-size),2px);flex-shrink:0}}.viraui__button-module__SpinnerOverlay_vKqw1{position:absolute;inset:0;display:grid;place-content:center;pointer-events:none;color:var(--vui-button-spinner-color)}}
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-button-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-height{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-padding-inline{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-padding-block{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-spinner-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-button-icon-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-button-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}.viraui__button-module__Button_oPhrP{--vui-button-background:var(--global-primary);--vui-button-color:var(--base-1);--vui-button-height:var(--space-2xl);--vui-button-padding-inline:calc(var(--space-s) + var(--space-2xs));--vui-button-padding-block:var(--space-s);--vui-button-icon-size:calc(var(--space-xl) - var(--space-s) - var(--space-xs) - var(--space-2xs));--vui-button-spinner-color:currentColor;--vui-button-radius:var(--radius-m);max-block-size:min-content;-webkit-user-select:none;user-select:none;margin-block:0;margin-inline:0;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;min-inline-size:fit-content;min-block-size:round(to-zero,var(--vui-button-height),2px);block-size:round(to-zero,var(--vui-button-height),2px);justify-content:center;text-decoration:none;white-space:nowrap;appearance:button;overflow:hidden;position:relative;padding:var(--vui-button-padding-block) var(--vui-button-padding-inline);font-weight:400;font-variation-settings:"wght" 500;gap:var(--space-s);border:1px solid #0000;background:var(--vui-button-background);color:var(--vui-button-color);font-size:var(--font-scale-body-m);border-radius:var(--vui-button-radius);transition:translate var(--easing-elastic) var(--duration-instant);will-change:translate;&:not(:disabled){background-clip:padding-box}&:not(:disabled,[aria-disabled=true]):active{translate:0 1px}&[data-pill=true]{--__corner-shape:round;border-radius:var(--radius-full)}&[data-size=l]{--vui-button-height:calc(var(--space-2xl) + var(--space-xs));--vui-button-padding-inline:var(--space-m);--vui-button-padding-block:var(--space-s);--vui-button-radius:var(--radius-m);--vui-button-icon-size:calc(var(--space-l) - var(--space-xs))}&[data-size=s]{--vui-button-height:var(--space-xl);--vui-button-padding-inline:var(--space-s);--vui-button-padding-block:var(--space-xs);--vui-button-radius:var(--radius-s);--vui-button-icon-size:calc(var(--space-l) - var(--space-s));gap:var(--space-xs);font-size:var(--font-scale-body-s)}&[data-variant=primary]{--vui-button-background:var(--global-primary);--vui-button-color:contrast-color(var(--global-primary));&:hover{--vui-button-background:oklab(from var(--global-primary) calc(l + 0.05) a b)}}&[data-variant=secondary]{--vui-button-background:var(--global-contrast);--vui-button-color:var(--global-foreground);background-clip:unset;&:hover{--vui-button-background:oklab(from var(--global-contrast) l a b / calc(alpha + 0.03))}@container root style(--is-light-mode: black){--vui-button-background:oklab(from var(--global-contrast) l a b / 0.1)}}&[data-variant=flat]{--vui-button-background:#0000;--vui-button-color:var(--global-foreground);background-clip:unset;&:hover{--vui-button-background:var(--global-contrast);--vui-button-color:var(--base-7)}}&[data-variant=destructive]{--vui-button-background:oklab(from var(--highlight-red) l a b / 12%);--vui-button-color:var(--highlight-red);outline-color:var(--highlight-red);&:hover{--vui-button-background:oklab(from var(--highlight-red) l a b / 30%)}}&[data-addon-position=start]{flex-direction:row;padding-inline-end:calc(var(--vui-button-padding-inline) * 1.2)}&[data-addon-position=end]{flex-direction:row-reverse;padding-inline-start:calc(var(--vui-button-padding-inline) * 1.2)}&[data-icon-only=true]{gap:0;padding-block:var(--vui-button-padding-block);padding-inline:var(--vui-button-padding-block);inline-size:var(--vui-button-height);min-inline-size:var(--vui-button-height);max-inline-size:var(--vui-button-height);aspect-ratio:1/1}&:disabled,&:disabled:active,&:disabled:hover,&[aria-disabled=true],&[aria-disabled=true]:active,&[aria-disabled=true]:hover{--vui-button-background:var(--global-disabled-background);--vui-button-color:var(--global-disabled-foreground);cursor:not-allowed;box-shadow:none;translate:0}&[data-variant=flat]:is(:disabled,[aria-disabled=true]),&[data-variant=flat]:is(:disabled,[aria-disabled=true]):active,&[data-variant=flat]:is(:disabled,[aria-disabled=true]):hover{--vui-button-background:#0000}&[data-loading=true]:is(:disabled,[data-disabled],[aria-disabled=true]){pointer-events:none;border:0;box-shadow:none;--vui-button-color:var(--base-7)}}.viraui__button-module__Content_w-pX-{display:inline-grid;place-items:center;&[data-loading=true]{opacity:0}&:first-child>svg{block-size:round(to-zero,var(--vui-button-icon-size),2px);inline-size:round(to-zero,var(--vui-button-icon-size),2px);flex-shrink:0}}.viraui__button-module__SpinnerOverlay_vKqw1{position:absolute;inset:0;display:grid;place-content:center;pointer-events:none;color:var(--vui-button-spinner-color)}}
@@ -0,0 +1,2 @@
1
+ export { DirectionProvider, useDirection } from '@base-ui/react/direction-provider';
2
+ export type { DirectionProviderProps, TextDirection } from '@base-ui/react/direction-provider';
@@ -0,0 +1,2 @@
1
+ import { DirectionProvider, useDirection } from "@base-ui/react/direction-provider";
2
+ export { DirectionProvider, useDirection };
@@ -12,6 +12,7 @@ export * from './checkbox';
12
12
  export * from './chip';
13
13
  export * from './clamp-text';
14
14
  export * from './dialog';
15
+ export * from './direction-provider';
15
16
  export * from './disclosure';
16
17
  export * from './elevator';
17
18
  export * from './fieldset';
@@ -6,8 +6,8 @@ type MenuPopupPositionerProps = Omit<MenuPositioner.Props, 'className' | 'style'
6
6
  *
7
7
  * Encapsulates Portal + Positioner + Popup with Elevator + Surface list chrome
8
8
  * (Select-like). Positioning props forward to the Positioner; `sideOffset`
9
- * defaults to `2`. RTL placement comes from Base UI `DirectionProvider`;
10
- * app must also set HTML/`dir` (or `direction`) so portaled CSS inherits RTL.
9
+ * defaults to `2`. RTL placement comes from `@viraui/react` `DirectionProvider`
10
+ * (Base UI re-export); app must also set HTML/`dir` (or `direction`) so portaled CSS inherits RTL.
11
11
  *
12
12
  * @defaultValue `sideOffset` is `2`.
13
13
  */
@@ -1 +1 @@
1
- @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --__menu-list-appear-offset{syntax:"<length>";inherits:false;initial-value:8px}.viraui__menu-module__MenuPopup_GkrGa{min-inline-size:var(--anchor-width);max-block-size:var(--available-height);scroll-padding-block:var(--space-xs);color:var(--global-foreground);outline:none;position:relative;overscroll-behavior:contain;transform-origin:var(--transform-origin);transition:opacity var(--duration-instant) var(--easing-entrance),scale var(--duration-instant) var(--easing-entrance),translate var(--duration-instant) var(--easing-entrance);&[data-ending-style],&[data-starting-style]{opacity:0;scale:.96}&[data-side=bottom][data-ending-style],&[data-side=bottom][data-starting-style]{translate:0 calc(var(--__menu-list-appear-offset) * -1)}&[data-side=top][data-ending-style],&[data-side=top][data-starting-style]{translate:0 var(--__menu-list-appear-offset)}&[data-side=left][data-ending-style],&[data-side=left][data-starting-style]{translate:var(--__menu-list-appear-offset) 0}&[data-side=right][data-ending-style],&[data-side=right][data-starting-style]{translate:calc(var(--__menu-list-appear-offset) * -1) 0}&[data-side=inline-start][data-ending-style],&[data-side=inline-start][data-starting-style]{translate:var(--__menu-list-appear-offset) 0;&:dir(rtl){translate:calc(var(--__menu-list-appear-offset) * -1) 0}}&[data-side=inline-end][data-ending-style],&[data-side=inline-end][data-starting-style]{translate:calc(var(--__menu-list-appear-offset) * -1) 0;&:dir(rtl){translate:var(--__menu-list-appear-offset) 0}}&[data-instant=click],&[data-instant=dismiss]{transition:none;scale:1;translate:0;opacity:1}&:focus,&:focus-visible{outline:none}}.viraui__menu-module__ItemRow_Be40k{min-block-size:var(--space-xl)}.viraui__menu-module__Indicator_btL99{min-inline-size:var(--space-s);min-block-size:var(--space-s);inline-size:fit-content;block-size:fit-content;color:var(--global-foreground);opacity:0;&[data-checked]{opacity:1}&[data-kind=chevron]{opacity:1;color:var(--global-foreground);&:dir(rtl){scale:-1 1}}}}@layer viraui.overrides{.viraui__menu-module__Item_9zmEO{cursor:pointer;&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{background:var(--global-contrast);@container root not style(--effect-vibrancy: initial){background:oklab(from var(--global-contrast) l a b/12%)}}&:not([data-disabled],:hover)[data-checked]{background:light-dark(oklab(from var(--global-contrast) l a b/8%),oklab(from var(--global-contrast) l a b/5%))}&[data-disabled]{color:var(--global-disabled-foreground);cursor:not-allowed}&[data-sentiment=destructive]{color:var(--highlight-red);outline-color:var(--highlight-red);&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{background:oklab(from var(--highlight-red) l a b/12%)}}}}
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --__menu-list-appear-offset{syntax:"<length>";inherits:false;initial-value:8px}.viraui__menu-module__MenuPopup_GkrGa{min-inline-size:var(--anchor-width);max-block-size:var(--available-height);scroll-padding-block:var(--space-xs);color:var(--global-foreground);outline:none;position:relative;overscroll-behavior:contain;transform-origin:var(--transform-origin);transition:opacity var(--duration-instant) var(--easing-entrance),scale var(--duration-instant) var(--easing-entrance),translate var(--duration-instant) var(--easing-entrance);&[data-ending-style],&[data-starting-style]{opacity:0;scale:.96}&[data-side=bottom][data-ending-style],&[data-side=bottom][data-starting-style]{translate:0 calc(var(--__menu-list-appear-offset) * -1)}&[data-side=top][data-ending-style],&[data-side=top][data-starting-style]{translate:0 var(--__menu-list-appear-offset)}&[data-side=left][data-ending-style],&[data-side=left][data-starting-style]{translate:var(--__menu-list-appear-offset) 0}&[data-side=right][data-ending-style],&[data-side=right][data-starting-style]{translate:calc(var(--__menu-list-appear-offset) * -1) 0}&[data-side=inline-start][data-ending-style],&[data-side=inline-start][data-starting-style]{translate:var(--__menu-list-appear-offset) 0;&:dir(rtl){translate:calc(var(--__menu-list-appear-offset) * -1) 0}}&[data-side=inline-end][data-ending-style],&[data-side=inline-end][data-starting-style]{translate:calc(var(--__menu-list-appear-offset) * -1) 0;&:dir(rtl){translate:var(--__menu-list-appear-offset) 0}}&[data-instant=click],&[data-instant=dismiss]{transition:none;scale:1;translate:0;opacity:1}&:focus,&:focus-visible{outline:none}}.viraui__menu-module__ItemRow_Be40k{min-block-size:var(--space-xl)}.viraui__menu-module__Indicator_btL99{min-inline-size:var(--space-s);min-block-size:var(--space-s);inline-size:fit-content;block-size:fit-content;color:var(--global-foreground);opacity:0;&[data-checked]{opacity:1}&[data-kind=chevron]{opacity:1;color:var(--global-foreground);&:dir(rtl){scale:-1 1}}}}@layer viraui.overrides{.viraui__menu-module__Item_9zmEO{cursor:pointer;color:inherit;text-decoration:none;&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{background:var(--global-contrast);@container root not style(--effect-vibrancy: initial){background:oklab(from var(--global-contrast) l a b/12%)}}&:not([data-disabled],:hover)[data-checked]{background:light-dark(oklab(from var(--global-contrast) l a b/8%),oklab(from var(--global-contrast) l a b/5%))}&[data-disabled]{color:var(--global-disabled-foreground);cursor:not-allowed}&[data-sentiment=destructive]{color:var(--highlight-red);outline-color:var(--highlight-red);&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{background:oklab(from var(--highlight-red) l a b/12%)}}}}
@@ -1 +1 @@
1
- @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-progressive-blur-amount{syntax:"<length>";inherits:true;initial-value:16px}@property --__progressive-blur-factor{syntax:"<number>";inherits:false;initial-value:1}@property --__progressive-blur-mask-image{syntax:"<image>";inherits:false;initial-value:linear-gradient(#0000,#0000)}@property --__progressive-blur-mask-gradient{syntax:"*";inherits:false;initial-value:#0000}.viraui__progressive-blur-module__ProgressiveBlur_eIxTK{pointer-events:none;&[data-direction=top]{& .viraui__progressive-blur-module__Layer_zbzMS{--__progressive-blur-mask-image:linear-gradient(to top, var(--__progressive-blur-mask-gradient))}}&[data-direction=right]{& .viraui__progressive-blur-module__Layer_zbzMS{--__progressive-blur-mask-image:linear-gradient(to right, var(--__progressive-blur-mask-gradient))}}&[data-direction=bottom]{& .viraui__progressive-blur-module__Layer_zbzMS{--__progressive-blur-mask-image:linear-gradient(to bottom, var(--__progressive-blur-mask-gradient))}}&[data-direction=left]{& .viraui__progressive-blur-module__Layer_zbzMS{--__progressive-blur-mask-image:linear-gradient(to left, var(--__progressive-blur-mask-gradient))}}}.viraui__progressive-blur-module__Layer_zbzMS{position:absolute;inset:0;backdrop-filter:blur(calc(var(--vui-progressive-blur-amount) * var(--__progressive-blur-factor)));mask-image:var(--__progressive-blur-mask-image)}}
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-progressive-blur-amount{syntax:"<length>";inherits:true;initial-value:16px}@property --__progressive-blur-factor{syntax:"<number>";inherits:false;initial-value:1}@property --__progressive-blur-mask-image{syntax:"<image>";inherits:false;initial-value:linear-gradient(#0000,#0000)}@property --__progressive-blur-mask-gradient{syntax:"*";inherits:false;initial-value:#0000}.viraui__progressive-blur-module__ProgressiveBlur_eIxTK{pointer-events:none;&[data-direction=top]{& .viraui__progressive-blur-module__Layer_zbzMS{--__progressive-blur-mask-image:linear-gradient(to top, var(--__progressive-blur-mask-gradient))}}&[data-direction=right]{& .viraui__progressive-blur-module__Layer_zbzMS{--__progressive-blur-mask-image:linear-gradient(to right, var(--__progressive-blur-mask-gradient))}}&[data-direction=bottom]{& .viraui__progressive-blur-module__Layer_zbzMS{--__progressive-blur-mask-image:linear-gradient(to bottom, var(--__progressive-blur-mask-gradient))}}&[data-direction=left]{& .viraui__progressive-blur-module__Layer_zbzMS{--__progressive-blur-mask-image:linear-gradient(to left, var(--__progressive-blur-mask-gradient))}}}.viraui__progressive-blur-module__Layer_zbzMS{position:absolute;inset:0;border-radius:inherit;backdrop-filter:blur(calc(var(--vui-progressive-blur-amount) * var(--__progressive-blur-factor)));mask-image:var(--__progressive-blur-mask-image)}}
@@ -1,10 +1,12 @@
1
1
  import { useRender } from '@base-ui/react/use-render';
2
2
  import type * as React from 'react';
3
- type ProseGap = 's' | 'm' | 'l';
4
3
  /**
5
4
  * Public Prose props.
6
5
  *
7
- * Grouping wrapper for document blocks. Native `div` attributes pass through.
6
+ * Text-wall grouping for articles, docs, privacy/terms — heading-aware em rhythm
7
+ * on direct document blocks. Prefer Stack `maxWidth` sized for the body Text `size`
8
+ * (~10–12 words/line; smaller → narrower). Short UI blurbs stay on Text/Title.
9
+ * Native `div` attributes pass through.
8
10
  * Replace the root with Base UI `render` (for example `article`). No `as` prop.
9
11
  *
10
12
  * @defaultValue Native div pass-through props keep React defaults.
@@ -15,7 +17,7 @@ export type ProseProps = React.ComponentPropsWithoutRef<'div'> & {
15
17
  *
16
18
  * @defaultValue 'l'
17
19
  */
18
- gap?: ProseGap;
20
+ gap?: 's' | 'm' | 'l';
19
21
  /**
20
22
  * Aligns the region using logical alignment values.
21
23
  * Omit so `text-align` inherits from the parent. Title/Text children that omit `align` inherit this value.
@@ -37,4 +39,3 @@ export type ProseProps = React.ComponentPropsWithoutRef<'div'> & {
37
39
  ref?: React.Ref<HTMLElement>;
38
40
  };
39
41
  export declare const Prose: React.FC<ProseProps>;
40
- export {};
@@ -10,7 +10,7 @@ function SelectGroup({ children, className, label, ...groupProps }) {
10
10
  className,
11
11
  render: /* @__PURE__ */ jsx(Stack, {
12
12
  rowGap: "2xs",
13
- vPadding: "2xs"
13
+ vPadding: ["2xs", 0]
14
14
  }),
15
15
  children: [/* @__PURE__ */ jsxs(Select.GroupLabel, {
16
16
  render: /* @__PURE__ */ jsx(Stack, {
@@ -55,13 +55,16 @@ export type SelectProps = SelectRoot.Props<string> & Omit<FieldRoot.Props, 'ref'
55
55
  /**
56
56
  * When `true`, aligns the list popup width with the trigger via Base UI `alignItemWithTrigger`.
57
57
  * Prefer `false` when options use a leading `addon`.
58
+ * On desktop, Base UI also scroll-locks the page while open when this is `true`
59
+ * (needed to keep the selected item aligned with the trigger) — independent of `modal`.
58
60
  *
59
61
  * @defaultValue true
60
62
  */
61
63
  alignListWithTrigger?: boolean;
62
64
  /**
63
65
  * When `true`, open select locks page scroll and blocks outside pointer interaction
64
- * (Base UI modal). Vira defaults to non-modal so the page stays scrollable.
66
+ * (Base UI modal). Default `false` skips the modal backdrop/outside pointer block, but
67
+ * page scroll can still lock when `alignListWithTrigger` is `true` (Base UI coupling).
65
68
  *
66
69
  * @defaultValue false
67
70
  */
@@ -119,7 +119,10 @@ function SelectRootComponent({ alignListWithTrigger = true, children, className,
119
119
  vPadding: "xs",
120
120
  "data-vibrant": true
121
121
  }),
122
- children
122
+ children: /* @__PURE__ */ jsx(Stack, {
123
+ rowGap: "2xs",
124
+ children
125
+ })
123
126
  })
124
127
  }),
125
128
  /* @__PURE__ */ jsx(Select.ScrollDownArrow, {
@@ -14,7 +14,12 @@ export type SpinnerProps = Omit<React.ComponentProps<'svg'>, 'color'> & {
14
14
  */
15
15
  color?: string;
16
16
  /**
17
- * Visual animation style.
17
+ * Visual animation style. Catalog: `arc`, `atom`, `blocks`, `bouncing-dots`,
18
+ * `cascade`, `circular-dots`, `classic`, `classic-v2`, `clock`, `comet`,
19
+ * `compass`, `dual`, `eclipse`, `flip`, `gather`, `leap`, `linear-dots`,
20
+ * `loading`, `morph`, `orbit`, `pulse`, `radar`, `ring`, `ripple`, `slide`,
21
+ * `snake`, `swirl`, `trace`, `wave`. Legacy aliases: `bars`→`wave`,
22
+ * `dot-grid`→`blocks`, `dots`→`eclipse`.
18
23
  *
19
24
  * @defaultValue 'bars'
20
25
  */
@@ -0,0 +1 @@
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@keyframes viraui__arc-module__spinner-arc-spin_hfLao{to{transform:rotate(1turn)}}.viraui__arc-module__Spin_iS5dU{transform-origin:12px 12px;animation:viraui__arc-module__spinner-arc-spin_hfLao .8s linear infinite;@media (prefers-reduced-motion:reduce){animation:none}}}
@@ -0,0 +1,2 @@
1
+ declare const ArcGlyph: React.FC;
2
+ export default ArcGlyph;
@@ -0,0 +1,19 @@
1
+ import './arc.css';
2
+ import arc_module_default from "./arc.module.js";
3
+ import { jsx } from "react/jsx-runtime";
4
+ //#region src/components/spinner/variants/arc.tsx
5
+ var ArcGlyph = () => /* @__PURE__ */ jsx("g", {
6
+ fill: "none",
7
+ stroke: "currentColor",
8
+ strokeWidth: "2.5",
9
+ strokeLinecap: "round",
10
+ children: /* @__PURE__ */ jsx("circle", {
11
+ className: arc_module_default.Spin,
12
+ cx: "12",
13
+ cy: "12",
14
+ r: "10",
15
+ strokeDasharray: "18 44.8"
16
+ })
17
+ });
18
+ //#endregion
19
+ export { ArcGlyph as default };
@@ -0,0 +1,8 @@
1
+ //#region src/components/spinner/variants/arc.module.css
2
+ var Spin = "viraui__arc-module__Spin_iS5dU";
3
+ var arc_module_default = {
4
+ Spin,
5
+ "spinner-arc-spin": "viraui__arc-module__spinner-arc-spin_hfLao"
6
+ };
7
+ //#endregion
8
+ export { Spin, arc_module_default as default };
@@ -0,0 +1 @@
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@keyframes viraui__atom-module__spinner-atom-spin_pBfsa{to{transform:rotate(1turn)}}.viraui__atom-module__Orbit_Ceb6Y{transform-origin:12px 12px;animation:viraui__atom-module__spinner-atom-spin_pBfsa 1s linear infinite;animation-delay:calc(1s * (var(--__spinner-atom-step) - 3) / 3);@media (prefers-reduced-motion:reduce){animation:none;transform:rotate(60deg)}}}
@@ -0,0 +1,6 @@
1
+ /**
2
+ * 2D projection of upstream 3-orbit atom (shell + tilted ellipses).
3
+ * Pure SVG — no foreignObject / CSS 3D.
4
+ */
5
+ declare const AtomGlyph: React.FC;
6
+ export default AtomGlyph;
@@ -0,0 +1,40 @@
1
+ import './atom.css';
2
+ import atom_module_default from "./atom.module.js";
3
+ import { jsx, jsxs } from "react/jsx-runtime";
4
+ //#region src/components/spinner/variants/atom.tsx
5
+ /** Upstream: 3 orbits, tilt step = 180 / count. */
6
+ var ORBITS = [
7
+ 0,
8
+ 1,
9
+ 2
10
+ ];
11
+ var TILT = 180 / ORBITS.length;
12
+ /**
13
+ * 2D projection of upstream 3-orbit atom (shell + tilted ellipses).
14
+ * Pure SVG — no foreignObject / CSS 3D.
15
+ */
16
+ var AtomGlyph = () => /* @__PURE__ */ jsxs("g", {
17
+ fill: "none",
18
+ stroke: "currentColor",
19
+ strokeLinecap: "round",
20
+ children: [/* @__PURE__ */ jsx("circle", {
21
+ cx: "12",
22
+ cy: "12",
23
+ r: "11.34",
24
+ strokeWidth: "1.32"
25
+ }), ORBITS.map((index) => /* @__PURE__ */ jsx("g", {
26
+ transform: `rotate(${index * TILT} 12 12)`,
27
+ children: /* @__PURE__ */ jsx("ellipse", {
28
+ className: atom_module_default.Orbit,
29
+ cx: "12",
30
+ cy: "12",
31
+ rx: "11.34",
32
+ ry: "4",
33
+ opacity: "0.55",
34
+ strokeWidth: "1.08",
35
+ style: { "--__spinner-atom-step": index }
36
+ })
37
+ }, index))]
38
+ });
39
+ //#endregion
40
+ export { AtomGlyph as default };
@@ -0,0 +1,8 @@
1
+ //#region src/components/spinner/variants/atom.module.css
2
+ var Orbit = "viraui__atom-module__Orbit_Ceb6Y";
3
+ var atom_module_default = {
4
+ Orbit,
5
+ "spinner-atom-spin": "viraui__atom-module__spinner-atom-spin_pBfsa"
6
+ };
7
+ //#endregion
8
+ export { Orbit, atom_module_default as default };
@@ -0,0 +1 @@
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@keyframes viraui__blocks-module__spinner-blocks-sweep_KLVpF{0%,70%,to{transform:scale(1)}35%{transform:scale(0)}}.viraui__blocks-module__Cell_5peuH{transform-box:fill-box;transform-origin:center;animation:viraui__blocks-module__spinner-blocks-sweep_KLVpF 1.3s ease-in-out infinite;animation-delay:calc(1.3s * (var(--__spinner-blocks-step) - 5) / 5);@media (prefers-reduced-motion:reduce){animation:none;transform:scale(.8)}}}
@@ -0,0 +1,2 @@
1
+ declare const BlocksGlyph: React.FC;
2
+ export default BlocksGlyph;
@@ -0,0 +1,25 @@
1
+ import './blocks.css';
2
+ import blocks_module_default from "./blocks.module.js";
3
+ import { jsx } from "react/jsx-runtime";
4
+ //#region src/components/spinner/variants/blocks.tsx
5
+ var SIDE = 3;
6
+ var CELL = 20.8 / SIDE;
7
+ var CELLS = Array.from({ length: 9 }, (_, index) => ({
8
+ col: index % SIDE,
9
+ row: Math.floor(index / SIDE),
10
+ step: index % SIDE + Math.floor(index / SIDE)
11
+ }));
12
+ var BlocksGlyph = () => /* @__PURE__ */ jsx("g", {
13
+ fill: "currentColor",
14
+ children: CELLS.map(({ col, row, step }) => /* @__PURE__ */ jsx("rect", {
15
+ className: blocks_module_default.Cell,
16
+ x: col * 8.533333333333333,
17
+ y: row * 8.533333333333333,
18
+ width: CELL,
19
+ height: CELL,
20
+ rx: "1.5",
21
+ style: { "--__spinner-blocks-step": step }
22
+ }, `${col}-${row}`))
23
+ });
24
+ //#endregion
25
+ export { BlocksGlyph as default };
@@ -0,0 +1,8 @@
1
+ //#region src/components/spinner/variants/blocks.module.css
2
+ var Cell = "viraui__blocks-module__Cell_5peuH";
3
+ var blocks_module_default = {
4
+ Cell,
5
+ "spinner-blocks-sweep": "viraui__blocks-module__spinner-blocks-sweep_KLVpF"
6
+ };
7
+ //#endregion
8
+ export { Cell, blocks_module_default as default };
@@ -0,0 +1 @@
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@keyframes viraui__bouncing-dots-module__spinner-bouncing-dots-bounce_TVKej{0%{transform:translateY(14%)}to{transform:translateY(-72%)}}.viraui__bouncing-dots-module__Dot_oIZQs{transform-box:fill-box;transform-origin:center;animation:viraui__bouncing-dots-module__spinner-bouncing-dots-bounce_TVKej .5s ease-in-out infinite alternate;animation-delay:calc(.5s * (var(--__spinner-bouncing-dots-step) - 3) / 3);@media (prefers-reduced-motion:reduce){animation:none;transform:translateY(calc(var(--__spinner-bouncing-dots-step) * -20%))}}}
@@ -0,0 +1,2 @@
1
+ declare const BouncingDotsGlyph: React.FC;
2
+ export default BouncingDotsGlyph;
@@ -0,0 +1,21 @@
1
+ import './bouncing-dots.css';
2
+ import bouncing_dots_module_default from "./bouncing-dots.module.js";
3
+ import { jsx } from "react/jsx-runtime";
4
+ //#region src/components/spinner/variants/bouncing-dots.tsx
5
+ var DOTS = [
6
+ 0,
7
+ 1,
8
+ 2
9
+ ];
10
+ var BouncingDotsGlyph = () => /* @__PURE__ */ jsx("g", {
11
+ fill: "currentColor",
12
+ children: DOTS.map((index) => /* @__PURE__ */ jsx("circle", {
13
+ className: bouncing_dots_module_default.Dot,
14
+ cx: 5 + index * 7,
15
+ cy: "14",
16
+ r: "3",
17
+ style: { "--__spinner-bouncing-dots-step": index }
18
+ }, index))
19
+ });
20
+ //#endregion
21
+ export { BouncingDotsGlyph as default };
@@ -0,0 +1,8 @@
1
+ //#region src/components/spinner/variants/bouncing-dots.module.css
2
+ var Dot = "viraui__bouncing-dots-module__Dot_oIZQs";
3
+ var bouncing_dots_module_default = {
4
+ Dot,
5
+ "spinner-bouncing-dots-bounce": "viraui__bouncing-dots-module__spinner-bouncing-dots-bounce_TVKej"
6
+ };
7
+ //#endregion
8
+ export { Dot, bouncing_dots_module_default as default };
@@ -0,0 +1 @@
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@keyframes viraui__cascade-module__spinner-cascade-turn_eKyVK{to{transform:rotate(1turn)}}.viraui__cascade-module__Arc_t1Trm{transform-origin:12px 12px;animation:viraui__cascade-module__spinner-cascade-turn_eKyVK 1.5s cubic-bezier(.68,-.75,.265,1.75) infinite;animation-delay:calc(1.5s * (var(--__spinner-cascade-step) - 3) / 3);@media (prefers-reduced-motion:reduce){animation:none}}}
@@ -0,0 +1,2 @@
1
+ declare const CascadeGlyph: React.FC;
2
+ export default CascadeGlyph;
@@ -0,0 +1,34 @@
1
+ import './cascade.css';
2
+ import cascade_module_default from "./cascade.module.js";
3
+ import { jsx } from "react/jsx-runtime";
4
+ //#region src/components/spinner/variants/cascade.tsx
5
+ var RADII = [
6
+ {
7
+ r: 10.5,
8
+ dash: 16.5
9
+ },
10
+ {
11
+ r: 7,
12
+ dash: 11
13
+ },
14
+ {
15
+ r: 3.5,
16
+ dash: 5.5
17
+ }
18
+ ];
19
+ var CascadeGlyph = () => /* @__PURE__ */ jsx("g", {
20
+ fill: "none",
21
+ stroke: "currentColor",
22
+ strokeWidth: "2",
23
+ strokeLinecap: "round",
24
+ children: RADII.map(({ r, dash }, index) => /* @__PURE__ */ jsx("circle", {
25
+ className: cascade_module_default.Arc,
26
+ cx: "12",
27
+ cy: "12",
28
+ r,
29
+ strokeDasharray: `${dash} ${dash * 3}`,
30
+ style: { "--__spinner-cascade-step": index }
31
+ }, r))
32
+ });
33
+ //#endregion
34
+ export { CascadeGlyph as default };
@@ -0,0 +1,8 @@
1
+ //#region src/components/spinner/variants/cascade.module.css
2
+ var Arc = "viraui__cascade-module__Arc_t1Trm";
3
+ var cascade_module_default = {
4
+ Arc,
5
+ "spinner-cascade-turn": "viraui__cascade-module__spinner-cascade-turn_eKyVK"
6
+ };
7
+ //#endregion
8
+ export { Arc, cascade_module_default as default };
@@ -0,0 +1 @@
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@keyframes viraui__circular-dots-module__spinner-circular-dots-fade_27GIR{0%{opacity:1}to{opacity:.2}}.viraui__circular-dots-module__Dot_puBZv{animation:viraui__circular-dots-module__spinner-circular-dots-fade_27GIR .8s linear infinite;animation-delay:calc(.8s * (var(--__spinner-circular-dots-step) - 8) / 8);@media (prefers-reduced-motion:reduce){animation:none;opacity:.6}}}
@@ -0,0 +1,2 @@
1
+ declare const CircularDotsGlyph: React.FC;
2
+ export default CircularDotsGlyph;
@@ -0,0 +1,26 @@
1
+ import './circular-dots.css';
2
+ import circular_dots_module_default from "./circular-dots.module.js";
3
+ import { jsx } from "react/jsx-runtime";
4
+ //#region src/components/spinner/variants/circular-dots.tsx
5
+ var DOTS = [
6
+ [12, 2.25],
7
+ [18.894, 5.106],
8
+ [21.75, 12],
9
+ [18.894, 18.894],
10
+ [12, 21.75],
11
+ [5.106, 18.894],
12
+ [2.25, 12],
13
+ [5.106, 5.106]
14
+ ];
15
+ var CircularDotsGlyph = () => /* @__PURE__ */ jsx("g", {
16
+ fill: "currentColor",
17
+ children: DOTS.map(([cx, cy], index) => /* @__PURE__ */ jsx("circle", {
18
+ className: circular_dots_module_default.Dot,
19
+ cx,
20
+ cy,
21
+ r: "2.25",
22
+ style: { "--__spinner-circular-dots-step": index }
23
+ }, `${cx}-${cy}`))
24
+ });
25
+ //#endregion
26
+ export { CircularDotsGlyph as default };
@@ -0,0 +1,8 @@
1
+ //#region src/components/spinner/variants/circular-dots.module.css
2
+ var Dot = "viraui__circular-dots-module__Dot_puBZv";
3
+ var circular_dots_module_default = {
4
+ Dot,
5
+ "spinner-circular-dots-fade": "viraui__circular-dots-module__spinner-circular-dots-fade_27GIR"
6
+ };
7
+ //#endregion
8
+ export { Dot, circular_dots_module_default as default };
@@ -0,0 +1 @@
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@keyframes viraui__classic-v2-module__spinner-classic-v2-fade_wMGQ3{0%{opacity:1}to{opacity:.4}}.viraui__classic-v2-module__Tick_n5bOq{animation:viraui__classic-v2-module__spinner-classic-v2-fade_wMGQ3 .8s linear infinite;animation-delay:calc(.8s * (var(--__spinner-classic-v2-step) - 8) / 8);@media (prefers-reduced-motion:reduce){animation:none;opacity:.5}}}
@@ -0,0 +1,2 @@
1
+ declare const ClassicV2Glyph: React.FC;
2
+ export default ClassicV2Glyph;
@@ -0,0 +1,24 @@
1
+ import './classic-v2.css';
2
+ import classic_v2_module_default from "./classic-v2.module.js";
3
+ import { jsx } from "react/jsx-runtime";
4
+ //#region src/components/spinner/variants/classic-v2.tsx
5
+ var TICKS = [
6
+ "M11 1C11 0.447715 11.4477 0 12 0C12.5523 0 13 0.447715 13 1V5C13 5.55228 12.5523 6 12 6C11.4477 6 11 5.55228 11 5V1Z",
7
+ "M17.6569 7.75736C17.2664 8.14788 16.6332 8.14788 16.2426 7.75736C15.8521 7.36684 15.8521 6.73367 16.2426 6.34315L19.0711 3.51472C19.4616 3.12419 20.0948 3.12419 20.4853 3.51472C20.8758 3.90524 20.8758 4.53841 20.4853 4.92893L17.6569 7.75736Z",
8
+ "M19 13C18.4477 13 18 12.5523 18 12C18 11.4477 18.4477 11 19 11H23C23.5523 11 24 11.4477 24 12C24 12.5523 23.5523 13 23 13H19Z",
9
+ "M16.2426 17.6569C15.8521 17.2664 15.8521 16.6332 16.2426 16.2426C16.6332 15.8521 17.2664 15.8521 17.6569 16.2426L20.4853 19.0711C20.8758 19.4616 20.8758 20.0948 20.4853 20.4853C20.0948 20.8758 19.4616 20.8758 19.0711 20.4853L16.2426 17.6569Z",
10
+ "M11 19C11 18.4477 11.4477 18 12 18C12.5523 18 13 18.4477 13 19V23C13 23.5523 12.5523 24 12 24C11.4477 24 11 23.5523 11 23V19Z",
11
+ "M4.92893 20.4853C4.53841 20.8758 3.90524 20.8758 3.51472 20.4853C3.12419 20.0948 3.12419 19.4616 3.51472 19.0711L6.34315 16.2426C6.73367 15.8521 7.36684 15.8521 7.75736 16.2426C8.14788 16.6332 8.14788 17.2664 7.75736 17.6569L4.92893 20.4853Z",
12
+ "M1 13C0.447715 13 0 12.5523 0 12C0 11.4477 0.447715 11 1 11H5C5.55228 11 6 11.4477 6 12C6 12.5523 5.55228 13 5 13H1Z",
13
+ "M3.51472 4.92893C3.12419 4.53841 3.12419 3.90524 3.51472 3.51472C3.90524 3.12419 4.53841 3.12419 4.92893 3.51472L7.75736 6.34315C8.14788 6.73367 8.14788 7.36684 7.75736 7.75736C7.36684 8.14788 6.73367 8.14788 6.34315 7.75736L3.51472 4.92893Z"
14
+ ];
15
+ var ClassicV2Glyph = () => /* @__PURE__ */ jsx("g", {
16
+ fill: "currentColor",
17
+ children: TICKS.map((d, index) => /* @__PURE__ */ jsx("path", {
18
+ className: classic_v2_module_default.Tick,
19
+ d,
20
+ style: { "--__spinner-classic-v2-step": index }
21
+ }, d))
22
+ });
23
+ //#endregion
24
+ export { ClassicV2Glyph as default };
@@ -0,0 +1,8 @@
1
+ //#region src/components/spinner/variants/classic-v2.module.css
2
+ var Tick = "viraui__classic-v2-module__Tick_n5bOq";
3
+ var classic_v2_module_default = {
4
+ Tick,
5
+ "spinner-classic-v2-fade": "viraui__classic-v2-module__spinner-classic-v2-fade_wMGQ3"
6
+ };
7
+ //#endregion
8
+ export { Tick, classic_v2_module_default as default };
@@ -0,0 +1 @@
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@keyframes viraui__classic-module__spinner-classic-fade_HUDyu{0%{opacity:1}to{opacity:.15}}.viraui__classic-module__Bar_9S0w-{transform-origin:12px 12px;animation:viraui__classic-module__spinner-classic-fade_HUDyu 1.2s linear infinite;animation-delay:calc(1.2s * (var(--__spinner-classic-step) - 12) / 12);@media (prefers-reduced-motion:reduce){animation:none;opacity:.5}}}
@@ -0,0 +1,2 @@
1
+ declare const ClassicGlyph: React.FC;
2
+ export default ClassicGlyph;
@@ -0,0 +1,22 @@
1
+ import './classic.css';
2
+ import classic_module_default from "./classic.module.js";
3
+ import { jsx } from "react/jsx-runtime";
4
+ //#region src/components/spinner/variants/classic.tsx
5
+ var BARS = Array.from({ length: 12 }, (_, index) => index);
6
+ var ClassicGlyph = () => /* @__PURE__ */ jsx("g", {
7
+ fill: "currentColor",
8
+ children: BARS.map((index) => /* @__PURE__ */ jsx("rect", {
9
+ className: classic_module_default.Bar,
10
+ x: "16.5",
11
+ y: "10.8",
12
+ width: "5.5",
13
+ height: "2.4",
14
+ rx: "1.2",
15
+ style: {
16
+ "--__spinner-classic-step": index,
17
+ transform: `rotate(${index * 30}deg)`
18
+ }
19
+ }, index))
20
+ });
21
+ //#endregion
22
+ export { ClassicGlyph as default };
@@ -0,0 +1,8 @@
1
+ //#region src/components/spinner/variants/classic.module.css
2
+ var Bar = "viraui__classic-module__Bar_9S0w-";
3
+ var classic_module_default = {
4
+ Bar,
5
+ "spinner-classic-fade": "viraui__classic-module__spinner-classic-fade_HUDyu"
6
+ };
7
+ //#endregion
8
+ export { Bar, classic_module_default as default };
@@ -0,0 +1 @@
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@keyframes viraui__clock-module__spinner-clock-spin_Ht1e1{to{transform:rotate(1turn)}}.viraui__clock-module__Hand_Za5YY{transform-origin:12px 12px;animation:viraui__clock-module__spinner-clock-spin_Ht1e1 1.2s linear infinite;@media (prefers-reduced-motion:reduce){animation:none}}}
@@ -0,0 +1,2 @@
1
+ declare const ClockGlyph: React.FC;
2
+ export default ClockGlyph;
@@ -0,0 +1,18 @@
1
+ import './clock.css';
2
+ import clock_module_default from "./clock.module.js";
3
+ import { jsx, jsxs } from "react/jsx-runtime";
4
+ //#region src/components/spinner/variants/clock.tsx
5
+ var ClockGlyph = () => /* @__PURE__ */ jsxs("g", {
6
+ fill: "currentColor",
7
+ children: [/* @__PURE__ */ jsx("circle", {
8
+ cx: "12",
9
+ cy: "12",
10
+ r: "12",
11
+ opacity: "0.1"
12
+ }), /* @__PURE__ */ jsx("path", {
13
+ className: clock_module_default.Hand,
14
+ d: "M16.7906 4.3809C15.7809 3.74609 14.6596 3.32096 13.4931 3.12471C12.6761 2.98727 12 3.67158 12 4.5V10.8049C12 11.2382 12.1874 11.6503 12.5139 11.9352L17.8499 16.5905C18.4931 17.1516 19.487 17.067 19.8965 16.3181C20.4534 15.2997 20.8104 14.1787 20.9426 13.0157C21.1338 11.3315 20.8457 9.62751 20.1111 8.0999C19.3766 6.57228 18.2255 5.28315 16.7906 4.3809Z"
15
+ })]
16
+ });
17
+ //#endregion
18
+ export { ClockGlyph as default };
@@ -0,0 +1,8 @@
1
+ //#region src/components/spinner/variants/clock.module.css
2
+ var Hand = "viraui__clock-module__Hand_Za5YY";
3
+ var clock_module_default = {
4
+ Hand,
5
+ "spinner-clock-spin": "viraui__clock-module__spinner-clock-spin_Ht1e1"
6
+ };
7
+ //#endregion
8
+ export { Hand, clock_module_default as default };
@@ -0,0 +1 @@
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@keyframes viraui__comet-module__spinner-comet-spin_SPgQw{to{transform:rotate(1turn)}}.viraui__comet-module__Spin_c3-Xl{transform-origin:12px 12px;animation:viraui__comet-module__spinner-comet-spin_SPgQw .7s linear infinite;@media (prefers-reduced-motion:reduce){animation:none}}.viraui__comet-module__Tail_z8BYu{opacity:.85}}