reshaped 3.9.0-canary.2 → 3.9.0-canary.24

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 (90) hide show
  1. package/dist/bundle.css +1 -1
  2. package/dist/bundle.d.ts +2 -0
  3. package/dist/bundle.js +2 -31
  4. package/dist/components/Actionable/Actionable.module.css +1 -1
  5. package/dist/components/Autocomplete/Autocomplete.js +2 -2
  6. package/dist/components/Autocomplete/Autocomplete.types.d.ts +1 -1
  7. package/dist/components/Avatar/Avatar.js +7 -24
  8. package/dist/components/Avatar/Avatar.module.css +1 -1
  9. package/dist/components/Badge/Badge.js +2 -2
  10. package/dist/components/Badge/Badge.module.css +1 -1
  11. package/dist/components/Badge/Badge.types.d.ts +1 -1
  12. package/dist/components/Button/Button.module.css +1 -1
  13. package/dist/components/Calendar/Calendar.module.css +1 -1
  14. package/dist/components/Calendar/Calendar.types.d.ts +19 -6
  15. package/dist/components/Calendar/CalendarControlled.js +43 -8
  16. package/dist/components/Calendar/CalendarControls.js +9 -9
  17. package/dist/components/Calendar/CalendarDate.js +9 -7
  18. package/dist/components/Calendar/CalendarMonth.js +2 -2
  19. package/dist/components/Card/Card.d.ts +1 -1
  20. package/dist/components/Card/Card.types.d.ts +5 -5
  21. package/dist/components/Checkbox/Checkbox.js +2 -12
  22. package/dist/components/DropdownMenu/DropdownMenu.types.d.ts +1 -1
  23. package/dist/components/FileUpload/FileUpload.js +7 -5
  24. package/dist/components/FileUpload/FileUpload.module.css +1 -1
  25. package/dist/components/FileUpload/FileUpload.types.d.ts +2 -0
  26. package/dist/components/Flyout/Flyout.constants.d.ts +3 -3
  27. package/dist/components/Flyout/Flyout.constants.js +1 -0
  28. package/dist/components/Flyout/Flyout.module.css +1 -1
  29. package/dist/components/Flyout/Flyout.types.d.ts +8 -7
  30. package/dist/components/Flyout/FlyoutContent.js +4 -3
  31. package/dist/components/Flyout/FlyoutControlled.js +33 -11
  32. package/dist/components/Flyout/useFlyout.d.ts +2 -2
  33. package/dist/components/Flyout/useFlyout.js +8 -21
  34. package/dist/components/Flyout/utilities/calculatePosition.d.ts +6 -6
  35. package/dist/components/Flyout/utilities/calculatePosition.js +24 -17
  36. package/dist/components/Flyout/utilities/constants.d.ts +1 -0
  37. package/dist/components/Flyout/utilities/constants.js +1 -0
  38. package/dist/components/Flyout/utilities/flyout.js +37 -6
  39. package/dist/components/Flyout/utilities/isFullyVisible.d.ts +4 -3
  40. package/dist/components/Flyout/utilities/isFullyVisible.js +5 -4
  41. package/dist/components/Grid/Grid.types.d.ts +4 -4
  42. package/dist/components/HiddenInput/HiddenInput.js +33 -0
  43. package/dist/components/HiddenInput/HiddenInput.types.d.ts +26 -0
  44. package/dist/components/Image/Image.js +13 -8
  45. package/dist/components/Image/Image.module.css +1 -1
  46. package/dist/components/Image/Image.types.d.ts +3 -1
  47. package/dist/components/Modal/Modal.js +2 -5
  48. package/dist/components/Modal/Modal.module.css +1 -1
  49. package/dist/components/Popover/Popover.module.css +1 -1
  50. package/dist/components/Popover/Popover.types.d.ts +1 -1
  51. package/dist/components/Radio/Radio.js +2 -12
  52. package/dist/components/Reshaped/Reshaped.css +1 -1
  53. package/dist/components/Scrim/Scrim.js +4 -3
  54. package/dist/components/Scrim/Scrim.module.css +1 -1
  55. package/dist/components/Scrim/Scrim.types.d.ts +2 -1
  56. package/dist/components/ScrollArea/ScrollArea.js +7 -7
  57. package/dist/components/Slider/SliderControlled.js +4 -4
  58. package/dist/components/Tabs/Tabs.module.css +1 -1
  59. package/dist/components/Tabs/Tabs.types.d.ts +3 -1
  60. package/dist/components/Tabs/TabsContext.d.ts +1 -0
  61. package/dist/components/Tabs/TabsControlled.js +2 -1
  62. package/dist/components/Tabs/TabsItem.js +3 -3
  63. package/dist/components/Tabs/TabsList.js +9 -5
  64. package/dist/components/Tabs/TabsPanel.js +1 -1
  65. package/dist/components/Text/Text.d.ts +1 -1
  66. package/dist/components/Text/Text.js +2 -2
  67. package/dist/components/Text/Text.module.css +1 -1
  68. package/dist/components/Text/Text.types.d.ts +5 -3
  69. package/dist/components/Tooltip/Tooltip.js +2 -2
  70. package/dist/components/Tooltip/Tooltip.module.css +1 -1
  71. package/dist/components/Tooltip/Tooltip.types.d.ts +1 -1
  72. package/dist/components/View/View.types.d.ts +4 -4
  73. package/dist/hooks/_private/useDrag.js +0 -3
  74. package/dist/index.d.ts +2 -0
  75. package/dist/index.js +1 -0
  76. package/dist/types/global.d.ts +1 -1
  77. package/dist/utilities/dom/index.d.ts +0 -1
  78. package/dist/utilities/dom/index.js +0 -1
  79. package/dist/utilities/scroll/disable.js +4 -2
  80. package/package.json +4 -98
  81. package/README.md +0 -24
  82. package/dist/components/_private/HiddenInput/HiddenInput.js +0 -10
  83. package/dist/components/_private/HiddenInput/HiddenInput.types.d.ts +0 -15
  84. package/dist/utilities/dom/userSelect.d.ts +0 -2
  85. package/dist/utilities/dom/userSelect.js +0 -6
  86. /package/dist/components/{_private/HiddenInput → HiddenInput}/HiddenInput.d.ts +0 -0
  87. /package/dist/components/{_private/HiddenInput → HiddenInput}/HiddenInput.module.css +0 -0
  88. /package/dist/components/{_private/HiddenInput → HiddenInput}/HiddenInput.types.js +0 -0
  89. /package/dist/components/{_private/HiddenInput → HiddenInput}/index.d.ts +0 -0
  90. /package/dist/components/{_private/HiddenInput → HiddenInput}/index.js +0 -0
@@ -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)
@@ -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;
@@ -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,
@@ -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}}
@@ -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
  };
@@ -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;
@@ -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)}
@@ -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 */
@@ -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 */
@@ -4,7 +4,6 @@ import * as keys from "../../constants/keys.js";
4
4
  import useHandlerRef from "../useHandlerRef.js";
5
5
  import useHotkeys from "../useHotkeys.js";
6
6
  import useToggle from "../useToggle.js";
7
- import { disableUserSelect, enableUserSelect } from "../../utilities/dom/index.js";
8
7
  import { disableScroll, enableScroll } from "../../utilities/scroll/index.js";
9
8
  const useDrag = (cb, options) => {
10
9
  const { disabled, containerRef: passedContainerRef, orientation = "all" } = options || {};
@@ -76,7 +75,6 @@ const useDrag = (cb, options) => {
76
75
  const handleDragEnd = () => {
77
76
  triggerCompensationRef.current = { x: 0, y: 0 };
78
77
  toggle.deactivate();
79
- enableUserSelect();
80
78
  enableScroll();
81
79
  };
82
80
  document.addEventListener("touchmove", handleDrag, { passive: true });
@@ -103,7 +101,6 @@ const useDrag = (cb, options) => {
103
101
  y: resolvedEvent.clientY - triggerRect.y,
104
102
  };
105
103
  toggle.activate();
106
- disableUserSelect();
107
104
  disableScroll();
108
105
  };
109
106
  triggerEl.addEventListener("touchstart", handleStart, { passive: true });
package/dist/index.d.ts CHANGED
@@ -110,6 +110,8 @@ export { default as Grid } from "./components/Grid";
110
110
  export type { GridProps, GridItemProps } from "./components/Grid";
111
111
  export { default as Hidden } from "./components/Hidden";
112
112
  export type { HiddenProps } from "./components/Hidden";
113
+ export { default as HiddenInput } from "./components/HiddenInput";
114
+ export type { HiddenInputProps } from "./components/HiddenInput";
113
115
  export { default as HiddenVisually } from "./components/HiddenVisually";
114
116
  export type { HiddenVisuallyProps } from "./components/HiddenVisually";
115
117
  export { default as Icon } from "./components/Icon";
package/dist/index.js CHANGED
@@ -57,6 +57,7 @@ export { default as Flyout } from "./components/Flyout/index.js";
57
57
  export { default as FormControl } from "./components/FormControl/index.js";
58
58
  export { default as Grid } from "./components/Grid/index.js";
59
59
  export { default as Hidden } from "./components/Hidden/index.js";
60
+ export { default as HiddenInput } from "./components/HiddenInput/index.js";
60
61
  export { default as HiddenVisually } from "./components/HiddenVisually/index.js";
61
62
  export { default as Icon } from "./components/Icon/index.js";
62
63
  export { default as Image } from "./components/Image/index.js";
@@ -7,7 +7,7 @@ export type ClassName = ClassNameValue | ClassNameValue[] | ClassName[];
7
7
  export type CSSVariable = `--${string}`;
8
8
  export type StyleAttribute = React.CSSProperties | (React.CSSProperties & Record<CSSVariable, string | number | undefined>);
9
9
  type DataAttributes = object | Record<`data-${string}`, string | boolean>;
10
- export type Attributes<TagName extends keyof React.JSX.IntrinsicElements = "div"> = React.JSX.IntrinsicElements[TagName] & DataAttributes & {
10
+ export type Attributes<TagName extends keyof React.JSX.IntrinsicElements | void = void> = (TagName extends keyof React.JSX.IntrinsicElements ? React.JSX.IntrinsicElements[TagName] : React.HTMLAttributes<HTMLElement>) & DataAttributes & {
11
11
  style?: StyleAttribute;
12
12
  };
13
13
  export type Viewport = "s" | "m" | "l" | "xl";
@@ -1,5 +1,4 @@
1
1
  export { getRectFromCoordinates } from "./flyout";
2
2
  export { getShadowRoot } from "./shadowDom";
3
- export { enableUserSelect, disableUserSelect } from "./userSelect";
4
3
  export { findParent, findClosestScrollableContainer, findClosestPositionContainer } from "./find";
5
4
  export { triggerChangeEvent } from "./event";
@@ -1,5 +1,4 @@
1
1
  export { getRectFromCoordinates } from "./flyout.js";
2
2
  export { getShadowRoot } from "./shadowDom.js";
3
- export { enableUserSelect, disableUserSelect } from "./userSelect.js";
4
3
  export { findParent, findClosestScrollableContainer, findClosestPositionContainer } from "./find.js";
5
4
  export { triggerChangeEvent } from "./event.js";
@@ -4,10 +4,12 @@ export const preventDefault = (e) => e.preventDefault();
4
4
  * without locking the page with overflow
5
5
  */
6
6
  export const disableScroll = () => {
7
- window.addEventListener("wheel", preventDefault);
8
- window.addEventListener("touchmove", preventDefault);
7
+ window.addEventListener("wheel", preventDefault, { passive: false });
8
+ window.addEventListener("touchmove", preventDefault, { passive: false });
9
+ document.body.style.userSelect = "none";
9
10
  };
10
11
  export const enableScroll = () => {
11
12
  window.removeEventListener("wheel", preventDefault);
12
13
  window.removeEventListener("touchmove", preventDefault);
14
+ document.body.style.userSelect = "";
13
15
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "reshaped",
3
3
  "description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
4
- "version": "3.9.0-canary.2",
4
+ "version": "3.9.0-canary.24",
5
5
  "license": "MIT",
6
6
  "email": "hello@reshaped.so",
7
7
  "homepage": "https://reshaped.so",
@@ -20,7 +20,8 @@
20
20
  ],
21
21
  "repository": {
22
22
  "type": "git",
23
- "url": "https://github.com/reshaped-ui/reshaped.git"
23
+ "url": "https://github.com/reshaped-ui/reshaped.git",
24
+ "directory": "packages/reshaped"
24
25
  },
25
26
  "bugs": {
26
27
  "url": "https://github.com/reshaped-ui/reshaped/issues"
@@ -77,69 +78,12 @@
77
78
  "browserslist": [
78
79
  "defaults and not IE 11"
79
80
  ],
80
- "devDependencies": {
81
- "@changesets/cli": "2.29.7",
82
- "@commitlint/cli": "20.1.0",
83
- "@commitlint/config-conventional": "20.0.0",
84
- "@commitlint/types": "20.0.0",
85
- "@eslint/js": "9.38.0",
86
- "@size-limit/preset-big-lib": "11.2.0",
87
- "@storybook/addon-a11y": "10.0.0",
88
- "@storybook/addon-docs": "10.0.0",
89
- "@storybook/addon-vitest": "10.0.0",
90
- "@storybook/react": "10.0.0",
91
- "@storybook/react-vite": "10.0.0",
92
- "@testing-library/user-event": "14.6.1",
93
- "@types/culori": "4.0.1",
94
- "@types/events": "3.0.3",
95
- "@types/node": "24.9.2",
96
- "@types/react": "19.2.2",
97
- "@types/react-dom": "19.2.2",
98
- "@vitejs/plugin-react": "5.1.0",
99
- "@vitest/browser": "4.0.4",
100
- "@vitest/browser-playwright": "4.0.4",
101
- "@vitest/coverage-istanbul": "4.0.4",
102
- "@vitest/coverage-v8": "4.0.4",
103
- "chromatic": "13.3.2",
104
- "eslint": "9.38.0",
105
- "eslint-config-prettier": "10.1.8",
106
- "eslint-import-resolver-typescript": "^4.4.4",
107
- "eslint-plugin-import": "2.32.0",
108
- "eslint-plugin-jsx-a11y": "6.10.2",
109
- "eslint-plugin-prettier": "5.5.4",
110
- "eslint-plugin-react": "7.37.5",
111
- "eslint-plugin-react-hooks": "7.0.1",
112
- "lefthook": "2.0.1",
113
- "playwright": "1.56.1",
114
- "postcss": "8.5.6",
115
- "postcss-cli": "11.0.1",
116
- "postcss-each": "1.1.0",
117
- "postcss-nested": "7.0.2",
118
- "prettier": "3.6.2",
119
- "react": "18",
120
- "react-dom": "18",
121
- "react-shadow": "20.6.0",
122
- "resolve-tspaths": "0.8.23",
123
- "size-limit": "11.2.0",
124
- "storybook": "10.0.0",
125
- "stylelint": "16.25.0",
126
- "stylelint-config-prettier": "9.0.5",
127
- "stylelint-config-standard": "39.0.1",
128
- "ts-node": "10.9.2",
129
- "typescript": "5.9.3",
130
- "typescript-eslint": "8.46.2",
131
- "vite": "7.1.12",
132
- "vite-tsconfig-paths": "5.1.4",
133
- "vitest": "4.0.4",
134
- "vitest-browser-react": "2.0.2"
135
- },
136
81
  "peerDependencies": {
137
82
  "postcss": "^8",
138
83
  "react": "^18 || ^19",
139
84
  "react-dom": "^18 || ^19"
140
85
  },
141
86
  "dependencies": {
142
- "@changesets/changelog-github": "0.5.1",
143
87
  "@csstools/postcss-global-data": "3.1.0",
144
88
  "chalk": "4.1.2",
145
89
  "commander": "14.0.2",
@@ -148,36 +92,8 @@
148
92
  "culori": "4.0.2",
149
93
  "postcss-custom-media": "11.0.6"
150
94
  },
151
- "size-limit": [
152
- {
153
- "name": "Library / JS",
154
- "path": "dist/bundle.js",
155
- "webpack": false
156
- },
157
- {
158
- "name": "Library / CSS",
159
- "path": "dist/bundle.css",
160
- "webpack": false
161
- },
162
- {
163
- "name": "Theming / JS",
164
- "path": "dist/tests/themingWithoutDefinition.js",
165
- "webpack": true
166
- },
167
- {
168
- "name": "Theming with a default theme definition / JS",
169
- "path": "dist/tests/themingWithDefinition.js",
170
- "webpack": true
171
- }
172
- ],
173
- "engines": {
174
- "node": ">=22"
175
- },
176
95
  "scripts": {
177
- "dev": "storybook dev -p 3001 --disable-telemetry",
178
96
  "clean": "sh ./bin/clean.sh",
179
- "commit": "git-cz",
180
- "changeset": "changeset",
181
97
  "build": "pnpm clean && pnpm build:esm && pnpm build:css && pnpm build:bundle",
182
98
  "build:themes": "node bin/cli.js theming --config dist/cli/theming/reshaped.config.js --output src/themes",
183
99
  "build:esm": "tsc -p tsconfig.esm.json && resolve-tspaths -p tsconfig.esm.json",
@@ -185,19 +101,9 @@
185
101
  "build:stories": "tsc -p tsconfig.stories.json && resolve-tspaths -p tsconfig.stories.json",
186
102
  "build:bundle": "vite build && cp dist/index.d.ts dist/bundle.d.ts",
187
103
  "build:size": "pnpm clean && pnpm build:esm && pnpm build:bundle",
188
- "build:storybook": "storybook build -o dist/app --disable-telemetry",
189
- "build:chromatic": "STORYBOOK_ENV=chromatic storybook build",
190
- "release": "sh ./bin/release.sh",
191
- "release:canary": "sh ./bin/release-canary.sh",
192
104
  "release:local": "pnpm build && pnpm pack --out reshaped-local.tgz",
193
- "chromatic": "chromatic -b build:chromatic --project-token=$(cat .chromatic)",
194
- "test:vrt": "pnpm chromatic",
195
- "test:vrt:turbo": "pnpm chromatic --only-changed",
196
105
  "test:browser": "vitest run --project=storybook",
197
106
  "test:unit": "vitest run --project=unit",
198
- "test:size": "size-limit",
199
- "lint": "pnpm lint:js && pnpm lint:css",
200
- "lint:js": "eslint './src/**/*.{ts,tsx}' --fix",
201
- "lint:css": "stylelint 'src/**/*.css'"
107
+ "test:size": "size-limit"
202
108
  }
203
109
  }
package/README.md DELETED
@@ -1,24 +0,0 @@
1
- # Reshaped
2
-
3
- <img width="2400" height="1260" alt="3 0 (1)" src="https://github.com/user-attachments/assets/ef632fe9-9446-430f-b87d-bebebe6fb595" />
4
- <br /><br />
5
-
6
- Reshaped is a library with professionally crafted React & Figma components for building beautiful products or starting your own design system.
7
-
8
- <br />
9
-
10
- ## Documentation
11
-
12
- To get started, check out the [Reshaped documentation](https://reshaped.so/docs/getting-started/overview).
13
-
14
- ## Contributing
15
-
16
- Read our [contribution guide](CONTRIBUTING.md) to learn about our principles, development process and testing.
17
-
18
- ## Maintainers
19
-
20
- - Dmitry Belyaev, [@blvdmitry](https://x.com/blvdmitry)
21
-
22
- ## License
23
-
24
- This project is licensed under the terms of the MIT license.
@@ -1,10 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { classNames } from "../../../utilities/props.js";
3
- import s from "./HiddenInput.module.css";
4
- const HiddenInput = (props) => {
5
- const { name, value, type, onChange, onFocus, onBlur, checked, defaultChecked, disabled, className, attributes, } = props;
6
- const rootClassNames = classNames(s.root, className);
7
- return (_jsx("input", { ...attributes, className: rootClassNames, type: type, name: name, value: value, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: onChange, onFocus: onFocus || attributes?.onFocus, onBlur: onBlur || attributes?.onBlur }));
8
- };
9
- HiddenInput.displayName = "HiddenInput";
10
- export default HiddenInput;
@@ -1,15 +0,0 @@
1
- import React from "react";
2
- import type * as G from "../../../types/global";
3
- export type Props = {
4
- name?: string;
5
- value?: string;
6
- checked?: boolean;
7
- defaultChecked?: boolean;
8
- disabled?: boolean;
9
- onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
10
- onFocus?: (e: React.FocusEvent) => void;
11
- onBlur?: (e: React.FocusEvent) => void;
12
- type: "checkbox" | "radio";
13
- className?: G.ClassName;
14
- attributes?: G.Attributes<"input">;
15
- };
@@ -1,2 +0,0 @@
1
- export declare const disableUserSelect: () => void;
2
- export declare const enableUserSelect: () => void;
@@ -1,6 +0,0 @@
1
- export const disableUserSelect = () => {
2
- document.body.style.userSelect = "none";
3
- };
4
- export const enableUserSelect = () => {
5
- document.body.style.userSelect = "";
6
- };