reshaped 3.9.0-canary.3 → 3.9.0-canary.30

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 (85) hide show
  1. package/dist/bundle.css +1 -1
  2. package/dist/bundle.d.ts +2 -0
  3. package/dist/bundle.js +2 -2
  4. package/dist/components/Actionable/Actionable.module.css +1 -1
  5. package/dist/components/Avatar/Avatar.js +7 -24
  6. package/dist/components/Avatar/Avatar.module.css +1 -1
  7. package/dist/components/Badge/Badge.js +2 -2
  8. package/dist/components/Badge/Badge.module.css +1 -1
  9. package/dist/components/Badge/Badge.types.d.ts +1 -1
  10. package/dist/components/Button/Button.module.css +1 -1
  11. package/dist/components/Calendar/Calendar.module.css +1 -1
  12. package/dist/components/Calendar/Calendar.types.d.ts +4 -2
  13. package/dist/components/Calendar/CalendarControlled.js +2 -2
  14. package/dist/components/Calendar/CalendarDate.js +9 -7
  15. package/dist/components/Calendar/CalendarMonth.js +2 -2
  16. package/dist/components/Card/Card.d.ts +1 -1
  17. package/dist/components/Card/Card.types.d.ts +5 -5
  18. package/dist/components/Checkbox/Checkbox.js +2 -12
  19. package/dist/components/FileUpload/FileUpload.js +7 -5
  20. package/dist/components/FileUpload/FileUpload.module.css +1 -1
  21. package/dist/components/FileUpload/FileUpload.types.d.ts +2 -0
  22. package/dist/components/Flyout/Flyout.constants.d.ts +3 -3
  23. package/dist/components/Flyout/Flyout.constants.js +1 -0
  24. package/dist/components/Flyout/Flyout.module.css +1 -1
  25. package/dist/components/Flyout/Flyout.types.d.ts +6 -7
  26. package/dist/components/Flyout/FlyoutContent.js +3 -3
  27. package/dist/components/Flyout/FlyoutControlled.js +31 -10
  28. package/dist/components/Flyout/useFlyout.d.ts +2 -2
  29. package/dist/components/Flyout/useFlyout.js +8 -21
  30. package/dist/components/Flyout/utilities/calculatePosition.d.ts +6 -6
  31. package/dist/components/Flyout/utilities/calculatePosition.js +24 -17
  32. package/dist/components/Flyout/utilities/constants.d.ts +1 -0
  33. package/dist/components/Flyout/utilities/constants.js +1 -0
  34. package/dist/components/Flyout/utilities/flyout.js +37 -6
  35. package/dist/components/Flyout/utilities/isFullyVisible.d.ts +4 -3
  36. package/dist/components/Flyout/utilities/isFullyVisible.js +5 -4
  37. package/dist/components/Grid/Grid.types.d.ts +4 -4
  38. package/dist/components/HiddenInput/HiddenInput.js +33 -0
  39. package/dist/components/HiddenInput/HiddenInput.types.d.ts +26 -0
  40. package/dist/components/Image/Image.js +13 -8
  41. package/dist/components/Image/Image.module.css +1 -1
  42. package/dist/components/Image/Image.types.d.ts +3 -1
  43. package/dist/components/Modal/Modal.js +2 -5
  44. package/dist/components/Modal/Modal.module.css +1 -1
  45. package/dist/components/Popover/Popover.module.css +1 -1
  46. package/dist/components/Radio/Radio.js +2 -12
  47. package/dist/components/Reshaped/Reshaped.css +1 -1
  48. package/dist/components/Scrim/Scrim.js +4 -3
  49. package/dist/components/Scrim/Scrim.module.css +1 -1
  50. package/dist/components/Scrim/Scrim.types.d.ts +2 -1
  51. package/dist/components/ScrollArea/ScrollArea.js +7 -7
  52. package/dist/components/Slider/SliderControlled.js +5 -4
  53. package/dist/components/Tabs/Tabs.module.css +1 -1
  54. package/dist/components/Tabs/Tabs.types.d.ts +3 -1
  55. package/dist/components/Tabs/TabsContext.d.ts +1 -0
  56. package/dist/components/Tabs/TabsControlled.js +2 -1
  57. package/dist/components/Tabs/TabsItem.js +3 -3
  58. package/dist/components/Tabs/TabsList.js +9 -5
  59. package/dist/components/Tabs/TabsPanel.js +1 -1
  60. package/dist/components/Text/Text.d.ts +1 -1
  61. package/dist/components/Text/Text.js +2 -2
  62. package/dist/components/Text/Text.module.css +1 -1
  63. package/dist/components/Text/Text.types.d.ts +5 -3
  64. package/dist/components/Tooltip/Tooltip.js +2 -2
  65. package/dist/components/Tooltip/Tooltip.module.css +1 -1
  66. package/dist/components/Tooltip/Tooltip.types.d.ts +1 -1
  67. package/dist/components/View/View.types.d.ts +4 -4
  68. package/dist/hooks/_private/useDrag.js +0 -3
  69. package/dist/index.d.ts +2 -0
  70. package/dist/index.js +1 -0
  71. package/dist/types/global.d.ts +1 -1
  72. package/dist/utilities/dom/index.d.ts +0 -1
  73. package/dist/utilities/dom/index.js +0 -1
  74. package/dist/utilities/scroll/disable.js +4 -2
  75. package/package.json +4 -98
  76. package/README.md +0 -24
  77. package/dist/components/_private/HiddenInput/HiddenInput.js +0 -10
  78. package/dist/components/_private/HiddenInput/HiddenInput.types.d.ts +0 -15
  79. package/dist/utilities/dom/userSelect.d.ts +0 -2
  80. package/dist/utilities/dom/userSelect.js +0 -6
  81. /package/dist/components/{_private/HiddenInput → HiddenInput}/HiddenInput.d.ts +0 -0
  82. /package/dist/components/{_private/HiddenInput → HiddenInput}/HiddenInput.module.css +0 -0
  83. /package/dist/components/{_private/HiddenInput → HiddenInput}/HiddenInput.types.js +0 -0
  84. /package/dist/components/{_private/HiddenInput → HiddenInput}/index.d.ts +0 -0
  85. /package/dist/components/{_private/HiddenInput → HiddenInput}/index.js +0 -0
package/dist/components/Modal/Modal.module.css CHANGED
@@ -1 +1 @@
1
- .root{--rs-modal-container-width:100vw;background:var(--rs-color-background-elevation-overlay);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);outline:none;transition:var(--rs-easing-accelerate) var(--rs-duration-fast);transition-property:transform,opacity;will-change:transform}[data-rs-keyboard] .root:focus{box-shadow:var(--rs-shadow-focus)}.root.--contained{--rs-modal-container-width:100%}.root{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-size-m:var(--rs-modal-size-s);--rs-modal-size-l:var(--rs-modal-size-m);--rs-modal-size-xl:var(--rs-modal-size-l);--rs-modal-size:var(--rs-modal-size-s)}.--position-center{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center.--active,[dir=rtl] .--position-center.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:absolute;transform:translateY(100%);width:100%}.--position-bottom.--active,[dir=rtl] .--position-bottom.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start{transform:translate(100%)}.--position-start.--active,[dir=rtl] .--position-start.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end{transform:translate(-100%)}.--position-end.--active,[dir=rtl] .--position-end.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:absolute;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen.--active,[dir=rtl] .--position-full-screen.--active{opacity:1;transform:translate(0)!important}.--active,[dir=rtl] .--active{transition-timing-function:var(--rs-easing-decelerate)}.--dragging{transition:none}.--overflow-visible{overflow:visible}@media (--rs-viewport-m ){.root{--rs-modal-size:var(--rs-modal-size-m)}.--position-center--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--m.--active,[dir=rtl] .--position-center--m.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--m{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:absolute;transform:translateY(100%);width:100%}.--position-bottom--m.--active,[dir=rtl] .--position-bottom--m.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--m{transform:translate(100%)}.--position-start--m.--active,[dir=rtl] .--position-start--m.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--m{transform:translate(-100%)}.--position-end--m.--active,[dir=rtl] .--position-end--m.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--m{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:absolute;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--m.--active,[dir=rtl] .--position-full-screen--m.--active{opacity:1;transform:translate(0)!important}}@media (--rs-viewport-l ){.root{--rs-modal-size:var(--rs-modal-size-l)}.--position-center--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--l.--active,[dir=rtl] .--position-center--l.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--l{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:absolute;transform:translateY(100%);width:100%}.--position-bottom--l.--active,[dir=rtl] .--position-bottom--l.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--l{transform:translate(100%)}.--position-start--l.--active,[dir=rtl] .--position-start--l.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--l{transform:translate(-100%)}.--position-end--l.--active,[dir=rtl] .--position-end--l.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--l{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:absolute;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--l.--active,[dir=rtl] .--position-full-screen--l.--active{opacity:1;transform:translate(0)!important}}@media (--rs-viewport-xl ){.root{--rs-modal-size:var(--rs-modal-size-xl)}.--position-center--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--xl.--active,[dir=rtl] .--position-center--xl.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--xl{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:absolute;transform:translateY(100%);width:100%}.--position-bottom--xl.--active,[dir=rtl] .--position-bottom--xl.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--xl{transform:translate(100%)}.--position-start--xl.--active,[dir=rtl] .--position-start--xl.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--xl{transform:translate(-100%)}.--position-end--xl.--active,[dir=rtl] .--position-end--xl.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--xl{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:absolute;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--xl.--active,[dir=rtl] .--position-full-screen--xl.--active{opacity:1;transform:translate(0)!important}}
1
+ .root{--rs-modal-container-width:100vw;background:var(--rs-color-background-elevation-overlay);box-shadow:var(--rs-shadow-raised);color:var(--rs-color-foreground-neutral);outline:none;transition:var(--rs-duration-fast) var(--rs-easing-accelerate);transition-property:transform,opacity;will-change:transform,opacity}[data-rs-keyboard] .root:focus{box-shadow:var(--rs-shadow-focus)}.root.--contained{--rs-modal-container-width:100%}.root{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-size-m:var(--rs-modal-size-s);--rs-modal-size-l:var(--rs-modal-size-m);--rs-modal-size-xl:var(--rs-modal-size-l);--rs-modal-size:var(--rs-modal-size-s)}.--position-center{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:translateY(var(--rs-unit-x4));width:var(--rs-modal-size)}.--position-center.--active,[dir=rtl] .--position-center.--active{opacity:1;transform:translate(0)!important}.--position-bottom{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:absolute;transform:translateY(100%);width:100%}.--position-bottom.--active,[dir=rtl] .--position-bottom.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px))!important}.--position-start{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start{transform:translate(100%)}.--position-start.--active,[dir=rtl] .--position-start.--active{transform:translate(min(var(--rs-modal-drag,0px),0px))!important}.--position-end{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end{transform:translate(-100%)}.--position-end.--active,[dir=rtl] .--position-end.--active{transform:translate(max(var(--rs-modal-drag,0px),0px))!important}.--position-full-screen{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:absolute;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen.--active,[dir=rtl] .--position-full-screen.--active{opacity:1;transform:translate(0)!important}.--active,[dir=rtl] .--active{transition-timing-function:var(--rs-easing-decelerate)}.--dragging{transition:none}.--overflow-visible{overflow:visible}@media (--rs-viewport-m ){.root{--rs-modal-size:var(--rs-modal-size-m)}.--position-center--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:translateY(var(--rs-unit-x4));width:var(--rs-modal-size)}.--position-center--m.--active,[dir=rtl] .--position-center--m.--active{opacity:1;transform:translate(0)!important}.--position-bottom--m{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:absolute;transform:translateY(100%);width:100%}.--position-bottom--m.--active,[dir=rtl] .--position-bottom--m.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px))!important}.--position-start--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--m{transform:translate(100%)}.--position-start--m.--active,[dir=rtl] .--position-start--m.--active{transform:translate(min(var(--rs-modal-drag,0px),0px))!important}.--position-end--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--m{transform:translate(-100%)}.--position-end--m.--active,[dir=rtl] .--position-end--m.--active{transform:translate(max(var(--rs-modal-drag,0px),0px))!important}.--position-full-screen--m{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:absolute;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--m.--active,[dir=rtl] .--position-full-screen--m.--active{opacity:1;transform:translate(0)!important}}@media (--rs-viewport-l ){.root{--rs-modal-size:var(--rs-modal-size-l)}.--position-center--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:translateY(var(--rs-unit-x4));width:var(--rs-modal-size)}.--position-center--l.--active,[dir=rtl] .--position-center--l.--active{opacity:1;transform:translate(0)!important}.--position-bottom--l{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:absolute;transform:translateY(100%);width:100%}.--position-bottom--l.--active,[dir=rtl] .--position-bottom--l.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px))!important}.--position-start--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--l{transform:translate(100%)}.--position-start--l.--active,[dir=rtl] .--position-start--l.--active{transform:translate(min(var(--rs-modal-drag,0px),0px))!important}.--position-end--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--l{transform:translate(-100%)}.--position-end--l.--active,[dir=rtl] .--position-end--l.--active{transform:translate(max(var(--rs-modal-drag,0px),0px))!important}.--position-full-screen--l{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:absolute;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--l.--active,[dir=rtl] .--position-full-screen--l.--active{opacity:1;transform:translate(0)!important}}@media (--rs-viewport-xl ){.root{--rs-modal-size:var(--rs-modal-size-xl)}.--position-center--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:translateY(var(--rs-unit-x4));width:var(--rs-modal-size)}.--position-center--xl.--active,[dir=rtl] .--position-center--xl.--active{opacity:1;transform:translate(0)!important}.--position-bottom--xl{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:absolute;transform:translateY(100%);width:100%}.--position-bottom--xl.--active,[dir=rtl] .--position-bottom--xl.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px))!important}.--position-start--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--xl{transform:translate(100%)}.--position-start--xl.--active,[dir=rtl] .--position-start--xl.--active{transform:translate(min(var(--rs-modal-drag,0px),0px))!important}.--position-end--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--xl{transform:translate(-100%)}.--position-end--xl.--active,[dir=rtl] .--position-end--xl.--active{transform:translate(max(var(--rs-modal-drag,0px),0px))!important}.--position-full-screen--xl{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:absolute;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--xl.--active,[dir=rtl] .--position-full-screen--xl.--active{opacity:1;transform:translate(0)!important}}
package/dist/components/Popover/Popover.module.css CHANGED
@@ -1 +1 @@
1
- .content{--rs-border-w:1px;border:var(--rs-border-w) solid var(--rs-color-border-neutral-faded);max-width:360px}.content--variant-elevated{background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-radius-medium);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);min-width:220px}.content--variant-elevated.content--elevation-raised{box-shadow:var(--rs-shadow-raised)}.content--radius-small{border-radius:var(--rs-radius-small)}.content.content--has-width{max-width:none;min-width:0}@media (--rs-viewport-s ){.content{max-width:none}}
1
+ .content{--rs-border-w:1px;border:var(--rs-border-w) solid var(--rs-color-border-neutral-faded);border-radius:var(--rs-radius-medium);max-width:360px}.content--variant-elevated{background:var(--rs-color-background-elevation-overlay);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);min-width:220px}.content--variant-elevated.content--elevation-raised{box-shadow:var(--rs-shadow-raised)}.content--variant-headless{border:none}.content--radius-small{border-radius:var(--rs-radius-small)}.content.content--has-width{max-width:none;min-width:0}@media (--rs-viewport-s ){.content{max-width:none}}
package/dist/components/Radio/Radio.js CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import HiddenInput from "../_private/HiddenInput/index.js";
4
3
  import { useFormControl } from "../FormControl/index.js";
4
+ import HiddenInput from "../HiddenInput/index.js";
5
5
  import { useRadioGroup } from "../RadioGroup/index.js";
6
6
  import Text from "../Text/index.js";
7
7
  import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
@@ -16,17 +16,7 @@ const Radio = (props) => {
16
16
  const defaultChecked = radioGroup ? undefined : props.defaultChecked;
17
17
  const name = radioGroup ? radioGroup.name : props.name;
18
18
  const rootClassName = classNames(s.root, className, hasError && s["--error"], disabled && s["--disabled"], size && responsiveClassNames(s, "--size", size));
19
- const handleChange = (event) => {
20
- if (!name)
21
- return;
22
- const { checked } = event.target;
23
- const changeArgs = { name, value, checked, event };
24
- if (onChange)
25
- onChange(changeArgs);
26
- if (radioGroup?.onChange)
27
- radioGroup.onChange(changeArgs);
28
- };
29
- return (_jsxs("label", { ...attributes, className: rootClassName, children: [_jsxs("span", { className: s.field, children: [_jsx(HiddenInput, { className: s.input, type: "radio", checked: checked, defaultChecked: defaultChecked, name: name, disabled: disabled, value: value, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, attributes: inputAttributes }), _jsx("div", { className: s.decorator })] }), children && (_jsx(Text, { as: "span", variant: responsivePropDependency(size, (size) => {
19
+ return (_jsxs("label", { ...attributes, className: rootClassName, children: [_jsxs("span", { className: s.field, children: [_jsx(HiddenInput, { className: s.input, type: "radio", checked: checked, defaultChecked: defaultChecked, name: name, disabled: disabled, value: value, onChange: onChange, onFocus: onFocus, onBlur: onBlur, attributes: inputAttributes }), _jsx("div", { className: s.decorator })] }), children && (_jsx(Text, { as: "span", variant: responsivePropDependency(size, (size) => {
30
20
  if (size === "large")
31
21
  return "body-2";
32
22
  if (size === "small")
package/dist/components/Reshaped/Reshaped.css CHANGED
@@ -1 +1 @@
1
- @layer rs.reset{[data-rs-theme]{--rs-radius-circular:9999px;--rs-shadow-focus:0 0 0 2px var(--rs-color-background-elevation-base),0 0 0 4px var(--rs-color-border-primary);--rs-shadow-focus-inset:inset 0 0 0 2px var(--rs-color-border-primary),inset 0 0 0 4px var(--rs-color-background-elevation-base)}[data-rs-theme] blockquote,[data-rs-theme] body,[data-rs-theme] dd,[data-rs-theme] dl,[data-rs-theme] figcaption,[data-rs-theme] figure,[data-rs-theme] h1,[data-rs-theme] h2,[data-rs-theme] h3,[data-rs-theme] h4,[data-rs-theme] h5,[data-rs-theme] h6,[data-rs-theme] li,[data-rs-theme] ol,[data-rs-theme] p,[data-rs-theme] ul{margin:0;padding:0}[data-rs-theme] ol[class],[data-rs-theme] ul[class]{list-style:none}[data-rs-theme] textarea{resize:vertical}[data-rs-theme] table{border-collapse:collapse;border-spacing:0}[data-rs-theme] fieldset{border:0;margin:0;padding:0}[data-rs-theme] img{display:block;max-width:100%}[data-rs-theme] button,[data-rs-theme] input,[data-rs-theme] select,[data-rs-theme] textarea{font:inherit}[data-rs-theme] option{background:var(--rs-color-background-elevation-base)}[data-rs-theme] label{cursor:pointer}[data-rs-theme] input::placeholder,[data-rs-theme] textarea::placeholder{color:var(--rs-color-foreground-disabled)}html[data-rs-theme]{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;font-size:100%;text-rendering:optimizelegibility;touch-action:manipulation}[data-rs-theme] *{box-sizing:border-box}[data-rs-theme] body,html[data-rs-theme]{background:var(--rs-color-background-page);color:var(--rs-color-foreground-neutral);min-height:100vh;scroll-behavior:smooth}}[data-rs-theme] body,[data-rs-theme]:not(html){font-family:var(--rs-font-family-body);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}[data-rs-color-mode=light]{color-scheme:light}[data-rs-color-mode=dark]{color-scheme:dark}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}[data-rs-no-transition] *,[data-rs-no-transition] :after,[data-rs-no-transition] :before{transition:none!important}
1
+ @layer rs.reset{[data-rs-theme]{--rs-radius-circular:9999px;--rs-shadow-focus:0 0 0 2px var(--rs-color-background-elevation-base),0 0 0 4px var(--rs-color-border-primary);--rs-shadow-focus-inset:inset 0 0 0 2px var(--rs-color-border-primary),inset 0 0 0 4px var(--rs-color-background-elevation-base)}[data-rs-theme] blockquote,[data-rs-theme] body,[data-rs-theme] dd,[data-rs-theme] dl,[data-rs-theme] figcaption,[data-rs-theme] figure,[data-rs-theme] h1,[data-rs-theme] h2,[data-rs-theme] h3,[data-rs-theme] h4,[data-rs-theme] h5,[data-rs-theme] h6,[data-rs-theme] li,[data-rs-theme] ol,[data-rs-theme] p,[data-rs-theme] ul{margin:0;padding:0}[data-rs-theme] ol[class],[data-rs-theme] ul[class]{list-style:none}[data-rs-theme] textarea{resize:vertical}[data-rs-theme] table{border-collapse:collapse;border-spacing:0}[data-rs-theme] fieldset{border:0;margin:0;padding:0}[data-rs-theme] img{display:block;max-width:100%}[data-rs-theme] button,[data-rs-theme] input,[data-rs-theme] select,[data-rs-theme] textarea{font:inherit}[data-rs-theme] option{background:var(--rs-color-background-elevation-base)}[data-rs-theme] label{cursor:pointer}[data-rs-theme] input::placeholder,[data-rs-theme] textarea::placeholder{color:var(--rs-color-foreground-disabled)}html[data-rs-theme]{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;font-size:100%;text-rendering:optimizelegibility;touch-action:manipulation}[data-rs-theme] *{box-sizing:border-box}[data-rs-theme] body,html[data-rs-theme]{background:var(--rs-color-background-page);color:var(--rs-color-foreground-neutral);min-height:100dvh;scroll-behavior:smooth}[data-rs-theme] body,[data-rs-theme]:not(html){font-family:var(--rs-font-family-body);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}}[data-rs-color-mode=light]{color-scheme:light}[data-rs-color-mode=dark]{color-scheme:dark}@media (prefers-reduced-motion:reduce){*{animation-duration:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:0s!important}}[data-rs-no-transition] *,[data-rs-no-transition] :after,[data-rs-no-transition] :before{transition:none!important}
package/dist/components/Scrim/Scrim.js CHANGED
@@ -1,11 +1,12 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import View from "../View/index.js";
2
3
  import { classNames } from "../../utilities/props.js";
3
4
  import s from "./Scrim.module.css";
4
5
  const Scrim = (props) => {
5
- const { children, backgroundSlot, position = "cover", attributes, className, scrimClassName, } = props;
6
- const rootClassNames = classNames(s.root, !!backgroundSlot && s["--with-background"], position && s[`--position-${position}`], className);
6
+ const { children, backgroundSlot, position = "cover", paddingInline, paddingBlock, padding, borderRadius, attributes, className, scrimClassName, } = props;
7
+ const rootClassNames = classNames(s.root, position && s[`--position-${position}`], className);
7
8
  const scrimClassNames = classNames(s.scrim, scrimClassName);
8
- return (_jsxs("div", { ...attributes, className: rootClassNames, children: [backgroundSlot, _jsx("div", { className: scrimClassNames, children: _jsx("div", { className: s.content, children: children }) })] }));
9
+ return (_jsxs(View, { borderRadius: borderRadius, attributes: attributes, className: rootClassNames, position: backgroundSlot ? "relative" : "absolute", inset: backgroundSlot ? undefined : 0, overflow: "hidden", children: [backgroundSlot, _jsx("div", { className: scrimClassNames, children: _jsx(View, { paddingInline: paddingInline ?? padding ?? 4, paddingBlock: paddingBlock ?? padding ?? 3, zIndex: 5, height: ["start", "end"].includes(position) ? "100%" : undefined, width: ["top", "bottom", "cover"].includes(position) ? "100%" : undefined, textAlign: position === "cover" ? "center" : undefined, children: children }) })] }));
9
10
  };
10
11
  Scrim.displayName = "Scrim";
11
12
  export default Scrim;
package/dist/components/Scrim/Scrim.module.css CHANGED
@@ -1 +1 @@
1
- .root,.scrim{inset:0;position:absolute}.root{--rs-overlay-gradient:rgba(var(--rs-color-rgb-black),0%),rgba(var(--rs-color-rgb-black),0.52%),rgba(var(--rs-color-rgb-black),2.13%),rgba(var(--rs-color-rgb-black),4.9%),rgba(var(--rs-color-rgb-black),8.84%),rgba(var(--rs-color-rgb-black),13.91%),rgba(var(--rs-color-rgb-black),19.91%),rgba(var(--rs-color-rgb-black),26.56%),rgba(var(--rs-color-rgb-black),33.44%),rgba(var(--rs-color-rgb-black),40.09%),rgba(var(--rs-color-rgb-black),46.09%),rgba(var(--rs-color-rgb-black),51.16%),rgba(var(--rs-color-rgb-black),55.1%),rgba(var(--rs-color-rgb-black),57.87%),rgba(var(--rs-color-rgb-black),59.48%),rgba(var(--rs-color-rgb-black),60%);pointer-events:none}.scrim{color:var(--rs-color-white);padding:var(--rs-unit-x3) var(--rs-unit-x4);transform:translateZ(0)}.content{pointer-events:all;position:relative;z-index:5}.--position-cover .scrim{align-items:center;display:flex;justify-content:center}.--position-cover .scrim:after{background-color:var(--rs-color-black);content:"";inset:0;opacity:.5;position:absolute}.--position-cover .content{text-align:center}.--position-bottom .content,.--position-cover .content,.--position-top .content{width:100%}.--position-end .content,.--position-start .content{height:100%}.--position-top .scrim{background:linear-gradient(to top,var(--rs-overlay-gradient));inset-block-end:auto;padding-block-end:calc(var(--rs-unit-x10) * 2)}.--position-bottom .scrim{background:linear-gradient(to bottom,var(--rs-overlay-gradient));inset-block-start:auto;padding-block-start:calc(var(--rs-unit-x10) * 2)}.--position-start .scrim{background:linear-gradient(to left,var(--rs-overlay-gradient));inset-inline-end:auto;padding-inline-end:calc(var(--rs-unit-x10) * 2);width:auto}.--position-end .scrim,[dir=rtl] .--position-start .scrim{background:linear-gradient(to right,var(--rs-overlay-gradient))}.--position-end .scrim{inset-inline-start:auto;padding-inline-start:calc(var(--rs-unit-x10) * 2);width:auto}[dir=rtl] .--position-end .scrim{background:linear-gradient(to left,var(--rs-overlay-gradient))}.--with-background{position:relative}
1
+ .root{--rs-scrim-gradient-padding:calc(var(--rs-unit-x1) * 16);--rs-scrim-gradient:rgba(var(--rs-color-rgb-black),0%),rgba(var(--rs-color-rgb-black),0.52%),rgba(var(--rs-color-rgb-black),2.13%),rgba(var(--rs-color-rgb-black),4.9%),rgba(var(--rs-color-rgb-black),8.84%),rgba(var(--rs-color-rgb-black),13.91%),rgba(var(--rs-color-rgb-black),19.91%),rgba(var(--rs-color-rgb-black),26.56%),rgba(var(--rs-color-rgb-black),33.44%),rgba(var(--rs-color-rgb-black),40.09%),rgba(var(--rs-color-rgb-black),46.09%),rgba(var(--rs-color-rgb-black),51.16%),rgba(var(--rs-color-rgb-black),55.1%),rgba(var(--rs-color-rgb-black),57.87%),rgba(var(--rs-color-rgb-black),59.48%),rgba(var(--rs-color-rgb-black),60%);pointer-events:none}.scrim{color:var(--rs-color-white);inset:0;position:absolute;transform:translateZ(0)}.--position-cover .scrim{align-items:center;display:flex;justify-content:center}.--position-cover .scrim:after{background-color:var(--rs-color-black);content:"";inset:0;opacity:.5;position:absolute}.--position-top .scrim{background:linear-gradient(to top,var(--rs-scrim-gradient));inset-block-end:auto;padding-block-end:var(--rs-scrim-gradient-padding)}.--position-bottom .scrim{background:linear-gradient(to bottom,var(--rs-scrim-gradient));inset-block-start:auto;padding-block-start:var(--rs-scrim-gradient-padding)}.--position-start .scrim{background:linear-gradient(to left,var(--rs-scrim-gradient));inset-inline-end:auto;padding-inline-end:var(--rs-scrim-gradient-padding);width:auto}.--position-end .scrim,[dir=rtl] .--position-start .scrim{background:linear-gradient(to right,var(--rs-scrim-gradient))}.--position-end .scrim{inset-inline-start:auto;padding-inline-start:var(--rs-scrim-gradient-padding);width:auto}[dir=rtl] .--position-end .scrim{background:linear-gradient(to left,var(--rs-scrim-gradient))}
package/dist/components/Scrim/Scrim.types.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from "react";
2
+ import type { ViewProps } from "../View";
2
3
  import type * as G from "../../types/global";
3
4
  export type Props = {
4
5
  /** Node for inserting content */
@@ -13,4 +14,4 @@ export type Props = {
13
14
  className?: G.ClassName;
14
15
  /** Additional attributes for the root element */
15
16
  attributes?: G.Attributes<"div">;
16
- };
17
+ } & Pick<ViewProps, "paddingInline" | "paddingBlock" | "padding" | "borderRadius">;
package/dist/components/ScrollArea/ScrollArea.js CHANGED
@@ -4,8 +4,8 @@ import React, { forwardRef } from "react";
4
4
  import useHandlerRef from "../../hooks/useHandlerRef.js";
5
5
  import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
6
6
  import { resolveMixin } from "../../styles/mixin.js";
7
- import { disableUserSelect, enableUserSelect } from "../../utilities/dom/index.js";
8
7
  import { classNames } from "../../utilities/props.js";
8
+ import { disableScroll, enableScroll } from "../../utilities/scroll/index.js";
9
9
  import s from "./ScrollArea.module.css";
10
10
  const ScrollAreaBar = (props) => {
11
11
  const { ratio, position, vertical, onThumbMove } = props;
@@ -41,14 +41,14 @@ const ScrollAreaBar = (props) => {
41
41
  const total = vertical ? elBar.scrollHeight : elBar.scrollWidth;
42
42
  onThumbMoveRef.current?.({ value: diff / total, type: "relative" });
43
43
  }, [vertical, dragging, onThumbMoveRef]);
44
- const handleDragEnd = React.useCallback(() => {
45
- setDragging(false);
46
- enableUserSelect();
47
- }, []);
48
44
  const handleDragStart = () => {
49
45
  setDragging(true);
50
- disableUserSelect();
46
+ disableScroll();
51
47
  };
48
+ const handleDragEnd = React.useCallback(() => {
49
+ setDragging(false);
50
+ enableScroll();
51
+ }, []);
52
52
  React.useEffect(() => {
53
53
  if (!dragging)
54
54
  return;
@@ -109,7 +109,7 @@ const ScrollArea = forwardRef((props, ref) => {
109
109
  const scrollableEl = scrollableRef.current;
110
110
  if (!scrollableEl)
111
111
  return;
112
- const value = scrollableEl.clientWidth * args.value;
112
+ const value = scrollableEl.scrollWidth * args.value;
113
113
  if (args.type === "absolute") {
114
114
  scrollableEl.scrollLeft = value;
115
115
  }
package/dist/components/Slider/SliderControlled.js CHANGED
@@ -5,7 +5,7 @@ import { useFormControl } from "../FormControl/index.js";
5
5
  import useElementId from "../../hooks/useElementId.js";
6
6
  import useHandlerRef from "../../hooks/useHandlerRef.js";
7
7
  import useRTL from "../../hooks/useRTL.js";
8
- import { enableUserSelect, disableUserSelect, triggerChangeEvent } from "../../utilities/dom/index.js";
8
+ import { triggerChangeEvent } from "../../utilities/dom/index.js";
9
9
  import { classNames } from "../../utilities/props.js";
10
10
  import { disableScroll, enableScroll } from "../../utilities/scroll/index.js";
11
11
  import s from "./Slider.module.css";
@@ -144,30 +144,31 @@ const SliderControlled = (props) => {
144
144
  handleMinChange(nextValue);
145
145
  if (closestId === maxId)
146
146
  handleMaxChange(nextValue);
147
- disableUserSelect();
148
- disableScroll();
149
147
  setDraggingId(closestId);
150
148
  };
151
149
  const handleMinDragStart = (e) => {
152
150
  if (disabled)
153
151
  return;
154
152
  e.stopPropagation();
153
+ disableScroll();
155
154
  setDraggingId(minId);
156
155
  };
157
156
  const handleMaxDragStart = (e) => {
158
157
  if (disabled)
159
158
  return;
160
159
  e.stopPropagation();
160
+ disableScroll();
161
161
  setDraggingId(maxId);
162
162
  };
163
163
  const handleDragStop = React.useCallback(() => {
164
164
  if (draggingId === minId && minValue !== undefined) {
165
165
  handleMinChange(minValue, { commit: true });
166
+ minInputRef.current?.focus();
166
167
  }
167
168
  if (draggingId === maxId) {
168
169
  handleMaxChange(maxValue, { commit: true });
170
+ maxInputRef.current?.focus();
169
171
  }
170
- enableUserSelect();
171
172
  enableScroll();
172
173
  setDraggingId(null);
173
174
  }, [minValue, maxValue, handleMinChange, handleMaxChange, draggingId, minId, maxId]);
package/dist/components/Tabs/Tabs.module.css CHANGED
@@ -1 +1 @@
1
- @property --rs-tabs-mid-l{syntax:"<length>";initial-value:-24px;inherits:false}@property --rs-tabs-stop-l{syntax:"<length>";initial-value:0;inherits:false}@property --rs-tabs-stop-r{syntax:"<length-percentage>";initial-value:100%;inherits:false}@property --rs-tabs-mid-r{syntax:"<length-percentage>";initial-value:calc(100% + 24px);inherits:false}.root{box-sizing:initial;isolation:isolate;max-width:100%}.list,.root{position:relative}.list{--rs-tabs-gap:var(--rs-unit-x6);gap:var(--rs-tabs-gap)}.inner:after{background-color:var(--rs-color-border-neutral-faded);content:"";position:absolute;z-index:2}.listItem{flex-shrink:0;position:relative}.button{overflow:hidden;position:relative;z-index:1;-webkit-tap-highlight-color:transparent}.button,.buttonContent{border-radius:var(--rs-radius-medium);width:100%}.buttonContent{align-items:center;box-sizing:border-box;display:flex}.icon{color:inherit;transition:color var(--rs-duration-fast) var(--rs-easing-standard)}[data-rs-keyboard] .radio:focus+.buttonContent{box-shadow:var(--rs-shadow-focus-inset)}.icon:not(:last-child){margin-inline-end:var(--rs-unit-x2)}.item{color:var(--rs-color-foreground-neutral)}@media (hover:hover) and (pointer:fine){.item:not(.--item-disabled,.--item-active):hover{color:var(--rs-color-foreground-neutral-faded)}}.item.--item-disabled{color:var(--rs-color-foreground-disabled)}.--item-active:after{content:""}.--item-active:after,.selector{background:var(--rs-color-border-primary);border-radius:calc(var(--rs-radius-medium) - 1px);position:absolute;z-index:var(--rs-z-index-relative)}.selector{--rs-tab-selection-x:0;--rs-tab-selection-y:0;--rs-tab-selection-scale-x:0;--rs-tab-selection-scale-y:0;transform:translate(calc(var(--rs-tab-selection-x) * 1px),calc(var(--rs-tab-selection-y) * 1px)) translateZ(0);transform-origin:0 0}.--selector-hidden{visibility:hidden}.--selector-animated{transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:transform,height,width;will-change:transform,height,width}.control{align-items:center;display:none;inset-block:0;opacity:0;pointer-events:none;position:absolute;transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:opacity,transform;z-index:var(--rs-z-index-relative)}.control.control--active{opacity:1;pointer-events:all}[dir=rtl] .control{transform:scaleX(-1)}.control--next{inset-inline-end:0}.control--prev{inset-inline-start:0}.panel{outline:none}[data-rs-keyboard] .panel:focus{box-shadow:var(--rs-shadow-focus)}.--panel-hidden{display:none}.--scrollable .inner{overflow:auto;overflow:-moz-scrollbars-none;scrollbar-width:none;-ms-overflow-style:none;mask-image:linear-gradient(to right,transparent 0,transparent var(--rs-tabs-mid-l),#000 var(--rs-tabs-stop-l),#000 var(--rs-tabs-stop-r),transparent var(--rs-tabs-mid-r),transparent 100%);transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:--rs-tabs-stop-l,--rs-tabs-stop-r,--rs-tabs-mid-l,--rs-tabs-mid-r}.--scrollable .inner::-webkit-scrollbar{display:none}.--direction-row .inner{white-space:nowrap}.--direction-row .inner:after{bottom:0;height:1px;inset-inline:0}.--direction-row .list{align-items:center;display:inline-flex;flex-wrap:nowrap;vertical-align:top}.--direction-row .--item-active:after{height:2px;inset-inline:0;bottom:0}.--direction-row .selector{bottom:0;height:2px;left:0;width:calc(var(--rs-tab-selection-scale-x) * 1px)}.--direction-row .button{box-sizing:initial;margin:var(--rs-unit-x1) calc(var(--rs-unit-x2) * -1);padding:0 var(--rs-unit-x2)}.--direction-row .buttonContent{justify-content:center;padding:var(--rs-tabs-item-p-v) 0}.--direction-column .inner:after{height:100%;inset-block:0;inset-inline-end:0;width:1px}.--direction-column .list{--rs-tabs-gap:var(--rs-unit-x1);display:flex;flex-direction:column}.--direction-column .item{padding-inline-end:var(--rs-unit-x1)}.--direction-column .--item-active:after{bottom:0}.--direction-column .--item-active:after,.--direction-column .selector{height:100%;inset-inline-end:0;width:2px}.--direction-column .selector{height:calc(var(--rs-tab-selection-scale-y) * 1px);top:0}.--direction-column .button{margin-inline-start:calc(var(--rs-unit-x2) * -1);padding:var(--rs-unit-x2);width:calc(100% + var(--rs-unit-x1))}.--direction-column .buttonContent{justify-content:flex-start}.--variant-borderless .inner:after,.--variant-pills .inner:after,.--variant-pills-elevated .inner:after{content:none}.--variant-pills .button,.--variant-pills-elevated .button{margin:0;padding:0}.--variant-pills .buttonContent,.--variant-pills-elevated .buttonContent{margin:0;padding:var(--rs-tabs-item-p-v) var(--rs-tabs-item-p-h)}@media (hover:hover) and (pointer:fine){.--variant-pills .buttonContent:hover,.--variant-pills-elevated .buttonContent:hover{background:none}}.--variant-pills-elevated .buttonContent{padding:calc(var(--rs-tabs-item-p-v) - var(--rs-unit-x1) / 2) var(--rs-tabs-item-p-h)}.--variant-pills .list,.--variant-pills-elevated .list{--rs-tabs-gap:var(--rs-unit-x1)}.--variant-pills .selector,.--variant-pills-elevated .selector{background-color:var(--rs-color-background-neutral);height:calc(var(--rs-tab-selection-scale-y) * 1px);opacity:.6;width:calc(var(--rs-tab-selection-scale-x) * 1px);z-index:0}.--direction-column.--variant-pills .selector,.--direction-column.--variant-pills-elevated .selector{left:0}.--direction-row.--variant-pills .selector,.--direction-row.--variant-pills-elevated .selector{top:0}.--variant-pills .--item-active:after,.--variant-pills-elevated .--item-active:after{background-color:var(--rs-color-background-neutral);opacity:.6;z-index:0}.--direction-column.--variant-pills .--item-active:after,.--direction-column.--variant-pills-elevated .--item-active:after{width:100%}.--direction-row.--variant-pills .--item-active:after,.--direction-row.--variant-pills-elevated .--item-active:after{height:100%}.--variant-pills-elevated .list{background:var(--rs-color-background-neutral-faded);border:2px solid transparent;border-radius:var(--rs-radius-medium)}.--variant-pills-elevated .--item-active:after,.--variant-pills-elevated .selector{background:var(--rs-color-background-elevation-raised);box-shadow:var(--rs-shadow-raised);box-sizing:border-box;opacity:1}.--size-medium{--rs-tabs-item-p-v:var(--rs-unit-x2);--rs-tabs-item-p-h:var(--rs-unit-x3)}.--size-large{--rs-tabs-item-p-v:var(--rs-unit-x3);--rs-tabs-item-p-h:var(--rs-unit-x4)}.--item-width-equal{max-width:none}.--item-width-equal .inner{flex-wrap:wrap}.--item-width-equal .list{display:flex}.--item-width-equal .listItem{flex-basis:0;flex-grow:1;margin:0;overflow:hidden}.--item-width-equal .buttonText{overflow:hidden;text-overflow:ellipsis}.--fade-end .inner,[dir=rtl] .--fade-start .inner{--rs-tabs-mid-r:100%;--rs-tabs-stop-r:calc(100% - var(--rs-unit-x1) * 10)}.--fade-start .inner,[dir=rtl] .--fade-end .inner{--rs-tabs-mid-l:0px;--rs-tabs-stop-l:calc(var(--rs-unit-x1) * 10)}@media (pointer:fine){.control{display:flex}.--fade-end .inner,[dir=rtl] .--fade-start .inner{--rs-tabs-mid-r:calc(100% - var(--rs-unit-x1) * 4);--rs-tabs-stop-r:calc(100% - var(--rs-unit-x1) * 10)}.--fade-start .inner,[dir=rtl] .--fade-end .inner{--rs-tabs-mid-l:calc(var(--rs-unit-x1) * 4);--rs-tabs-stop-l:calc(var(--rs-unit-x1) * 10)}}
1
+ @property --rs-tabs-mid-l{syntax:"<length>";initial-value:-24px;inherits:false}@property --rs-tabs-stop-l{syntax:"<length>";initial-value:0;inherits:false}@property --rs-tabs-stop-r{syntax:"<length-percentage>";initial-value:100%;inherits:false}@property --rs-tabs-mid-r{syntax:"<length-percentage>";initial-value:calc(100% + 24px);inherits:false}.root{--rs-tabs-gap:var(--rs-unit-x6);box-sizing:initial;isolation:isolate;max-width:100%;position:relative}.inner:after{background-color:var(--rs-color-border-neutral-faded);content:"";position:absolute;z-index:2}.list{gap:var(--rs-tabs-gap)}.list,.listItem{position:relative}.listItem{flex-shrink:0}.button{--rs-tabs-focus-ring-inset:calc(var(--rs-unit-x2) * -1);position:relative;width:100%;z-index:1;-webkit-tap-highlight-color:transparent;border-radius:var(--rs-radius-medium)}[data-rs-keyboard] .button:focus:after{border-radius:var(--rs-radius-medium);box-shadow:var(--rs-shadow-focus-inset);content:"";inset:0;inset-inline:var(--rs-tabs-focus-ring-inset);pointer-events:none;position:absolute}.buttonContent{align-items:center;border-radius:var(--rs-radius-medium);box-sizing:border-box;display:flex;width:100%}.icon{color:inherit;transition:color var(--rs-duration-fast) var(--rs-easing-standard)}.icon:not(:last-child){margin-inline-end:var(--rs-unit-x2)}[data-rs-keyboard] .radio:focus+.buttonContent{box-shadow:var(--rs-shadow-focus-inset)}.item{color:var(--rs-color-foreground-neutral)}.item:after{content:"";opacity:0;pointer-events:none}.item--active.item:after{opacity:1}.item.item--disabled{color:var(--rs-color-foreground-disabled)}.root:not(:has(.selector)) .item:after{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.item:after,.selector{background:var(--rs-color-border-primary);border-radius:var(--rs-radius-medium);position:absolute;z-index:var(--rs-z-index-relative)}.selector{--rs-tab-selection-x:0;--rs-tab-selection-y:0;--rs-tab-selection-scale-x:0;--rs-tab-selection-scale-y:0;transform:translate(calc(var(--rs-tab-selection-x) * 1px),calc(var(--rs-tab-selection-y) * 1px)) translateZ(0);transform-origin:0 0}.selector.selector--hidden{visibility:hidden}.selector.selector--animated{transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:transform,height,width;will-change:transform,height,width}.control{align-items:center;display:none;inset-block:0;opacity:0;pointer-events:none;position:absolute;transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:opacity,transform;z-index:var(--rs-z-index-relative)}.control.control--active{opacity:1;pointer-events:all}[dir=rtl] .control{transform:scaleX(-1)}.control.control--next{inset-inline-end:0}.control.control--prev{inset-inline-start:0}.panel{outline:none}[data-rs-keyboard] .panel:focus{box-shadow:var(--rs-shadow-focus)}.panel.panel--hidden{display:none}.--scrollable .inner{overflow:auto;overflow:-moz-scrollbars-none;scrollbar-width:none;-ms-overflow-style:none;mask-image:linear-gradient(to right,transparent 0,transparent var(--rs-tabs-mid-l),#000 var(--rs-tabs-stop-l),#000 var(--rs-tabs-stop-r),transparent var(--rs-tabs-mid-r),transparent 100%);transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:--rs-tabs-stop-l,--rs-tabs-stop-r,--rs-tabs-mid-l,--rs-tabs-mid-r}.--scrollable .inner::-webkit-scrollbar{display:none}.--direction-row .inner{white-space:nowrap}.--direction-row .inner:after{bottom:0;height:1px;inset-inline:0}.--direction-row .list{align-items:center;display:inline-flex;flex-wrap:nowrap;vertical-align:top}.--direction-row .item:after{inset-inline:0;bottom:0;height:2px}.--direction-row .selector{bottom:0;height:2px;left:0;width:calc(var(--rs-tab-selection-scale-x) * 1px)}.--direction-row .button{box-sizing:initial;margin-block:var(--rs-unit-x1)}.--direction-row .buttonContent{justify-content:center;padding:var(--rs-tabs-item-p-v) 0}.--direction-column{--rs-tabs-gap:var(--rs-unit-x1)}.--direction-column .inner:after{height:100%;inset-block:0;inset-inline-end:0;width:1px}.--direction-column .list{display:flex;flex-direction:column}.--direction-column .item{padding-inline-end:var(--rs-unit-x1)}.--direction-column .item:after{inset-block:0;inset-inline-end:0;width:2px}.--direction-column .selector{height:calc(var(--rs-tab-selection-scale-y) * 1px);inset-inline-end:0;top:0;width:2px}.--direction-column .button{--rs-tabs-focus-ring-inset:0;margin-inline-start:calc(var(--rs-unit-x2) * -1);padding:var(--rs-unit-x2);width:calc(100% + var(--rs-unit-x1))}.--direction-column .buttonContent{justify-content:flex-start}.--variant-borderless .inner:after,.--variant-pills .inner:after,.--variant-pills-elevated .inner:after{content:none}.--variant-pills,.--variant-pills-elevated{--rs-tabs-gap:var(--rs-unit-x1)}.--variant-pills .button,.--variant-pills-elevated .button{--rs-tabs-focus-ring-inset:0;margin:0;padding:0}.--variant-pills .buttonContent,.--variant-pills-elevated .buttonContent{margin:0;padding:var(--rs-tabs-item-p-v) var(--rs-tabs-item-p-h)}.--variant-pills .selector,.--variant-pills-elevated .selector{background-color:var(--rs-color-background-neutral);height:calc(var(--rs-tab-selection-scale-y) * 1px);width:calc(var(--rs-tab-selection-scale-x) * 1px);z-index:0}.--variant-pills .item:after,.--variant-pills-elevated .item:after{background-color:var(--rs-color-background-neutral);z-index:0}.--variant-pills-elevated.--direction-column .item:after,.--variant-pills.--direction-column .item:after{width:100%}.--variant-pills-elevated.--direction-column .selector,.--variant-pills.--direction-column .selector{left:0}.--variant-pills-elevated.--direction-row .item:after,.--variant-pills.--direction-row .item:after{height:100%}.--variant-pills-elevated.--direction-row .selector,.--variant-pills.--direction-row .selector{top:0}.--variant-pills .item--active:after,.--variant-pills .selector{opacity:.6}.--variant-pills-elevated .list{background:var(--rs-color-background-neutral-faded);border:2px solid transparent;border-radius:var(--rs-radius-medium)}.--variant-pills-elevated .buttonContent{padding:calc(var(--rs-tabs-item-p-v) - var(--rs-unit-x1) / 2) var(--rs-tabs-item-p-h)}.--variant-pills-elevated .item:after,.--variant-pills-elevated .selector{background:var(--rs-color-background-elevation-raised);border-radius:calc(var(--rs-radius-medium) - 1px);box-shadow:var(--rs-shadow-raised);box-sizing:border-box}.--size-medium{--rs-tabs-item-p-v:var(--rs-unit-x2);--rs-tabs-item-p-h:var(--rs-unit-x3)}.--size-large{--rs-tabs-item-p-v:var(--rs-unit-x3);--rs-tabs-item-p-h:var(--rs-unit-x4)}.--item-width-equal{max-width:none}.--item-width-equal .inner{flex-wrap:wrap}.--item-width-equal .list{display:flex}.--item-width-equal .listItem{flex-basis:0;flex-grow:1;margin:0;min-width:0}.--item-width-equal .buttonText{overflow:hidden;text-overflow:ellipsis}.--item-width-equal .button{--rs-tabs-focus-ring-inset:0}.--fade-end .inner,[dir=rtl] .--fade-start .inner{--rs-tabs-mid-r:100%;--rs-tabs-stop-r:calc(100% - var(--rs-unit-x1) * 10)}.--fade-start .inner,[dir=rtl] .--fade-end .inner{--rs-tabs-mid-l:0px;--rs-tabs-stop-l:calc(var(--rs-unit-x1) * 10)}@media (pointer:fine){.control{display:flex}.--fade-end .inner,[dir=rtl] .--fade-start .inner{--rs-tabs-mid-r:calc(100% - var(--rs-unit-x1) * 4);--rs-tabs-stop-r:calc(100% - var(--rs-unit-x1) * 10)}.--fade-start .inner,[dir=rtl] .--fade-end .inner{--rs-tabs-mid-l:calc(var(--rs-unit-x1) * 4);--rs-tabs-stop-l:calc(var(--rs-unit-x1) * 10)}}
package/dist/components/Tabs/Tabs.types.d.ts CHANGED
@@ -53,6 +53,8 @@ export type BaseProps = {
53
53
  size?: "medium" | "large";
54
54
  /** Name of the tab buttons group when used as a form control */
55
55
  name?: string;
56
+ /** Disable the animation of the tab button selection */
57
+ disableSelectionAnimation?: boolean;
56
58
  /** Callback when the active tab value changes */
57
59
  onChange?: (args: {
58
60
  value: string;
@@ -75,7 +77,7 @@ export type UncontrolledProps = BaseProps & {
75
77
  defaultValue?: string;
76
78
  };
77
79
  export type Props = ControlledProps | UncontrolledProps;
78
- export type Context = Pick<BaseProps, "itemWidth" | "onChange" | "variant" | "name" | "direction"> & {
80
+ export type Context = Pick<BaseProps, "itemWidth" | "onChange" | "variant" | "name" | "direction" | "disableSelectionAnimation"> & {
79
81
  size: NonNullable<BaseProps["size"]>;
80
82
  value?: string;
81
83
  setDefaultValue: (value: string) => void;
package/dist/components/Tabs/TabsContext.d.ts CHANGED
@@ -12,6 +12,7 @@ export declare const useTabs: (value?: string) => {
12
12
  name?: string;
13
13
  }) => void) | undefined;
14
14
  itemWidth?: "equal" | undefined;
15
+ disableSelectionAnimation?: boolean | undefined;
15
16
  size: NonNullable<T.BaseProps["size"]>;
16
17
  value?: string;
17
18
  setDefaultValue: (value: string) => void;
package/dist/components/Tabs/TabsControlled.js CHANGED
@@ -4,7 +4,7 @@ import React from "react";
4
4
  import useElementId from "../../hooks/useElementId.js";
5
5
  import { TabsProvider } from "./TabsContext.js";
6
6
  const TabsControlled = (props) => {
7
- const { children, value, onChange, onSilentChange, itemWidth, variant, name, direction = "row", size = "medium", } = props;
7
+ const { children, value, onChange, onSilentChange, itemWidth, variant, name, disableSelectionAnimation, direction = "row", size = "medium", } = props;
8
8
  const id = useElementId();
9
9
  const elActiveRef = React.useRef(null);
10
10
  // eslint-disable-next-line react-hooks/refs
@@ -38,6 +38,7 @@ const TabsControlled = (props) => {
38
38
  elScrollableRef,
39
39
  selection,
40
40
  setSelection,
41
+ disableSelectionAnimation,
41
42
  }, children: children }));
42
43
  };
43
44
  TabsControlled.displayName = "TabsControlled";
package/dist/components/Tabs/TabsItem.js CHANGED
@@ -1,8 +1,8 @@
1
1
  "use client";
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import React from "react";
4
- import HiddenInput from "../_private/HiddenInput/index.js";
5
4
  import Actionable from "../Actionable/index.js";
5
+ import HiddenInput from "../HiddenInput/index.js";
6
6
  import Icon from "../Icon/index.js";
7
7
  import Text from "../Text/index.js";
8
8
  import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
@@ -16,7 +16,7 @@ const TabsItem = React.forwardRef((props, ref) => {
16
16
  const itemRef = React.useRef(null);
17
17
  const active = tabsValue === value;
18
18
  const visuallySelected = active && selection.status === "idle";
19
- const itemClassNames = classNames(s.item, visuallySelected && s["--item-active"], disabled && s["--item-disabled"]);
19
+ const itemClassNames = classNames(s.item, visuallySelected && s["item--active"], disabled && s["item--disabled"]);
20
20
  const isFormControl = !!name;
21
21
  const tabAttributes = {
22
22
  role: "tab",
@@ -60,7 +60,7 @@ const TabsItem = React.forwardRef((props, ref) => {
60
60
  return;
61
61
  updateRefs();
62
62
  }, [active, updateRefs]);
63
- return (_jsx("div", { ...attributes, className: itemClassNames, ref: itemRef, role: "presentation", children: _jsxs(Actionable, { ref: ref, href: href, insetFocus: true, disabled: disabled, onClick: !name ? handleChange : undefined, className: s.button, as: name ? "label" : undefined, attributes: {
63
+ return (_jsx("div", { ...attributes, className: itemClassNames, ref: itemRef, role: "presentation", children: _jsxs(Actionable, { ref: ref, href: href, disableFocusRing: true, disabled: disabled, onClick: !name ? handleChange : undefined, className: s.button, as: name ? "label" : undefined, attributes: {
64
64
  ...(!isFormControl && tabAttributes),
65
65
  "aria-controls": panelId,
66
66
  id: buttonId,
package/dist/components/Tabs/TabsList.js CHANGED
@@ -22,11 +22,11 @@ const findParentItem = (el, rootEl) => {
22
22
  };
23
23
  const TabsList = (props) => {
24
24
  const { children, className, attributes } = props;
25
- const { value, setDefaultValue, itemWidth, variant, name, direction, size, selection, setSelection, elActiveRef, elPrevActiveRef, elScrollableRef, } = useTabs();
25
+ const { value, setDefaultValue, itemWidth, variant, name, direction, size, selection, setSelection, elActiveRef, elPrevActiveRef, elScrollableRef, disableSelectionAnimation, } = useTabs();
26
26
  const [rtl] = useRTL();
27
27
  const fadeSide = useFadeSide(elScrollableRef, { disabled: itemWidth === "equal" });
28
28
  const rootClassNames = classNames(s.root, size && s[`--size-${size}`], direction && s[`--direction-${direction}`], itemWidth && s[`--item-width-${itemWidth}`], variant && s[`--variant-${variant}`], fadeSide && s["--scrollable"], (fadeSide === "start" || fadeSide === "both") && s["--fade-start"], (fadeSide === "end" || fadeSide === "both") && s["--fade-end"], className);
29
- const selectorClassNames = classNames(s.selector, selection.status === "idle" && s["--selector-hidden"], selection.status === "animated" && s["--selector-animated"]);
29
+ const selectorClassNames = classNames(s.selector, selection.status === "idle" && s["selector--hidden"], selection.status === "animated" && s["selector--animated"]);
30
30
  const handleNextClick = () => {
31
31
  elScrollableRef.current.scrollBy({
32
32
  // Using ceil here since during the second navigation half of the value may be
@@ -79,8 +79,12 @@ const TabsList = (props) => {
79
79
  const selectionStyle = getElementSelectionStyle(elPrevActiveRef.current);
80
80
  if (!selectionStyle)
81
81
  return;
82
+ if (disableSelectionAnimation) {
83
+ setSelection({ ...selectionStyle, status: "idle" });
84
+ return;
85
+ }
82
86
  setSelection({ ...selectionStyle, status: "prepared" });
83
- }, [value, getElementSelectionStyle]);
87
+ }, [value, getElementSelectionStyle, disableSelectionAnimation]);
84
88
  useIsomorphicLayoutEffect(() => {
85
89
  if (selection.status !== "prepared" || !elActiveRef.current)
86
90
  return;
@@ -94,12 +98,12 @@ const TabsList = (props) => {
94
98
  return null;
95
99
  const props = child.props;
96
100
  return (_jsx("div", { className: s.listItem, "data-rs-tabs-item": true, children: child }, props.value || child.key || index));
97
- }), _jsx("div", { onTransitionEnd: handleTransitionEnd, className: selectorClassNames, style: {
101
+ }), !disableSelectionAnimation && (_jsx("div", { onTransitionEnd: handleTransitionEnd, className: selectorClassNames, style: {
98
102
  "--rs-tab-selection-x": selection.left,
99
103
  "--rs-tab-selection-y": selection.top,
100
104
  "--rs-tab-selection-scale-x": selection.scaleX,
101
105
  "--rs-tab-selection-scale-y": selection.scaleY,
102
- } })] }) }), _jsx(Actionable, { onClick: handlePrevClick, touchHitbox: true, attributes: { "aria-hidden": true, tabIndex: -1 }, className: [
106
+ } }))] }) }), _jsx(Actionable, { onClick: handlePrevClick, touchHitbox: true, attributes: { "aria-hidden": true, tabIndex: -1 }, className: [
103
107
  s.control,
104
108
  s["control--prev"],
105
109
  (fadeSide === "start" || fadeSide === "both") && s["control--active"],
package/dist/components/Tabs/TabsPanel.js CHANGED
@@ -11,7 +11,7 @@ const TabsPanel = (props) => {
11
11
  const [needsTabIndex, setNeedsTabIndex] = React.useState(true);
12
12
  const rootRef = React.useRef(null);
13
13
  const active = panelValue === value;
14
- const panelClassNames = classNames(s.panel, !active && s["--panel-hidden"], className);
14
+ const panelClassNames = classNames(s.panel, !active && s["panel--hidden"], className);
15
15
  React.useEffect(() => {
16
16
  const el = rootRef.current;
17
17
  if (!el)
package/dist/components/Text/Text.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import type * as T from "./Text.types";
2
2
  declare const Text: {
3
- <As extends keyof React.JSX.IntrinsicElements>(props: T.Props<As>): import("react/jsx-runtime").JSX.Element;
3
+ <As extends keyof React.JSX.IntrinsicElements = "div">(props: T.Props<As>): import("react/jsx-runtime").JSX.Element;
4
4
  displayName: string;
5
5
  };
6
6
  export default Text;
package/dist/components/Text/Text.js CHANGED
@@ -11,13 +11,13 @@ const tagMap = {
11
11
  "title-6": "h6",
12
12
  };
13
13
  const Text = (props) => {
14
- const { variant, color, weight, align, decoration, maxLines, wrap, monospace, children, className, attributes, } = props;
14
+ const { variant, color, weight, align, decoration, maxLines, wrap, monospace, numeric, children, className, attributes, } = props;
15
15
  const largestVariant = typeof variant === "string" ? variant : variant?.xl || variant?.l || variant?.m || variant?.s;
16
16
  const mixinStyles = resolveMixin({ textAlign: align });
17
17
  // Using any here to let TS save on type resolving, otherwise TS throws an error due to the type complexity
18
18
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
19
19
  const TagName = props.as || (largestVariant && tagMap[largestVariant]) || "div";
20
- const rootClassName = classNames(s.root, color && s[`--color-${color}`], ...responsiveClassNames(s, "--variant", variant), ...responsiveClassNames(s, "--weight", weight), decoration && s[`--decoration-${decoration}`], maxLines !== undefined && s[`--clamp`], maxLines === 1 && s["--break-all"], wrap && s[`--wrap-${wrap}`], monospace && s["--monospace"], className, mixinStyles.classNames);
20
+ const rootClassName = classNames(s.root, color && s[`--color-${color}`], ...responsiveClassNames(s, "--variant", variant), ...responsiveClassNames(s, "--weight", weight), decoration && s[`--decoration-${decoration}`], maxLines !== undefined && s[`--clamp`], maxLines === 1 && s["--break-all"], wrap && s[`--wrap-${wrap}`], monospace && s["--monospace"], numeric && s["--numeric"], className, mixinStyles.classNames);
21
21
  const style = {
22
22
  ...attributes?.style,
23
23
  ...mixinStyles.variables,
package/dist/components/Text/Text.module.css CHANGED
@@ -1 +1 @@
1
- @layer rs.text.reset{.root{font-family:unset;font-size:unset;font-style:normal;font-weight:unset;letter-spacing:0;margin:0;padding:0;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none}}.root{transition:color var(--rs-duration-fast) var(--rs-easing-standard)}.--clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--rs-text-lines);overflow:hidden}.--break-all{word-break:break-all}.--wrap-balance{text-wrap:balance}.--variant-title-1{font-family:var(--rs-font-family-title-1);font-size:var(--rs-font-size-title-1);font-weight:var(--rs-font-weight-title-1);letter-spacing:var(--rs-letter-spacing-title-1);line-height:var(--rs-line-height-title-1)}.--variant-title-2{font-family:var(--rs-font-family-title-2);font-size:var(--rs-font-size-title-2);font-weight:var(--rs-font-weight-title-2);letter-spacing:var(--rs-letter-spacing-title-2);line-height:var(--rs-line-height-title-2)}.--variant-title-3{font-family:var(--rs-font-family-title-3);font-size:var(--rs-font-size-title-3);font-weight:var(--rs-font-weight-title-3);letter-spacing:var(--rs-letter-spacing-title-3);line-height:var(--rs-line-height-title-3)}.--variant-title-4{font-family:var(--rs-font-family-title-4);font-size:var(--rs-font-size-title-4);font-weight:var(--rs-font-weight-title-4);letter-spacing:var(--rs-letter-spacing-title-4);line-height:var(--rs-line-height-title-4)}.--variant-title-5{font-family:var(--rs-font-family-title-5);font-size:var(--rs-font-size-title-5);font-weight:var(--rs-font-weight-title-5);letter-spacing:var(--rs-letter-spacing-title-5);line-height:var(--rs-line-height-title-5)}.--variant-title-6{font-family:var(--rs-font-family-title-6);font-size:var(--rs-font-size-title-6);font-weight:var(--rs-font-weight-title-6);letter-spacing:var(--rs-letter-spacing-title-6);line-height:var(--rs-line-height-title-6)}.--variant-featured-1{font-family:var(--rs-font-family-featured-1);font-size:var(--rs-font-size-featured-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-1);line-height:var(--rs-line-height-featured-1)}.--variant-featured-2{font-family:var(--rs-font-family-featured-2);font-size:var(--rs-font-size-featured-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-2);line-height:var(--rs-line-height-featured-2)}.--variant-featured-3{font-family:var(--rs-font-family-featured-3);font-size:var(--rs-font-size-featured-3);letter-spacing:var(--rs-letter-spacing-featured-3);line-height:var(--rs-line-height-featured-3)}.--variant-body-1,.--variant-featured-3{font-weight:var(--rs-font-weight-regular)}.--variant-body-1{font-family:var(--rs-font-family-body-1);font-size:var(--rs-font-size-body-1);letter-spacing:var(--rs-letter-spacing-body-1);line-height:var(--rs-line-height-body-1)}.--variant-body-2{font-family:var(--rs-font-family-body-2);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--variant-body-2,.--variant-body-3{font-weight:var(--rs-font-weight-regular)}.--variant-body-3{font-family:var(--rs-font-family-body-3);font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--variant-caption-1{font-family:var(--rs-font-family-caption-1);font-size:var(--rs-font-size-caption-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-caption-1);line-height:var(--rs-line-height-caption-1)}.--variant-caption-2{font-family:var(--rs-font-family-caption-2);font-size:var(--rs-font-size-caption-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-caption-2);line-height:var(--rs-line-height-caption-2)}.--weight-regular{font-weight:var(--rs-font-weight-regular)!important}.--weight-medium{font-weight:var(--rs-font-weight-medium)!important}.--weight-bold{font-weight:var(--rs-font-weight-bold)!important}.--color-neutral{color:var(--rs-color-foreground-neutral)}.--color-neutral-faded{color:var(--rs-color-foreground-neutral-faded)}.--color-primary{color:var(--rs-color-foreground-primary)}.--color-warning{color:var(--rs-color-foreground-warning)}.--color-positive{color:var(--rs-color-foreground-positive)}.--color-critical{color:var(--rs-color-foreground-critical)}.--color-disabled{color:var(--rs-color-foreground-disabled)}.--decoration-line-through{text-decoration:line-through}.--monospace{font-family:var(--rs-font-family-monospace)}@media (--rs-viewport-m ){.--variant-title-1--m{font-family:var(--rs-font-family-title-1);font-size:var(--rs-font-size-title-1);font-weight:var(--rs-font-weight-title-1);letter-spacing:var(--rs-letter-spacing-title-1);line-height:var(--rs-line-height-title-1)}.--variant-title-2--m{font-family:var(--rs-font-family-title-2);font-size:var(--rs-font-size-title-2);font-weight:var(--rs-font-weight-title-2);letter-spacing:var(--rs-letter-spacing-title-2);line-height:var(--rs-line-height-title-2)}.--variant-title-3--m{font-family:var(--rs-font-family-title-3);font-size:var(--rs-font-size-title-3);font-weight:var(--rs-font-weight-title-3);letter-spacing:var(--rs-letter-spacing-title-3);line-height:var(--rs-line-height-title-3)}.--variant-title-4--m{font-family:var(--rs-font-family-title-4);font-size:var(--rs-font-size-title-4);font-weight:var(--rs-font-weight-title-4);letter-spacing:var(--rs-letter-spacing-title-4);line-height:var(--rs-line-height-title-4)}.--variant-title-5--m{font-family:var(--rs-font-family-title-5);font-size:var(--rs-font-size-title-5);font-weight:var(--rs-font-weight-title-5);letter-spacing:var(--rs-letter-spacing-title-5);line-height:var(--rs-line-height-title-5)}.--variant-title-6--m{font-family:var(--rs-font-family-title-6);font-size:var(--rs-font-size-title-6);font-weight:var(--rs-font-weight-title-6);letter-spacing:var(--rs-letter-spacing-title-6);line-height:var(--rs-line-height-title-6)}.--variant-featured-1--m{font-family:var(--rs-font-family-featured-1);font-size:var(--rs-font-size-featured-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-1);line-height:var(--rs-line-height-featured-1)}.--variant-featured-2--m{font-family:var(--rs-font-family-featured-2);font-size:var(--rs-font-size-featured-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-2);line-height:var(--rs-line-height-featured-2)}.--variant-featured-3--m{font-family:var(--rs-font-family-featured-3);font-size:var(--rs-font-size-featured-3);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-3);line-height:var(--rs-line-height-featured-3)}.--variant-body-1--m{font-family:var(--rs-font-family-body-1);font-size:var(--rs-font-size-body-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-1);line-height:var(--rs-line-height-body-1)}.--variant-body-2--m{font-family:var(--rs-font-family-body-2);font-size:var(--rs-font-size-body-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--variant-body-3--m{font-family:var(--rs-font-family-body-3);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--variant-caption-1--m{font-family:var(--rs-font-family-caption-1);font-size:var(--rs-font-size-caption-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-caption-1);line-height:var(--rs-line-height-caption-1)}.--variant-caption-2--m{font-family:var(--rs-font-family-caption-2);font-size:var(--rs-font-size-caption-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-caption-2);line-height:var(--rs-line-height-caption-2)}.--weight-regular--m{font-weight:var(--rs-font-weight-regular)!important}.--weight-medium--m{font-weight:var(--rs-font-weight-medium)!important}.--weight-bold--m{font-weight:var(--rs-font-weight-bold)!important}}@media (--rs-viewport-l ){.--variant-title-1--l{font-family:var(--rs-font-family-title-1);font-size:var(--rs-font-size-title-1);font-weight:var(--rs-font-weight-title-1);letter-spacing:var(--rs-letter-spacing-title-1);line-height:var(--rs-line-height-title-1)}.--variant-title-2--l{font-family:var(--rs-font-family-title-2);font-size:var(--rs-font-size-title-2);font-weight:var(--rs-font-weight-title-2);letter-spacing:var(--rs-letter-spacing-title-2);line-height:var(--rs-line-height-title-2)}.--variant-title-3--l{font-family:var(--rs-font-family-title-3);font-size:var(--rs-font-size-title-3);font-weight:var(--rs-font-weight-title-3);letter-spacing:var(--rs-letter-spacing-title-3);line-height:var(--rs-line-height-title-3)}.--variant-title-4--l{font-family:var(--rs-font-family-title-4);font-size:var(--rs-font-size-title-4);font-weight:var(--rs-font-weight-title-4);letter-spacing:var(--rs-letter-spacing-title-4);line-height:var(--rs-line-height-title-4)}.--variant-title-5--l{font-family:var(--rs-font-family-title-5);font-size:var(--rs-font-size-title-5);font-weight:var(--rs-font-weight-title-5);letter-spacing:var(--rs-letter-spacing-title-5);line-height:var(--rs-line-height-title-5)}.--variant-title-6--l{font-family:var(--rs-font-family-title-6);font-size:var(--rs-font-size-title-6);font-weight:var(--rs-font-weight-title-6);letter-spacing:var(--rs-letter-spacing-title-6);line-height:var(--rs-line-height-title-6)}.--variant-featured-1--l{font-family:var(--rs-font-family-featured-1);font-size:var(--rs-font-size-featured-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-1);line-height:var(--rs-line-height-featured-1)}.--variant-featured-2--l{font-family:var(--rs-font-family-featured-2);font-size:var(--rs-font-size-featured-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-2);line-height:var(--rs-line-height-featured-2)}.--variant-featured-3--l{font-family:var(--rs-font-family-featured-3);font-size:var(--rs-font-size-featured-3);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-3);line-height:var(--rs-line-height-featured-3)}.--variant-body-1--l{font-family:var(--rs-font-family-body-1);font-size:var(--rs-font-size-body-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-1);line-height:var(--rs-line-height-body-1)}.--variant-body-2--l{font-family:var(--rs-font-family-body-2);font-size:var(--rs-font-size-body-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--variant-body-3--l{font-family:var(--rs-font-family-body-3);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--variant-caption-1--l{font-family:var(--rs-font-family-caption-1);font-size:var(--rs-font-size-caption-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-caption-1);line-height:var(--rs-line-height-caption-1)}.--variant-caption-2--l{font-family:var(--rs-font-family-caption-2);font-size:var(--rs-font-size-caption-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-caption-2);line-height:var(--rs-line-height-caption-2)}.--weight-regular--l{font-weight:var(--rs-font-weight-regular)!important}.--weight-medium--l{font-weight:var(--rs-font-weight-medium)!important}.--weight-bold--l{font-weight:var(--rs-font-weight-bold)!important}}@media (--rs-viewport-xl ){.--variant-title-1--xl{font-family:var(--rs-font-family-title-1);font-size:var(--rs-font-size-title-1);font-weight:var(--rs-font-weight-title-1);letter-spacing:var(--rs-letter-spacing-title-1);line-height:var(--rs-line-height-title-1)}.--variant-title-2--xl{font-family:var(--rs-font-family-title-2);font-size:var(--rs-font-size-title-2);font-weight:var(--rs-font-weight-title-2);letter-spacing:var(--rs-letter-spacing-title-2);line-height:var(--rs-line-height-title-2)}.--variant-title-3--xl{font-family:var(--rs-font-family-title-3);font-size:var(--rs-font-size-title-3);font-weight:var(--rs-font-weight-title-3);letter-spacing:var(--rs-letter-spacing-title-3);line-height:var(--rs-line-height-title-3)}.--variant-title-4--xl{font-family:var(--rs-font-family-title-4);font-size:var(--rs-font-size-title-4);font-weight:var(--rs-font-weight-title-4);letter-spacing:var(--rs-letter-spacing-title-4);line-height:var(--rs-line-height-title-4)}.--variant-title-5--xl{font-family:var(--rs-font-family-title-5);font-size:var(--rs-font-size-title-5);font-weight:var(--rs-font-weight-title-5);letter-spacing:var(--rs-letter-spacing-title-5);line-height:var(--rs-line-height-title-5)}.--variant-title-6--xl{font-family:var(--rs-font-family-title-6);font-size:var(--rs-font-size-title-6);font-weight:var(--rs-font-weight-title-6);letter-spacing:var(--rs-letter-spacing-title-6);line-height:var(--rs-line-height-title-6)}.--variant-featured-1--xl{font-family:var(--rs-font-family-featured-1);font-size:var(--rs-font-size-featured-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-1);line-height:var(--rs-line-height-featured-1)}.--variant-featured-2--xl{font-family:var(--rs-font-family-featured-2);font-size:var(--rs-font-size-featured-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-2);line-height:var(--rs-line-height-featured-2)}.--variant-featured-3--xl{font-family:var(--rs-font-family-featured-3);font-size:var(--rs-font-size-featured-3);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-3);line-height:var(--rs-line-height-featured-3)}.--variant-body-1--xl{font-family:var(--rs-font-family-body-1);font-size:var(--rs-font-size-body-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-1);line-height:var(--rs-line-height-body-1)}.--variant-body-2--xl{font-family:var(--rs-font-family-body-2);font-size:var(--rs-font-size-body-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--variant-body-3--xl{font-family:var(--rs-font-family-body-3);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--variant-caption-1--xl{font-family:var(--rs-font-family-caption-1);font-size:var(--rs-font-size-caption-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-caption-1);line-height:var(--rs-line-height-caption-1)}.--variant-caption-2--xl{font-family:var(--rs-font-family-caption-2);font-size:var(--rs-font-size-caption-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-caption-2);line-height:var(--rs-line-height-caption-2)}.--weight-regular--xl{font-weight:var(--rs-font-weight-regular)!important}.--weight-medium--xl{font-weight:var(--rs-font-weight-medium)!important}.--weight-bold--xl{font-weight:var(--rs-font-weight-bold)!important}}
1
+ @layer rs.text.reset{.root{font-family:unset;font-size:unset;font-style:normal;font-weight:unset;letter-spacing:0;margin:0;padding:0;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none}}.root{transition:color var(--rs-duration-fast) var(--rs-easing-standard)}.--clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--rs-text-lines);overflow:hidden}.--break-all{word-break:break-all}.--wrap-balance{text-wrap:balance}.--numeric{font-variant-numeric:tabular-nums}.--variant-title-1{font-family:var(--rs-font-family-title-1);font-size:var(--rs-font-size-title-1);font-weight:var(--rs-font-weight-title-1);letter-spacing:var(--rs-letter-spacing-title-1);line-height:var(--rs-line-height-title-1)}.--variant-title-2{font-family:var(--rs-font-family-title-2);font-size:var(--rs-font-size-title-2);font-weight:var(--rs-font-weight-title-2);letter-spacing:var(--rs-letter-spacing-title-2);line-height:var(--rs-line-height-title-2)}.--variant-title-3{font-family:var(--rs-font-family-title-3);font-size:var(--rs-font-size-title-3);font-weight:var(--rs-font-weight-title-3);letter-spacing:var(--rs-letter-spacing-title-3);line-height:var(--rs-line-height-title-3)}.--variant-title-4{font-family:var(--rs-font-family-title-4);font-size:var(--rs-font-size-title-4);font-weight:var(--rs-font-weight-title-4);letter-spacing:var(--rs-letter-spacing-title-4);line-height:var(--rs-line-height-title-4)}.--variant-title-5{font-family:var(--rs-font-family-title-5);font-size:var(--rs-font-size-title-5);font-weight:var(--rs-font-weight-title-5);letter-spacing:var(--rs-letter-spacing-title-5);line-height:var(--rs-line-height-title-5)}.--variant-title-6{font-family:var(--rs-font-family-title-6);font-size:var(--rs-font-size-title-6);font-weight:var(--rs-font-weight-title-6);letter-spacing:var(--rs-letter-spacing-title-6);line-height:var(--rs-line-height-title-6)}.--variant-featured-1{font-family:var(--rs-font-family-featured-1);font-size:var(--rs-font-size-featured-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-1);line-height:var(--rs-line-height-featured-1)}.--variant-featured-2{font-family:var(--rs-font-family-featured-2);font-size:var(--rs-font-size-featured-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-2);line-height:var(--rs-line-height-featured-2)}.--variant-featured-3{font-family:var(--rs-font-family-featured-3);font-size:var(--rs-font-size-featured-3);letter-spacing:var(--rs-letter-spacing-featured-3);line-height:var(--rs-line-height-featured-3)}.--variant-body-1,.--variant-featured-3{font-weight:var(--rs-font-weight-regular)}.--variant-body-1{font-family:var(--rs-font-family-body-1);font-size:var(--rs-font-size-body-1);letter-spacing:var(--rs-letter-spacing-body-1);line-height:var(--rs-line-height-body-1)}.--variant-body-2{font-family:var(--rs-font-family-body-2);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--variant-body-2,.--variant-body-3{font-weight:var(--rs-font-weight-regular)}.--variant-body-3{font-family:var(--rs-font-family-body-3);font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--variant-caption-1{font-family:var(--rs-font-family-caption-1);font-size:var(--rs-font-size-caption-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-caption-1);line-height:var(--rs-line-height-caption-1)}.--variant-caption-2{font-family:var(--rs-font-family-caption-2);font-size:var(--rs-font-size-caption-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-caption-2);line-height:var(--rs-line-height-caption-2)}.--weight-regular{font-weight:var(--rs-font-weight-regular)!important}.--weight-medium{font-weight:var(--rs-font-weight-medium)!important}.--weight-bold{font-weight:var(--rs-font-weight-bold)!important}.--color-neutral{color:var(--rs-color-foreground-neutral)}.--color-neutral-faded{color:var(--rs-color-foreground-neutral-faded)}.--color-primary{color:var(--rs-color-foreground-primary)}.--color-warning{color:var(--rs-color-foreground-warning)}.--color-positive{color:var(--rs-color-foreground-positive)}.--color-critical{color:var(--rs-color-foreground-critical)}.--color-disabled{color:var(--rs-color-foreground-disabled)}.--decoration-line-through{text-decoration:line-through}.--monospace{font-family:var(--rs-font-family-monospace)}@media (--rs-viewport-m ){.--variant-title-1--m{font-family:var(--rs-font-family-title-1);font-size:var(--rs-font-size-title-1);font-weight:var(--rs-font-weight-title-1);letter-spacing:var(--rs-letter-spacing-title-1);line-height:var(--rs-line-height-title-1)}.--variant-title-2--m{font-family:var(--rs-font-family-title-2);font-size:var(--rs-font-size-title-2);font-weight:var(--rs-font-weight-title-2);letter-spacing:var(--rs-letter-spacing-title-2);line-height:var(--rs-line-height-title-2)}.--variant-title-3--m{font-family:var(--rs-font-family-title-3);font-size:var(--rs-font-size-title-3);font-weight:var(--rs-font-weight-title-3);letter-spacing:var(--rs-letter-spacing-title-3);line-height:var(--rs-line-height-title-3)}.--variant-title-4--m{font-family:var(--rs-font-family-title-4);font-size:var(--rs-font-size-title-4);font-weight:var(--rs-font-weight-title-4);letter-spacing:var(--rs-letter-spacing-title-4);line-height:var(--rs-line-height-title-4)}.--variant-title-5--m{font-family:var(--rs-font-family-title-5);font-size:var(--rs-font-size-title-5);font-weight:var(--rs-font-weight-title-5);letter-spacing:var(--rs-letter-spacing-title-5);line-height:var(--rs-line-height-title-5)}.--variant-title-6--m{font-family:var(--rs-font-family-title-6);font-size:var(--rs-font-size-title-6);font-weight:var(--rs-font-weight-title-6);letter-spacing:var(--rs-letter-spacing-title-6);line-height:var(--rs-line-height-title-6)}.--variant-featured-1--m{font-family:var(--rs-font-family-featured-1);font-size:var(--rs-font-size-featured-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-1);line-height:var(--rs-line-height-featured-1)}.--variant-featured-2--m{font-family:var(--rs-font-family-featured-2);font-size:var(--rs-font-size-featured-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-2);line-height:var(--rs-line-height-featured-2)}.--variant-featured-3--m{font-family:var(--rs-font-family-featured-3);font-size:var(--rs-font-size-featured-3);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-3);line-height:var(--rs-line-height-featured-3)}.--variant-body-1--m{font-family:var(--rs-font-family-body-1);font-size:var(--rs-font-size-body-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-1);line-height:var(--rs-line-height-body-1)}.--variant-body-2--m{font-family:var(--rs-font-family-body-2);font-size:var(--rs-font-size-body-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--variant-body-3--m{font-family:var(--rs-font-family-body-3);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--variant-caption-1--m{font-family:var(--rs-font-family-caption-1);font-size:var(--rs-font-size-caption-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-caption-1);line-height:var(--rs-line-height-caption-1)}.--variant-caption-2--m{font-family:var(--rs-font-family-caption-2);font-size:var(--rs-font-size-caption-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-caption-2);line-height:var(--rs-line-height-caption-2)}.--weight-regular--m{font-weight:var(--rs-font-weight-regular)!important}.--weight-medium--m{font-weight:var(--rs-font-weight-medium)!important}.--weight-bold--m{font-weight:var(--rs-font-weight-bold)!important}}@media (--rs-viewport-l ){.--variant-title-1--l{font-family:var(--rs-font-family-title-1);font-size:var(--rs-font-size-title-1);font-weight:var(--rs-font-weight-title-1);letter-spacing:var(--rs-letter-spacing-title-1);line-height:var(--rs-line-height-title-1)}.--variant-title-2--l{font-family:var(--rs-font-family-title-2);font-size:var(--rs-font-size-title-2);font-weight:var(--rs-font-weight-title-2);letter-spacing:var(--rs-letter-spacing-title-2);line-height:var(--rs-line-height-title-2)}.--variant-title-3--l{font-family:var(--rs-font-family-title-3);font-size:var(--rs-font-size-title-3);font-weight:var(--rs-font-weight-title-3);letter-spacing:var(--rs-letter-spacing-title-3);line-height:var(--rs-line-height-title-3)}.--variant-title-4--l{font-family:var(--rs-font-family-title-4);font-size:var(--rs-font-size-title-4);font-weight:var(--rs-font-weight-title-4);letter-spacing:var(--rs-letter-spacing-title-4);line-height:var(--rs-line-height-title-4)}.--variant-title-5--l{font-family:var(--rs-font-family-title-5);font-size:var(--rs-font-size-title-5);font-weight:var(--rs-font-weight-title-5);letter-spacing:var(--rs-letter-spacing-title-5);line-height:var(--rs-line-height-title-5)}.--variant-title-6--l{font-family:var(--rs-font-family-title-6);font-size:var(--rs-font-size-title-6);font-weight:var(--rs-font-weight-title-6);letter-spacing:var(--rs-letter-spacing-title-6);line-height:var(--rs-line-height-title-6)}.--variant-featured-1--l{font-family:var(--rs-font-family-featured-1);font-size:var(--rs-font-size-featured-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-1);line-height:var(--rs-line-height-featured-1)}.--variant-featured-2--l{font-family:var(--rs-font-family-featured-2);font-size:var(--rs-font-size-featured-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-2);line-height:var(--rs-line-height-featured-2)}.--variant-featured-3--l{font-family:var(--rs-font-family-featured-3);font-size:var(--rs-font-size-featured-3);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-3);line-height:var(--rs-line-height-featured-3)}.--variant-body-1--l{font-family:var(--rs-font-family-body-1);font-size:var(--rs-font-size-body-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-1);line-height:var(--rs-line-height-body-1)}.--variant-body-2--l{font-family:var(--rs-font-family-body-2);font-size:var(--rs-font-size-body-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--variant-body-3--l{font-family:var(--rs-font-family-body-3);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--variant-caption-1--l{font-family:var(--rs-font-family-caption-1);font-size:var(--rs-font-size-caption-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-caption-1);line-height:var(--rs-line-height-caption-1)}.--variant-caption-2--l{font-family:var(--rs-font-family-caption-2);font-size:var(--rs-font-size-caption-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-caption-2);line-height:var(--rs-line-height-caption-2)}.--weight-regular--l{font-weight:var(--rs-font-weight-regular)!important}.--weight-medium--l{font-weight:var(--rs-font-weight-medium)!important}.--weight-bold--l{font-weight:var(--rs-font-weight-bold)!important}}@media (--rs-viewport-xl ){.--variant-title-1--xl{font-family:var(--rs-font-family-title-1);font-size:var(--rs-font-size-title-1);font-weight:var(--rs-font-weight-title-1);letter-spacing:var(--rs-letter-spacing-title-1);line-height:var(--rs-line-height-title-1)}.--variant-title-2--xl{font-family:var(--rs-font-family-title-2);font-size:var(--rs-font-size-title-2);font-weight:var(--rs-font-weight-title-2);letter-spacing:var(--rs-letter-spacing-title-2);line-height:var(--rs-line-height-title-2)}.--variant-title-3--xl{font-family:var(--rs-font-family-title-3);font-size:var(--rs-font-size-title-3);font-weight:var(--rs-font-weight-title-3);letter-spacing:var(--rs-letter-spacing-title-3);line-height:var(--rs-line-height-title-3)}.--variant-title-4--xl{font-family:var(--rs-font-family-title-4);font-size:var(--rs-font-size-title-4);font-weight:var(--rs-font-weight-title-4);letter-spacing:var(--rs-letter-spacing-title-4);line-height:var(--rs-line-height-title-4)}.--variant-title-5--xl{font-family:var(--rs-font-family-title-5);font-size:var(--rs-font-size-title-5);font-weight:var(--rs-font-weight-title-5);letter-spacing:var(--rs-letter-spacing-title-5);line-height:var(--rs-line-height-title-5)}.--variant-title-6--xl{font-family:var(--rs-font-family-title-6);font-size:var(--rs-font-size-title-6);font-weight:var(--rs-font-weight-title-6);letter-spacing:var(--rs-letter-spacing-title-6);line-height:var(--rs-line-height-title-6)}.--variant-featured-1--xl{font-family:var(--rs-font-family-featured-1);font-size:var(--rs-font-size-featured-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-1);line-height:var(--rs-line-height-featured-1)}.--variant-featured-2--xl{font-family:var(--rs-font-family-featured-2);font-size:var(--rs-font-size-featured-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-2);line-height:var(--rs-line-height-featured-2)}.--variant-featured-3--xl{font-family:var(--rs-font-family-featured-3);font-size:var(--rs-font-size-featured-3);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-3);line-height:var(--rs-line-height-featured-3)}.--variant-body-1--xl{font-family:var(--rs-font-family-body-1);font-size:var(--rs-font-size-body-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-1);line-height:var(--rs-line-height-body-1)}.--variant-body-2--xl{font-family:var(--rs-font-family-body-2);font-size:var(--rs-font-size-body-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--variant-body-3--xl{font-family:var(--rs-font-family-body-3);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--variant-caption-1--xl{font-family:var(--rs-font-family-caption-1);font-size:var(--rs-font-size-caption-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-caption-1);line-height:var(--rs-line-height-caption-1)}.--variant-caption-2--xl{font-family:var(--rs-font-family-caption-2);font-size:var(--rs-font-size-caption-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-caption-2);line-height:var(--rs-line-height-caption-2)}.--weight-regular--xl{font-weight:var(--rs-font-weight-regular)!important}.--weight-medium--xl{font-weight:var(--rs-font-weight-medium)!important}.--weight-bold--xl{font-weight:var(--rs-font-weight-bold)!important}}
package/dist/components/Text/Text.types.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import type React from "react";
2
2
  import type * as G from "../../types/global";
3
3
  export type Variant = "title-1" | "title-2" | "title-3" | "title-4" | "title-5" | "title-6" | "featured-1" | "featured-2" | "featured-3" | "body-1" | "body-2" | "body-3" | "caption-1" | "caption-2";
4
- export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
4
+ export type Props<TagName extends keyof React.JSX.IntrinsicElements | void = void> = {
5
5
  /** Text render variant */
6
6
  variant?: G.Responsive<Variant>;
7
7
  /** Text font weight */
@@ -18,12 +18,14 @@ export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
18
18
  decoration?: "line-through";
19
19
  /** Maximum number of lines to render, used for text truncation */
20
20
  maxLines?: number;
21
- /** Render as a different html tag */
22
- as?: TagName;
21
+ /** Render as a numeric value to preserve the width of each character */
22
+ numeric?: true;
23
23
  /** Node for inserting children */
24
24
  children?: React.ReactNode;
25
25
  /** Additional classname for the root element */
26
26
  className?: G.ClassName;
27
27
  /** Additional attributes for the root element */
28
28
  attributes?: G.Attributes<TagName>;
29
+ /** Render as a different html tag */
30
+ as?: TagName extends keyof React.JSX.IntrinsicElements ? TagName : keyof React.JSX.IntrinsicElements;
29
31
  };
package/dist/components/Tooltip/Tooltip.js CHANGED
@@ -5,12 +5,12 @@ import Text from "../Text/index.js";
5
5
  import Theme from "../Theme/index.js";
6
6
  import s from "./Tooltip.module.css";
7
7
  const Tooltip = (props) => {
8
- const { text, children, position = "bottom", color = "inverted", ...flyoutProps } = props;
8
+ const { text, children, position = "bottom", color = "inverted", contentMaxWidth = "360px", ...flyoutProps } = props;
9
9
  if (!text)
10
10
  return children({ ref: null });
11
11
  return (_jsxs(Flyout, { ...flyoutProps, position: position, triggerType: "hover",
12
12
  // Disable group timeouts by default since it's not controlled by the default user events
13
- groupTimeouts: flyoutProps.active === undefined ? true : false, children: [_jsx(Flyout.Trigger, { children: children }), _jsx(Flyout.Content, { children: _jsx(Theme, { colorMode: color, children: _jsx(Text, { variant: "caption-1", className: s.root, children: text }) }) })] }));
13
+ groupTimeouts: flyoutProps.active === undefined ? true : false, contentMaxWidth: contentMaxWidth, children: [_jsx(Flyout.Trigger, { children: children }), _jsx(Flyout.Content, { children: _jsx(Theme, { colorMode: color, children: _jsx(Text, { variant: "caption-1", className: s.root, children: text }) }) })] }));
14
14
  };
15
15
  Tooltip.displayName = "Tooltip";
16
16
  export default Tooltip;
package/dist/components/Tooltip/Tooltip.module.css CHANGED
@@ -1 +1 @@
1
- .root{background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-radius-small);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);max-width:360px;padding:var(--rs-unit-x1) var(--rs-unit-x2)}
1
+ .root{background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-radius-small);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);padding:var(--rs-unit-x1) var(--rs-unit-x2)}
package/dist/components/Tooltip/Tooltip.types.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
  import type { FlyoutProps, FlyoutTriggerAttributes } from "../Flyout";
3
- export type Props = Pick<FlyoutProps, "id" | "position" | "onOpen" | "onClose" | "active" | "disabled" | "disableContentHover" | "containerRef" | "positionRef" | "contentGap" | "contentShift" | "originCoordinates" | "contentAttributes" | "contentClassName"> & {
3
+ export type Props = Pick<FlyoutProps, "id" | "position" | "onOpen" | "onClose" | "active" | "disabled" | "disableContentHover" | "containerRef" | "positionRef" | "contentGap" | "contentShift" | "contentMaxWidth" | "originCoordinates" | "contentAttributes" | "contentClassName" | "instanceRef"> & {
4
4
  /** Node for inserting children */
5
5
  children: (attributes: FlyoutTriggerAttributes) => React.ReactNode;
6
6
  /** Text content for the tooltip */
package/dist/components/View/View.types.d.ts CHANGED
@@ -3,11 +3,11 @@ import type * as TStyles from "../../styles/types";
3
3
  import type * as G from "../../types/global";
4
4
  type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "auto";
5
5
  export type Direction = "row" | "column" | "row-reverse" | "column-reverse";
6
- export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
6
+ export type Props<TagName extends keyof React.JSX.IntrinsicElements | void = void> = {
7
7
  /** Node for inserting the content */
8
8
  children?: React.ReactNode;
9
9
  /** Render as a different element */
10
- as?: TagName;
10
+ as?: TagName extends keyof React.JSX.IntrinsicElements ? TagName : keyof React.JSX.IntrinsicElements;
11
11
  /** Render a divider between each child */
12
12
  divided?: boolean;
13
13
  /** Flex direction for the content */
@@ -97,7 +97,7 @@ export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
97
97
  /** Additional attributes for the root element */
98
98
  attributes?: G.Attributes<TagName>;
99
99
  } & Pick<ItemProps, "grow" | "shrink">;
100
- export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
100
+ export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements | void = void> = {
101
101
  /** Flex order of the item inside the parent */
102
102
  order?: G.Responsive<number>;
103
103
  /** Number of columns the item should span in the parent, View uses 12 columns */
@@ -109,7 +109,7 @@ export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements = "div">
109
109
  /** Individual gap before the item, overrides the parent View gap */
110
110
  gapBefore?: G.Responsive<number> | "auto";
111
111
  /** Render as a different element */
112
- as?: TagName;
112
+ as?: TagName extends keyof React.JSX.IntrinsicElements ? TagName : keyof React.JSX.IntrinsicElements;
113
113
  /** Additional attributes for the root element */
114
114
  attributes?: G.Attributes<TagName>;
115
115
  /** Additional classname for the root element */