reshaped 2.1.0 → 2.2.1
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.
- package/CHANGELOG.md +4 -5
- package/LICENSE-SOURCE.md +40 -0
- package/LICENSE.md +21 -37
- package/bin/clean.sh +1 -0
- package/bin/release-source.sh +7 -0
- package/bundle.css +1 -1
- package/bundle.d.ts +2 -0
- package/bundle.js +10 -10
- package/cli/theming/definitions/figma.js +2 -2
- package/cli/theming/definitions/reshaped.js +3 -3
- package/components/Actionable/Actionable.module.css +1 -1
- package/components/Button/Button.module.css +1 -1
- package/components/Button/tests/Button.stories.js +4 -0
- package/components/Checkbox/Checkbox.module.css +1 -1
- package/components/Dismissible/Dismissible.module.css +1 -1
- package/components/Divider/Divider.module.css +1 -1
- package/components/DropdownMenu/DropdownMenu.js +1 -1
- package/components/MenuItem/MenuItem.module.css +1 -1
- package/components/Modal/Modal.module.css +1 -1
- package/components/Radio/Radio.module.css +1 -1
- package/components/Scrim/Scrim.module.css +1 -1
- package/components/Select/Select.js +1 -1
- package/components/Select/Select.module.css +1 -1
- package/components/Slider/Slider.d.ts +4 -0
- package/components/Slider/Slider.js +26 -0
- package/components/Slider/Slider.module.css +1 -0
- package/components/Slider/Slider.types.d.ts +78 -0
- package/components/Slider/SliderControlled.d.ts +4 -0
- package/components/Slider/SliderControlled.js +172 -0
- package/components/Slider/SliderThumb.d.ts +4 -0
- package/components/Slider/SliderThumb.js +21 -0
- package/components/Slider/SliderUncontrolled.d.ts +4 -0
- package/components/Slider/SliderUncontrolled.js +32 -0
- package/components/Slider/index.d.ts +2 -0
- package/components/Slider/index.js +1 -0
- package/components/Slider/tests/Slider.stories.d.ts +10 -0
- package/components/Slider/tests/Slider.stories.js +42 -0
- package/components/Switch/Switch.module.css +1 -1
- package/components/Tabs/Tabs.module.css +1 -1
- package/components/TextField/TextField.module.css +1 -1
- package/components/View/View.module.css +1 -1
- package/components/_private/Flyout/Flyout.types.d.ts +2 -0
- package/components/_private/Flyout/FlyoutContent.js +4 -2
- package/components/_private/Flyout/FlyoutControlled.js +8 -1
- package/components/_private/Portal/Portal.d.ts +1 -0
- package/config/next.d.ts +4 -0
- package/config/next.js +22 -0
- package/index.d.ts +2 -0
- package/index.js +1 -0
- package/package.json +41 -27
- package/themes/figma/theme.css +1 -1
- package/themes/reshaped/theme.css +1 -1
- package/themes/slate/theme.css +1 -1
- package/utilities/helpers.d.ts +2 -1
- package/utilities/helpers.js +10 -1
- package/cli/theming/definitions/minimal.d.ts +0 -3
- package/cli/theming/definitions/minimal.js +0 -80
- package/styles/aspectRatio/index.test.js +0 -24
- package/styles/bleed/index.test.d.ts +0 -1
- package/styles/bleed/index.test.js +0 -24
- package/styles/height/index.test.d.ts +0 -1
- package/styles/height/index.test.js +0 -27
- package/styles/inset/index.test.d.ts +0 -1
- package/styles/inset/index.test.js +0 -27
- package/styles/maxHeight/index.test.d.ts +0 -1
- package/styles/maxHeight/index.test.js +0 -27
- package/styles/maxWidth/index.test.d.ts +0 -1
- package/styles/maxWidth/index.test.js +0 -27
- package/styles/padding/index.test.d.ts +0 -1
- package/styles/padding/index.test.js +0 -24
- package/styles/position/index.test.d.ts +0 -1
- package/styles/position/index.test.js +0 -21
- package/styles/radius/index.test.d.ts +0 -1
- package/styles/radius/index.test.js +0 -24
- package/styles/width/index.test.d.ts +0 -1
- package/styles/width/index.test.js +0 -27
- package/themes/minimal/theme.css +0 -1
- package/utilities/testPresets.d.ts +0 -25
- package/utilities/testPresets.js +0 -76
- package/utilities/tests/Chain.test.d.ts +0 -1
- package/utilities/tests/Chain.test.js +0 -45
- /package/bin/{copy-release.sh → release-copy.sh} +0 -0
- /package/{styles/aspectRatio/index.test.d.ts → components/Slider/Slider.types.js} +0 -0
|
@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
const theme = {
|
|
4
4
|
fontFamily: {
|
|
5
5
|
title: {
|
|
6
|
-
family: "Inter, BlinkMacSystemFont, -apple-system,
|
|
6
|
+
family: "Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif",
|
|
7
7
|
},
|
|
8
8
|
body: {
|
|
9
|
-
family: "Inter, BlinkMacSystemFont, -apple-system,
|
|
9
|
+
family: "Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif",
|
|
10
10
|
},
|
|
11
11
|
},
|
|
12
12
|
fontWeight: {
|
|
@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
const theme = {
|
|
4
4
|
fontFamily: {
|
|
5
5
|
title: {
|
|
6
|
-
family: "Inter, BlinkMacSystemFont, -apple-system,
|
|
6
|
+
family: "Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif",
|
|
7
7
|
},
|
|
8
8
|
body: {
|
|
9
|
-
family: "Inter, BlinkMacSystemFont, -apple-system,
|
|
9
|
+
family: "Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif",
|
|
10
10
|
},
|
|
11
11
|
},
|
|
12
12
|
fontWeight: {
|
|
@@ -71,7 +71,7 @@ const theme = {
|
|
|
71
71
|
},
|
|
72
72
|
body1: {
|
|
73
73
|
fontSize: { px: 18 },
|
|
74
|
-
lineHeight: { px:
|
|
74
|
+
lineHeight: { px: 28 },
|
|
75
75
|
fontFamilyToken: "body",
|
|
76
76
|
},
|
|
77
77
|
body2: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{-webkit-tap-highlight-color:
|
|
1
|
+
.root{-webkit-tap-highlight-color:transparent;background:none;border:0;color:inherit;display:inline-block;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0;text-align:initial;text-decoration:none;vertical-align:top}.root:focus{outline:none;z-index:var(--rs-z-index-raised)}[role=button].root,button.root{cursor:pointer}.root.--disabled,.root[disabled]{cursor:not-allowed}.root.--disabled:active,.root[disabled]:active{transform:none}.--full-width{width:100%}[data-rs-keyboard] .root:focus{box-shadow:var(--rs-focus-shadow)}[data-rs-keyboard] .root.--inset:focus{box-shadow:var(--rs-focus-inset-shadow)}[data-rs-keyboard] .root.--radius-inherit:focus{box-shadow:none}[data-rs-keyboard] .root.--radius-inherit:focus>*{box-shadow:var(--rs-focus-shadow)}[data-rs-keyboard] .root.--radius-inherit.--inset:focus>*{box-shadow:var(--rs-focus-inset-shadow)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{--rs-button-border-width:1px;-webkit-tap-highlight-color:transparent;align-items:center;border:var(--rs-button-border-width) solid transparent;box-sizing:border-box;cursor:pointer;display:inline-flex;font-family:var(--rs-font-family-body);font-size:var(--rs-button-font-size);font-weight:var(--rs-font-weight-medium);justify-content:center;line-height:var(--rs-button-line-height);min-height:calc(var(--rs-button-line-height) + var(--rs-button-padding-v) * 2);min-width:calc(var(--rs-button-line-height) - (var(--rs-unit-x1) * 2) + (var(--rs-button-padding-h) * 2));overflow:hidden;padding:calc(var(--rs-button-padding-v) - var(--rs-button-border-width)) calc(var(--rs-button-padding-h) - var(--rs-button-border-width));position:relative;text-align:initial;text-decoration:none;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,box-shadow,border-color,color,transform;z-index:0}.root:active{transform:scale(.98)}.loader{align-items:center;display:none;inset:0;justify-content:center;position:absolute}.icon{-webkit-margin-end:var(--rs-button-icon-gap);margin-inline-end:var(--rs-button-icon-gap)}.icon.--icon-position-end{-webkit-margin-end:0;-webkit-margin-start:var(--rs-button-icon-gap);margin-inline-end:0;margin-inline-start:var(--rs-button-icon-gap)}.icon:last-child{-webkit-margin-end:0;margin-inline-end:0}.icon,.text{position:relative;z-index:5}.root.--loading{cursor:default}.root.--loading:active{transform:none}.root.--loading .icon,.root.--loading .text{visibility:hidden}.root.--loading .loader{display:flex}.--elevated{box-shadow:var(--rs-shadow-raised)}.root.--icon-only .icon{margin:0 calc(var(--rs-unit-x1) * -1)}.root.--rounded{border-radius:999px}.--size-small{--rs-button-padding-v:var(--rs-unit-x1);--rs-button-padding-h:var(--rs-unit-x2);--rs-button-padding-h-ghost:var(--rs-unit-x2);--rs-button-icon-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3)}.--size-medium,.--size-small{border-radius:var(--rs-unit-radius-small)}.--size-medium{--rs-button-padding-v:var(--rs-unit-x2);--rs-button-padding-h:var(--rs-unit-x3);--rs-button-padding-h-ghost:var(--rs-unit-x2);--rs-button-icon-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3)}.--size-large{--rs-button-padding-v:var(--rs-unit-x3);--rs-button-padding-h:var(--rs-unit-x4);--rs-button-padding-h-ghost:var(--rs-unit-x3);--rs-button-icon-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2)}.--size-large,.--size-xlarge{border-radius:var(--rs-unit-radius-medium)}.--size-xlarge{--rs-button-padding-v:var(--rs-unit-x4);--rs-button-padding-h:var(--rs-unit-x5);--rs-button-padding-h-ghost:var(--rs-unit-x4);--rs-button-icon-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-1);--rs-button-font-size:var(--rs-font-size-body-1)}.--full-width{text-align:center;width:100%}.root.--variant-faded.--color-critical:before,.root.--variant-faded.--color-inherit:before,.root.--variant-faded.--color-neutral:before,.root.--variant-faded.--color-positive:before,.root.--variant-faded.--color-primary:before,.root.--variant-ghost.--color-inherit:before,.root.--variant-outline.--color-inherit:before,.root.--variant-solid.--color-black:before,.root.--variant-solid.--color-white:before{content:"";inset:0;opacity:0;position:absolute;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.root.--variant-solid.--color-neutral{background-color:var(--rs-color-background-neutral);color:var(--rs-color-foreground-neutral)}.root.--variant-solid.--color-neutral.--highlighted,.root.--variant-solid.--color-neutral:hover:not(.--loading){background-color:var(--rs-color-background-neutral-highlighted)}.root.--variant-solid.--color-primary{background-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.root.--variant-solid.--color-primary.--highlighted,.root.--variant-solid.--color-primary:hover:not(.--loading){background-color:var(--rs-color-background-primary-highlighted)}.root.--variant-solid.--color-critical{background-color:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.root.--variant-solid.--color-critical.--highlighted,.root.--variant-solid.--color-critical:hover:not(.--loading){background-color:var(--rs-color-background-critical-highlighted)}.root.--variant-solid.--color-positive{background-color:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.root.--variant-solid.--color-positive.--highlighted,.root.--variant-solid.--color-positive:hover:not(.--loading){background-color:var(--rs-color-background-positive-highlighted)}.root.--variant-solid.--color-white{--rs-button-border-width:0px;background-color:var(--rs-color-white);color:var(--rs-color-black)}.root.--variant-solid.--color-white:before{background-color:var(--rs-color-black)}.root.--variant-solid.--color-white.--highlighted:before,.root.--variant-solid.--color-white:hover:not(.--loading):before{opacity:.04}.root.--variant-solid.--color-black{--rs-button-border-width:0px;background-color:var(--rs-color-black);color:var(--rs-color-white)}.root.--variant-solid.--color-black:before{background-color:var(--rs-color-white)}.root.--variant-solid.--color-black.--highlighted:before,.root.--variant-solid.--color-black:hover:not(.--loading):before{opacity:.2}.root.--variant-faded.--color-neutral{background-color:var(--rs-color-background-elevation-base);border-color:var(--rs-color-border-neutral-faded);color:var(--rs-color-foreground-neutral)}.root.--variant-faded.--color-neutral:before{background-color:var(--rs-color-foreground-neutral)}.root.--variant-faded.--color-neutral.--highlighted:before,.root.--variant-faded.--color-neutral:hover:not(.--loading):before{opacity:.04}.root.--variant-faded.--color-primary{background-color:var(--rs-color-background-primary-faded);color:var(--rs-color-foreground-primary)}.root.--variant-faded.--color-primary:before{background-color:var(--rs-color-foreground-primary)}.root.--variant-faded.--color-primary.--highlighted:before,.root.--variant-faded.--color-primary:hover:not(.--loading):before{opacity:.06}.root.--variant-faded.--color-critical{background-color:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-critical)}.root.--variant-faded.--color-critical:before{background-color:var(--rs-color-foreground-critical)}.root.--variant-faded.--color-critical.--highlighted:before,.root.--variant-faded.--color-critical:hover:not(.--loading):before{opacity:.06}.root.--variant-faded.--color-positive{background-color:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-positive)}.root.--variant-faded.--color-positive:before{background-color:var(--rs-color-foreground-positive)}.root.--variant-faded.--color-positive.--highlighted:before,.root.--variant-faded.--color-positive:hover:not(.--loading):before{opacity:.06}.root.--variant-faded.--color-inherit{color:inherit}.root.--variant-faded.--color-inherit:before{background-color:currentcolor;opacity:.16}.root.--variant-faded.--color-inherit.--highlighted:before,.root.--variant-faded.--color-inherit:hover:not(.--loading):before{opacity:.24}.root.--variant-faded.--color-black{background-color:rgba(var(--rs-color-rgb-black),28%);color:var(--rs-color-white)}.root.--variant-faded.--color-black.--highlighted,.root.--variant-faded.--color-black:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-black),36%)}.root.--variant-faded.--color-white{background-color:rgba(var(--rs-color-rgb-white),28%);color:var(--rs-color-black)}.root.--variant-faded.--color-white.--highlighted,.root.--variant-faded.--color-white:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-white),36%)}.root.--variant-outline.--color-neutral{background-color:transparent;border-color:var(--rs-color-border-neutral);color:var(--rs-color-foreground-neutral)}.root.--variant-outline.--color-neutral.--highlighted,.root.--variant-outline.--color-neutral:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-neutral),28%)}.root.--variant-outline.--color-primary{background-color:transparent;border-color:var(--rs-color-border-primary);color:var(--rs-color-foreground-primary)}.root.--variant-outline.--color-primary.--highlighted,.root.--variant-outline.--color-primary:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-primary),10%)}.root.--variant-outline.--color-critical{background-color:transparent;border-color:var(--rs-color-border-critical);color:var(--rs-color-foreground-critical)}.root.--variant-outline.--color-critical.--highlighted,.root.--variant-outline.--color-critical:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-critical),10%)}.root.--variant-outline.--color-positive{background-color:transparent;border-color:var(--rs-color-border-positive);color:var(--rs-color-foreground-positive)}.root.--variant-outline.--color-positive.--highlighted,.root.--variant-outline.--color-positive:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-positive),10%)}.root.--variant-outline.--color-white{background-color:transparent;border-color:var(--rs-color-white);color:var(--rs-color-white)}.root.--variant-outline.--color-white.--highlighted,.root.--variant-outline.--color-white:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-white),12%)}.root.--variant-outline.--color-black{background-color:transparent;border-color:var(--rs-color-black);color:var(--rs-color-black)}.root.--variant-outline.--color-black.--highlighted,.root.--variant-outline.--color-black:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-black),4%)}.root.--variant-outline.--color-inherit{background-color:transparent;border-color:currentcolor;color:inherit}.root.--variant-outline.--color-inherit:before{background-color:currentcolor;content:"";inset:0;opacity:0;position:absolute;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.root.--variant-outline.--color-inherit.--highlighted,.root.--variant-outline.--color-inherit:hover:not(.--loading){background-color:transparent}.root.--variant-outline.--color-inherit.--highlighted:before,.root.--variant-outline.--color-inherit:hover:not(.--loading):before{opacity:.1}.root.--variant-ghost{padding-left:var(--rs-button-padding-h-ghost);padding-right:var(--rs-button-padding-h-ghost)}.root.--variant-ghost.--color-neutral{background:transparent;color:var(--rs-color-foreground-neutral)}.root.--variant-ghost.--color-neutral.--highlighted,.root.--variant-ghost.--color-neutral:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-neutral),40%)}.root.--variant-ghost.--color-primary{background:transparent;color:var(--rs-color-foreground-primary)}.root.--variant-ghost.--color-primary.--highlighted,.root.--variant-ghost.--color-primary:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-primary),12%)}.root.--variant-ghost.--color-critical{background:transparent;color:var(--rs-color-foreground-critical)}.root.--variant-ghost.--color-critical.--highlighted,.root.--variant-ghost.--color-critical:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-critical),12%)}.root.--variant-ghost.--color-positive{background:transparent;color:var(--rs-color-foreground-positive)}.root.--variant-ghost.--color-positive.--highlighted,.root.--variant-ghost.--color-positive:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-positive),12%)}.root.--variant-ghost.--color-white{background:transparent;color:var(--rs-color-white)}.root.--variant-ghost.--color-white.--highlighted,.root.--variant-ghost.--color-white:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-white),8%)}.root.--variant-ghost.--color-black{background:transparent;color:var(--rs-color-black)}.root.--variant-ghost.--color-black.--highlighted,.root.--variant-ghost.--color-black:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-black),8%)}.root.--variant-ghost.--color-inherit{background-color:transparent;color:inherit}.root.--variant-ghost.--color-inherit:before{background-color:currentcolor}.root.--variant-ghost.--color-inherit.--highlighted,.root.--variant-ghost.--color-inherit:hover:not(.--loading){background-color:transparent}.root.--variant-ghost.--color-inherit.--highlighted:before,.root.--variant-ghost.--color-inherit:hover:not(.--loading):before{opacity:.08}.root.--disabled,.root.--disabled:hover:not(.--loading){background-color:var(--rs-color-background-disabled)!important;border-color:var(--rs-color-border-disabled)!important;color:var(--rs-color-foreground-disabled)!important}.root.--disabled:before,.root.--disabled:hover:not(.--loading):before{opacity:0!important}.root.--disabled.--variant-faded,.root.--disabled:hover:not(.--loading).--variant-faded{background-color:var(--rs-color-background-disabled-faded)!important}.root.--disabled.--variant-outline,.root.--disabled:hover:not(.--loading).--variant-outline{background-color:transparent!important}.root.--disabled.--variant-ghost,.root.--disabled:hover:not(.--loading).--variant-ghost{background-color:transparent!important;border-color:transparent!important}.root.--disabled:active,.root.--disabled:hover:not(.--loading):active{transform:none!important}.aligner{line-height:0}.aligner.--aligner-position-all .root{margin:calc(var(--rs-button-padding-v) * -1) calc(var(--rs-button-padding-h) * -1)}.aligner.--aligner-position-start .root{-webkit-margin-start:calc(var(--rs-button-padding-h) * -1);margin-inline-start:calc(var(--rs-button-padding-h) * -1)}.aligner.--aligner-position-end .root{-webkit-margin-end:calc(var(--rs-button-padding-h) * -1);margin-inline-end:calc(var(--rs-button-padding-h) * -1)}.aligner.--aligner-position-top .root{margin-top:calc(var(--rs-button-padding-v) * -1)}.aligner.--aligner-position-bottom .root{margin-bottom:calc(var(--rs-button-padding-v) * -1)}@media (min-width:660px){.--size-small--m{--rs-button-padding-v:var(--rs-unit-x1);--rs-button-padding-h:var(--rs-unit-x2);--rs-button-padding-h-ghost:var(--rs-unit-x2);--rs-button-icon-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3)}.--size-medium--m,.--size-small--m{border-radius:var(--rs-unit-radius-small)}.--size-medium--m{--rs-button-padding-v:var(--rs-unit-x2);--rs-button-padding-h:var(--rs-unit-x3);--rs-button-padding-h-ghost:var(--rs-unit-x2);--rs-button-icon-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3)}.--size-large--m{--rs-button-padding-v:var(--rs-unit-x3);--rs-button-padding-h:var(--rs-unit-x4);--rs-button-padding-h-ghost:var(--rs-unit-x3);--rs-button-icon-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2)}.--size-large--m,.--size-xlarge--m{border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--m{--rs-button-padding-v:var(--rs-unit-x4);--rs-button-padding-h:var(--rs-unit-x5);--rs-button-padding-h-ghost:var(--rs-unit-x4);--rs-button-icon-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-1);--rs-button-font-size:var(--rs-font-size-body-1)}.--full-width-true--m{text-align:center;width:100%}.--full-width-false--m{text-align:initial;width:auto}}@media (min-width:900px){.--size-small--l{--rs-button-padding-v:var(--rs-unit-x1);--rs-button-padding-h:var(--rs-unit-x2);--rs-button-padding-h-ghost:var(--rs-unit-x2);--rs-button-icon-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3)}.--size-medium--l,.--size-small--l{border-radius:var(--rs-unit-radius-small)}.--size-medium--l{--rs-button-padding-v:var(--rs-unit-x2);--rs-button-padding-h:var(--rs-unit-x3);--rs-button-padding-h-ghost:var(--rs-unit-x2);--rs-button-icon-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3)}.--size-large--l{--rs-button-padding-v:var(--rs-unit-x3);--rs-button-padding-h:var(--rs-unit-x4);--rs-button-padding-h-ghost:var(--rs-unit-x3);--rs-button-icon-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2)}.--size-large--l,.--size-xlarge--l{border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--l{--rs-button-padding-v:var(--rs-unit-x4);--rs-button-padding-h:var(--rs-unit-x5);--rs-button-padding-h-ghost:var(--rs-unit-x4);--rs-button-icon-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-1);--rs-button-font-size:var(--rs-font-size-body-1)}.--full-width-true--l{text-align:center;width:100%}.--full-width-false--l{text-align:initial;width:auto}}@media (min-width:1280px){.--size-small--xl{--rs-button-padding-v:var(--rs-unit-x1);--rs-button-padding-h:var(--rs-unit-x2);--rs-button-padding-h-ghost:var(--rs-unit-x2);--rs-button-icon-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3)}.--size-medium--xl,.--size-small--xl{border-radius:var(--rs-unit-radius-small)}.--size-medium--xl{--rs-button-padding-v:var(--rs-unit-x2);--rs-button-padding-h:var(--rs-unit-x3);--rs-button-padding-h-ghost:var(--rs-unit-x2);--rs-button-icon-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3)}.--size-large--xl{--rs-button-padding-v:var(--rs-unit-x3);--rs-button-padding-h:var(--rs-unit-x4);--rs-button-padding-h-ghost:var(--rs-unit-x3);--rs-button-icon-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2)}.--size-large--xl,.--size-xlarge--xl{border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--xl{--rs-button-padding-v:var(--rs-unit-x4);--rs-button-padding-h:var(--rs-unit-x5);--rs-button-padding-h-ghost:var(--rs-unit-x4);--rs-button-icon-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-1);--rs-button-font-size:var(--rs-font-size-body-1)}.--full-width-true--xl{text-align:center;width:100%}.--full-width-false--xl{text-align:initial;width:auto}}
|
|
1
|
+
.root{--rs-button-border-width:1px;-webkit-tap-highlight-color:transparent;align-items:center;border:var(--rs-button-border-width) solid transparent;box-sizing:border-box;cursor:pointer;display:inline-flex;font-family:var(--rs-font-family-body);font-size:var(--rs-button-font-size);font-weight:var(--rs-font-weight-medium);justify-content:center;line-height:var(--rs-button-line-height);min-height:calc(var(--rs-button-line-height) + var(--rs-button-padding-v) * 2);min-width:calc(var(--rs-button-line-height) - (var(--rs-unit-x1) * 2) + (var(--rs-button-padding-h) * 2));overflow:hidden;padding:calc(var(--rs-button-padding-v) - var(--rs-button-border-width)) calc(var(--rs-button-padding-h) - var(--rs-button-border-width));position:relative;text-align:initial;text-decoration:none;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,box-shadow,border-color,color,transform;z-index:0}.root:active{transform:scale(.98)}.loader{align-items:center;display:none;inset:0;justify-content:center;position:absolute}.icon{margin-inline-end:var(--rs-button-icon-gap)}.icon.--icon-position-end{margin-inline-end:0;margin-inline-start:var(--rs-button-icon-gap)}.icon:last-child{margin-inline-end:0}.icon,.text{position:relative;z-index:5}.root.--loading{cursor:default}.root.--loading:active{transform:none}.root.--loading .icon,.root.--loading .text{visibility:hidden}.root.--loading .loader{display:flex}.--elevated{box-shadow:var(--rs-shadow-raised)}.root.--icon-only .icon{margin:0 calc(var(--rs-unit-x1) * -1)}.root.--rounded{border-radius:999px}.--size-small{--rs-button-padding-v:var(--rs-unit-x1);--rs-button-padding-h:var(--rs-unit-x2);--rs-button-padding-h-ghost:var(--rs-unit-x2);--rs-button-icon-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3)}.--size-medium,.--size-small{border-radius:var(--rs-unit-radius-small)}.--size-medium{--rs-button-padding-v:var(--rs-unit-x2);--rs-button-padding-h:var(--rs-unit-x3);--rs-button-padding-h-ghost:var(--rs-unit-x2);--rs-button-icon-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3)}.--size-large{--rs-button-padding-v:var(--rs-unit-x3);--rs-button-padding-h:var(--rs-unit-x4);--rs-button-padding-h-ghost:var(--rs-unit-x3);--rs-button-icon-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2)}.--size-large,.--size-xlarge{border-radius:var(--rs-unit-radius-medium)}.--size-xlarge{--rs-button-padding-v:var(--rs-unit-x4);--rs-button-padding-h:var(--rs-unit-x5);--rs-button-padding-h-ghost:var(--rs-unit-x4);--rs-button-icon-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2)}.--full-width{text-align:center;width:100%}.root.--variant-faded.--color-critical:before,.root.--variant-faded.--color-inherit:before,.root.--variant-faded.--color-neutral:before,.root.--variant-faded.--color-positive:before,.root.--variant-faded.--color-primary:before,.root.--variant-ghost.--color-inherit:before,.root.--variant-outline.--color-inherit:before,.root.--variant-solid.--color-black:before,.root.--variant-solid.--color-white:before{content:"";inset:0;opacity:0;position:absolute;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.root.--variant-solid.--color-neutral{background-color:var(--rs-color-background-neutral);color:var(--rs-color-foreground-neutral)}.root.--variant-solid.--color-neutral.--highlighted,.root.--variant-solid.--color-neutral:hover:not(.--loading){background-color:var(--rs-color-background-neutral-highlighted)}.root.--variant-solid.--color-primary{background-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.root.--variant-solid.--color-primary.--highlighted,.root.--variant-solid.--color-primary:hover:not(.--loading){background-color:var(--rs-color-background-primary-highlighted)}.root.--variant-solid.--color-critical{background-color:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.root.--variant-solid.--color-critical.--highlighted,.root.--variant-solid.--color-critical:hover:not(.--loading){background-color:var(--rs-color-background-critical-highlighted)}.root.--variant-solid.--color-positive{background-color:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.root.--variant-solid.--color-positive.--highlighted,.root.--variant-solid.--color-positive:hover:not(.--loading){background-color:var(--rs-color-background-positive-highlighted)}.root.--variant-solid.--color-white{--rs-button-border-width:0px;background-color:var(--rs-color-white);color:var(--rs-color-black)}.root.--variant-solid.--color-white:before{background-color:var(--rs-color-black)}.root.--variant-solid.--color-white.--highlighted:before,.root.--variant-solid.--color-white:hover:not(.--loading):before{opacity:.04}.root.--variant-solid.--color-black{--rs-button-border-width:0px;background-color:var(--rs-color-black);color:var(--rs-color-white)}.root.--variant-solid.--color-black:before{background-color:var(--rs-color-white)}.root.--variant-solid.--color-black.--highlighted:before,.root.--variant-solid.--color-black:hover:not(.--loading):before{opacity:.2}.root.--variant-faded.--color-neutral{background-color:var(--rs-color-background-elevation-base);border-color:var(--rs-color-border-neutral-faded);color:var(--rs-color-foreground-neutral)}.root.--variant-faded.--color-neutral:before{background-color:var(--rs-color-foreground-neutral)}.root.--variant-faded.--color-neutral.--highlighted:before,.root.--variant-faded.--color-neutral:hover:not(.--loading):before{opacity:.04}.root.--variant-faded.--color-primary{background-color:var(--rs-color-background-primary-faded);color:var(--rs-color-foreground-primary)}.root.--variant-faded.--color-primary:before{background-color:var(--rs-color-foreground-primary)}.root.--variant-faded.--color-primary.--highlighted:before,.root.--variant-faded.--color-primary:hover:not(.--loading):before{opacity:.06}.root.--variant-faded.--color-critical{background-color:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-critical)}.root.--variant-faded.--color-critical:before{background-color:var(--rs-color-foreground-critical)}.root.--variant-faded.--color-critical.--highlighted:before,.root.--variant-faded.--color-critical:hover:not(.--loading):before{opacity:.06}.root.--variant-faded.--color-positive{background-color:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-positive)}.root.--variant-faded.--color-positive:before{background-color:var(--rs-color-foreground-positive)}.root.--variant-faded.--color-positive.--highlighted:before,.root.--variant-faded.--color-positive:hover:not(.--loading):before{opacity:.06}.root.--variant-faded.--color-inherit{color:inherit}.root.--variant-faded.--color-inherit:before{background-color:currentcolor;opacity:.16}.root.--variant-faded.--color-inherit.--highlighted:before,.root.--variant-faded.--color-inherit:hover:not(.--loading):before{opacity:.24}.root.--variant-faded.--color-black{background-color:rgba(var(--rs-color-rgb-black),28%);color:var(--rs-color-white)}.root.--variant-faded.--color-black.--highlighted,.root.--variant-faded.--color-black:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-black),36%)}.root.--variant-faded.--color-white{background-color:rgba(var(--rs-color-rgb-white),28%);color:var(--rs-color-black)}.root.--variant-faded.--color-white.--highlighted,.root.--variant-faded.--color-white:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-white),36%)}.root.--variant-outline.--color-neutral{background-color:transparent;border-color:var(--rs-color-border-neutral);color:var(--rs-color-foreground-neutral)}.root.--variant-outline.--color-neutral.--highlighted,.root.--variant-outline.--color-neutral:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-neutral),28%)}.root.--variant-outline.--color-primary{background-color:transparent;border-color:var(--rs-color-border-primary);color:var(--rs-color-foreground-primary)}.root.--variant-outline.--color-primary.--highlighted,.root.--variant-outline.--color-primary:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-primary),10%)}.root.--variant-outline.--color-critical{background-color:transparent;border-color:var(--rs-color-border-critical);color:var(--rs-color-foreground-critical)}.root.--variant-outline.--color-critical.--highlighted,.root.--variant-outline.--color-critical:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-critical),10%)}.root.--variant-outline.--color-positive{background-color:transparent;border-color:var(--rs-color-border-positive);color:var(--rs-color-foreground-positive)}.root.--variant-outline.--color-positive.--highlighted,.root.--variant-outline.--color-positive:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-positive),10%)}.root.--variant-outline.--color-white{background-color:transparent;border-color:var(--rs-color-white);color:var(--rs-color-white)}.root.--variant-outline.--color-white.--highlighted,.root.--variant-outline.--color-white:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-white),12%)}.root.--variant-outline.--color-black{background-color:transparent;border-color:var(--rs-color-black);color:var(--rs-color-black)}.root.--variant-outline.--color-black.--highlighted,.root.--variant-outline.--color-black:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-black),4%)}.root.--variant-outline.--color-inherit{background-color:transparent;border-color:currentcolor;color:inherit}.root.--variant-outline.--color-inherit:before{background-color:currentcolor;content:"";inset:0;opacity:0;position:absolute;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.root.--variant-outline.--color-inherit.--highlighted,.root.--variant-outline.--color-inherit:hover:not(.--loading){background-color:transparent}.root.--variant-outline.--color-inherit.--highlighted:before,.root.--variant-outline.--color-inherit:hover:not(.--loading):before{opacity:.1}.root.--variant-ghost{padding-left:var(--rs-button-padding-h-ghost);padding-right:var(--rs-button-padding-h-ghost)}.root.--variant-ghost.--color-neutral{background:transparent;color:var(--rs-color-foreground-neutral)}.root.--variant-ghost.--color-neutral.--highlighted,.root.--variant-ghost.--color-neutral:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-neutral),40%)}.root.--variant-ghost.--color-primary{background:transparent;color:var(--rs-color-foreground-primary)}.root.--variant-ghost.--color-primary.--highlighted,.root.--variant-ghost.--color-primary:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-primary),12%)}.root.--variant-ghost.--color-critical{background:transparent;color:var(--rs-color-foreground-critical)}.root.--variant-ghost.--color-critical.--highlighted,.root.--variant-ghost.--color-critical:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-critical),12%)}.root.--variant-ghost.--color-positive{background:transparent;color:var(--rs-color-foreground-positive)}.root.--variant-ghost.--color-positive.--highlighted,.root.--variant-ghost.--color-positive:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-positive),12%)}.root.--variant-ghost.--color-white{background:transparent;color:var(--rs-color-white)}.root.--variant-ghost.--color-white.--highlighted,.root.--variant-ghost.--color-white:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-white),8%)}.root.--variant-ghost.--color-black{background:transparent;color:var(--rs-color-black)}.root.--variant-ghost.--color-black.--highlighted,.root.--variant-ghost.--color-black:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-black),8%)}.root.--variant-ghost.--color-inherit{background-color:transparent;color:inherit}.root.--variant-ghost.--color-inherit:before{background-color:currentcolor}.root.--variant-ghost.--color-inherit.--highlighted,.root.--variant-ghost.--color-inherit:hover:not(.--loading){background-color:transparent}.root.--variant-ghost.--color-inherit.--highlighted:before,.root.--variant-ghost.--color-inherit:hover:not(.--loading):before{opacity:.08}.root.--disabled,.root.--disabled:hover:not(.--loading){background-color:var(--rs-color-background-disabled)!important;border-color:var(--rs-color-border-disabled)!important;color:var(--rs-color-foreground-disabled)!important}.root.--disabled:before,.root.--disabled:hover:not(.--loading):before{opacity:0!important}.root.--disabled.--variant-faded,.root.--disabled:hover:not(.--loading).--variant-faded{background-color:var(--rs-color-background-disabled-faded)!important}.root.--disabled.--variant-outline,.root.--disabled:hover:not(.--loading).--variant-outline{background-color:transparent!important}.root.--disabled.--variant-ghost,.root.--disabled:hover:not(.--loading).--variant-ghost{background-color:transparent!important;border-color:transparent!important}.root.--disabled:active,.root.--disabled:hover:not(.--loading):active{transform:none!important}.aligner{line-height:0}.aligner.--aligner-position-all .root{margin:calc(var(--rs-button-padding-v) * -1) calc(var(--rs-button-padding-h) * -1)}.aligner.--aligner-position-start .root{margin-inline-start:calc(var(--rs-button-padding-h) * -1)}.aligner.--aligner-position-end .root{margin-inline-end:calc(var(--rs-button-padding-h) * -1)}.aligner.--aligner-position-top .root{margin-top:calc(var(--rs-button-padding-v) * -1)}.aligner.--aligner-position-bottom .root{margin-bottom:calc(var(--rs-button-padding-v) * -1)}@media (min-width:660px){.--size-small--m{--rs-button-padding-v:var(--rs-unit-x1);--rs-button-padding-h:var(--rs-unit-x2);--rs-button-padding-h-ghost:var(--rs-unit-x2);--rs-button-icon-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3)}.--size-medium--m,.--size-small--m{border-radius:var(--rs-unit-radius-small)}.--size-medium--m{--rs-button-padding-v:var(--rs-unit-x2);--rs-button-padding-h:var(--rs-unit-x3);--rs-button-padding-h-ghost:var(--rs-unit-x2);--rs-button-icon-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3)}.--size-large--m{--rs-button-padding-v:var(--rs-unit-x3);--rs-button-padding-h:var(--rs-unit-x4);--rs-button-padding-h-ghost:var(--rs-unit-x3);--rs-button-icon-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2)}.--size-large--m,.--size-xlarge--m{border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--m{--rs-button-padding-v:var(--rs-unit-x4);--rs-button-padding-h:var(--rs-unit-x5);--rs-button-padding-h-ghost:var(--rs-unit-x4);--rs-button-icon-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2)}.--full-width-true--m{text-align:center;width:100%}.--full-width-false--m{text-align:initial;width:auto}}@media (min-width:900px){.--size-small--l{--rs-button-padding-v:var(--rs-unit-x1);--rs-button-padding-h:var(--rs-unit-x2);--rs-button-padding-h-ghost:var(--rs-unit-x2);--rs-button-icon-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3)}.--size-medium--l,.--size-small--l{border-radius:var(--rs-unit-radius-small)}.--size-medium--l{--rs-button-padding-v:var(--rs-unit-x2);--rs-button-padding-h:var(--rs-unit-x3);--rs-button-padding-h-ghost:var(--rs-unit-x2);--rs-button-icon-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3)}.--size-large--l{--rs-button-padding-v:var(--rs-unit-x3);--rs-button-padding-h:var(--rs-unit-x4);--rs-button-padding-h-ghost:var(--rs-unit-x3);--rs-button-icon-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2)}.--size-large--l,.--size-xlarge--l{border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--l{--rs-button-padding-v:var(--rs-unit-x4);--rs-button-padding-h:var(--rs-unit-x5);--rs-button-padding-h-ghost:var(--rs-unit-x4);--rs-button-icon-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2)}.--full-width-true--l{text-align:center;width:100%}.--full-width-false--l{text-align:initial;width:auto}}@media (min-width:1280px){.--size-small--xl{--rs-button-padding-v:var(--rs-unit-x1);--rs-button-padding-h:var(--rs-unit-x2);--rs-button-padding-h-ghost:var(--rs-unit-x2);--rs-button-icon-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3)}.--size-medium--xl,.--size-small--xl{border-radius:var(--rs-unit-radius-small)}.--size-medium--xl{--rs-button-padding-v:var(--rs-unit-x2);--rs-button-padding-h:var(--rs-unit-x3);--rs-button-padding-h-ghost:var(--rs-unit-x2);--rs-button-icon-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3)}.--size-large--xl{--rs-button-padding-v:var(--rs-unit-x3);--rs-button-padding-h:var(--rs-unit-x4);--rs-button-padding-h-ghost:var(--rs-unit-x3);--rs-button-icon-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2)}.--size-large--xl,.--size-xlarge--xl{border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--xl{--rs-button-padding-v:var(--rs-unit-x4);--rs-button-padding-h:var(--rs-unit-x5);--rs-button-padding-h-ghost:var(--rs-unit-x4);--rs-button-icon-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2)}.--full-width-true--xl{text-align:center;width:100%}.--full-width-false--xl{text-align:initial;width:auto}}
|
|
@@ -170,6 +170,7 @@ export const elevated = () => (<Example>
|
|
|
170
170
|
export const size = () => (<Example>
|
|
171
171
|
<Example.Item title="size: small, all variants">
|
|
172
172
|
<View gap={3} direction="row">
|
|
173
|
+
<Button size="small">Button</Button>
|
|
173
174
|
<Button size="small" icon={IconZap}>
|
|
174
175
|
Button
|
|
175
176
|
</Button>
|
|
@@ -184,6 +185,7 @@ export const size = () => (<Example>
|
|
|
184
185
|
|
|
185
186
|
<Example.Item title="size: medium, all variants">
|
|
186
187
|
<View gap={3} direction="row">
|
|
188
|
+
<Button>Button</Button>
|
|
187
189
|
<Button icon={IconZap}>Button</Button>
|
|
188
190
|
<Button variant="outline" icon={IconZap}>
|
|
189
191
|
Button
|
|
@@ -196,6 +198,7 @@ export const size = () => (<Example>
|
|
|
196
198
|
|
|
197
199
|
<Example.Item title="size: large, all variants">
|
|
198
200
|
<View gap={3} direction="row">
|
|
201
|
+
<Button size="large">Button</Button>
|
|
199
202
|
<Button size="large" icon={IconZap}>
|
|
200
203
|
Button
|
|
201
204
|
</Button>
|
|
@@ -210,6 +213,7 @@ export const size = () => (<Example>
|
|
|
210
213
|
|
|
211
214
|
<Example.Item title="size: xlarge, all variants">
|
|
212
215
|
<View gap={3} direction="row">
|
|
216
|
+
<Button size="xlarge">Button</Button>
|
|
213
217
|
<Button size="xlarge" icon={IconZap}>
|
|
214
218
|
Button
|
|
215
219
|
</Button>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{align-items:center;cursor:pointer;display:inline-flex;gap:var(--rs-unit-x2);-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:top}.root:hover .decorator{background:var(--rs-color-background-neutral-faded)}.field{position:relative}.decorator{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:var(--rs-unit-radius-small);height:var(--rs-line-height-body-3);width:var(--rs-line-height-body-3)}.icon{left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%)}[data-rs-keyboard] .input:focus+.decorator{box-shadow:var(--rs-focus-shadow)}.input:indeterminate+.decorator,.root.--error .input:indeterminate+.decorator,.root.--error:hover .input:indeterminate+.decorator,.root:hover .input:indeterminate+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary)}.input:indeterminate+.decorator:before,.root.--error .input:indeterminate+.decorator:before,.root.--error:hover .input:indeterminate+.decorator:before,.root:hover .input:indeterminate+.decorator:before{background:var(--rs-color-on-background-primary);border-radius:999px;content:"";height:2px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--rs-unit-x2)}.input:checked+.decorator,.root.--error .input:checked+.decorator,.root.--error:hover .input:checked+.decorator,.root:hover .input:checked+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.input:checked+.decorator .icon,.root.--error .input:checked+.decorator .icon,.root.--error:hover .input:checked+.decorator .icon,.root:hover .input:checked+.decorator .icon{opacity:1}.root.--error .decorator{border-color:var(--rs-color-border-critical)}.root.--disabled{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.root.--disabled .decorator,.root.--disabled .input:checked+.decorator,.root.--disabled:hover .decorator,.root.--disabled:hover .input:checked+.decorator{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled);color:var(--rs-color-foreground-disabled)}.root.--disabled .input:checked+.decorator,.root.--disabled .input:indeterminate+.decorator,.root.--disabled:hover .input:checked+.decorator,.root.--disabled:hover .input:indeterminate+.decorator{background:var(--rs-color-background-disabled);border-color:transparent}.root.--disabled .input:indeterminate+.decorator:before{background:var(--rs-color-foreground-disabled)}.root.--disabled .input:checked+.decorator:after{background:var(--rs-color-border-disabled)}
|
|
1
|
+
.root{-webkit-tap-highlight-color:transparent;align-items:center;cursor:pointer;display:inline-flex;gap:var(--rs-unit-x2);-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:top}.root:hover .decorator{background:var(--rs-color-background-neutral-faded)}.field{position:relative}.decorator{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:var(--rs-unit-radius-small);height:var(--rs-line-height-body-3);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color;width:var(--rs-line-height-body-3)}.icon{left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform}[data-rs-keyboard] .input:focus+.decorator{box-shadow:var(--rs-focus-shadow)}.input:indeterminate+.decorator,.root.--error .input:indeterminate+.decorator,.root.--error:hover .input:indeterminate+.decorator,.root:hover .input:indeterminate+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary)}.input:indeterminate+.decorator:before,.root.--error .input:indeterminate+.decorator:before,.root.--error:hover .input:indeterminate+.decorator:before,.root:hover .input:indeterminate+.decorator:before{background:var(--rs-color-on-background-primary);border-radius:999px;content:"";height:2px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--rs-unit-x2)}.input:checked+.decorator,.root.--error .input:checked+.decorator,.root.--error:hover .input:checked+.decorator,.root:hover .input:checked+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.input:checked+.decorator .icon,.root.--error .input:checked+.decorator .icon,.root.--error:hover .input:checked+.decorator .icon,.root:hover .input:checked+.decorator .icon{opacity:1;transform:translate(-50%,-50%) scale(1)}.root.--error .decorator{border-color:var(--rs-color-border-critical)}.root.--disabled{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.root.--disabled .decorator,.root.--disabled .input:checked+.decorator,.root.--disabled:hover .decorator,.root.--disabled:hover .input:checked+.decorator{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled);color:var(--rs-color-foreground-disabled)}.root.--disabled .input:checked+.decorator,.root.--disabled .input:indeterminate+.decorator,.root.--disabled:hover .input:checked+.decorator,.root.--disabled:hover .input:indeterminate+.decorator{background:var(--rs-color-background-disabled);border-color:transparent}.root.--disabled .input:indeterminate+.decorator:before{background:var(--rs-color-foreground-disabled)}.root.--disabled .input:checked+.decorator:after{background:var(--rs-color-border-disabled)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{
|
|
1
|
+
.root{min-height:var(--rs-unit-x6);padding-inline-end:var(--rs-unit-x7);position:relative}.close{inset-block-start:0;inset-inline-end:0;position:absolute;z-index:5}.--hide-close,.--variant-media{padding:0}.--variant-media .close{inset-block-start:var(--rs-unit-x2);inset-inline-end:var(--rs-unit-x2)}.--align-center .close{inset-block-start:50%;transform:translateY(-50%)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{background:var(--rs-color-border-neutral-faded);border:none;height:1px;margin:0}.--blank{margin-top:-1px;position:relative}.--vertical{display:inline-block;height:100%;vertical-align:top;width:1px}.--vertical.--blank{
|
|
1
|
+
.root{background:var(--rs-color-border-neutral-faded);border:none;height:1px;margin:0}.--blank{margin-top:-1px;position:relative}.--vertical{display:inline-block;height:100%;vertical-align:top;width:1px}.--vertical.--blank{margin-top:0;margin-inline-start:-1px}@media (min-width:660px){.--vertical-true--m{display:inline-block;height:100%;vertical-align:top;width:1px}.--vertical-true--m.--blank{margin-top:0;margin-inline-start:-1px}.--vertical-false--m{display:block;height:1px;width:100%}.--vertical-false--m.--blank{margin-top:-1px;margin-inline-start:0}}@media (min-width:900px){.--vertical-true--l{display:inline-block;height:100%;vertical-align:top;width:1px}.--vertical-true--l.--blank{margin-top:0;margin-inline-start:-1px}.--vertical-false--l{display:block;height:1px;width:100%}.--vertical-false--l.--blank{margin-top:-1px;margin-inline-start:0}}@media (min-width:1280px){.--vertical-true--xl{display:inline-block;height:100%;vertical-align:top;width:1px}.--vertical-true--xl.--blank{margin-top:0;margin-inline-start:-1px}.--vertical-false--xl{display:block;height:1px;width:100%}.--vertical-false--xl.--blank{margin-top:-1px;margin-inline-start:0}}
|
|
@@ -57,7 +57,7 @@ const DropdownMenuItem = (props) => {
|
|
|
57
57
|
if (onClick)
|
|
58
58
|
onClick(e);
|
|
59
59
|
};
|
|
60
|
-
return (React.createElement(MenuItem, Object.assign({}, props, { roundedCorners: true, className: s.item, attributes: Object.assign(
|
|
60
|
+
return (React.createElement(MenuItem, Object.assign({}, props, { roundedCorners: true, className: s.item, attributes: Object.assign({ role: "menuitem" }, props.attributes), onClick: handleClick })));
|
|
61
61
|
};
|
|
62
62
|
const DropdownMenuSubMenu = (props) => {
|
|
63
63
|
const { children } = props;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{background-color:var(--rs-menu-item-bg-color);color:var(--rs-menu-item-color);display:block;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-medium);padding:var(--rs-menu-item-padding-v) var(--rs-menu-item-padding-h);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,transform}button.root{width:100%}.icon{color:var(--rs-menu-item-icon-color,inherit)}.content,.icon{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:color}.--rounded-corners{border-radius:var(--rs-menu-item-radius)}.--size-small{--rs-menu-item-padding-v:var(--rs-unit-x1);--rs-menu-item-padding-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-unit-radius-small)}.--size-medium,.--size-small{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium{--rs-menu-item-padding-v:var(--rs-unit-x2);--rs-menu-item-padding-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-unit-radius-medium)}.--size-large{--rs-menu-item-padding-v:var(--rs-unit-x3);--rs-menu-item-padding-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-unit-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--color-neutral{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-neutral.--selected,.--color-neutral:hover,.--color-neutral[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),40%)}.--color-critical{--rs-menu-item-color:var(--rs-color-foreground-critical)}.--color-critical.--selected,.--color-critical:hover,.--color-critical[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-critical),12%)}.--color-primary{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-primary:hover,.--color-primary[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),40%)}.--color-primary.--selected,.--color-primary.--selected:hover{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-primary),12%);--rs-menu-item-color:var(--rs-color-foreground-primary);--rs-menu-item-icon-color:var(--rs-color-foreground-primary)}.--selected,.--selected:hover{cursor:default}.--disabled,.--disabled:hover{--rs-menu-item-color:var(--rs-color-foreground-disabled);--rs-menu-item-bg-color:none;--rs-menu-item-icon-color:var(--rs-color-foreground-disabled)}.aligner button.root{box-sizing:initial}.aligner .root{margin:0 calc(var(--rs-menu-item-padding-h) * -1)}@media (min-width:660px){.--rounded-corners-true--m{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--m{border-radius:0}.--size-small--m{--rs-menu-item-padding-v:var(--rs-unit-x1);--rs-menu-item-padding-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-unit-radius-small)}.--size-medium--m,.--size-small--m{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--m{--rs-menu-item-padding-v:var(--rs-unit-x2);--rs-menu-item-padding-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-unit-radius-medium)}.--size-large--m{--rs-menu-item-padding-v:var(--rs-unit-x3);--rs-menu-item-padding-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-unit-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}@media (min-width:900px){.--rounded-corners-true--l{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--l{border-radius:0}.--size-small--l{--rs-menu-item-padding-v:var(--rs-unit-x1);--rs-menu-item-padding-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-unit-radius-small)}.--size-medium--l,.--size-small--l{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--l{--rs-menu-item-padding-v:var(--rs-unit-x2);--rs-menu-item-padding-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-unit-radius-medium)}.--size-large--l{--rs-menu-item-padding-v:var(--rs-unit-x3);--rs-menu-item-padding-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-unit-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}@media (min-width:1280px){.--rounded-corners-true--xl{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--xl{border-radius:0}.--size-small--xl{--rs-menu-item-padding-v:var(--rs-unit-x1);--rs-menu-item-padding-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-unit-radius-small)}.--size-medium--xl,.--size-small--xl{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--xl{--rs-menu-item-padding-v:var(--rs-unit-x2);--rs-menu-item-padding-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-unit-radius-medium)}.--size-large--xl{--rs-menu-item-padding-v:var(--rs-unit-x3);--rs-menu-item-padding-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-unit-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}
|
|
1
|
+
.root{background-color:var(--rs-menu-item-bg-color);color:var(--rs-menu-item-color);display:block;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-medium);padding:var(--rs-menu-item-padding-v) var(--rs-menu-item-padding-h);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,transform,box-shadow}button.root{width:100%}.icon{color:var(--rs-menu-item-icon-color,inherit)}.content,.icon{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:color}.--rounded-corners{border-radius:var(--rs-menu-item-radius)}.--size-small{--rs-menu-item-padding-v:var(--rs-unit-x1);--rs-menu-item-padding-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-unit-radius-small)}.--size-medium,.--size-small{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium{--rs-menu-item-padding-v:var(--rs-unit-x2);--rs-menu-item-padding-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-unit-radius-medium)}.--size-large{--rs-menu-item-padding-v:var(--rs-unit-x3);--rs-menu-item-padding-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-unit-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--color-neutral{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-neutral.--selected,.--color-neutral:hover,.--color-neutral[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),40%)}.--color-critical{--rs-menu-item-color:var(--rs-color-foreground-critical)}.--color-critical.--selected,.--color-critical:hover,.--color-critical[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-critical),12%)}.--color-primary{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-primary:hover,.--color-primary[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),40%)}.--color-primary.--selected,.--color-primary.--selected:hover{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-primary),12%);--rs-menu-item-color:var(--rs-color-foreground-primary);--rs-menu-item-icon-color:var(--rs-color-foreground-primary)}.--selected,.--selected:hover{cursor:default}.--disabled,.--disabled:hover{--rs-menu-item-color:var(--rs-color-foreground-disabled);--rs-menu-item-bg-color:none;--rs-menu-item-icon-color:var(--rs-color-foreground-disabled)}.aligner button.root{box-sizing:initial}.aligner .root{margin:0 calc(var(--rs-menu-item-padding-h) * -1)}@media (min-width:660px){.--rounded-corners-true--m{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--m{border-radius:0}.--size-small--m{--rs-menu-item-padding-v:var(--rs-unit-x1);--rs-menu-item-padding-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-unit-radius-small)}.--size-medium--m,.--size-small--m{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--m{--rs-menu-item-padding-v:var(--rs-unit-x2);--rs-menu-item-padding-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-unit-radius-medium)}.--size-large--m{--rs-menu-item-padding-v:var(--rs-unit-x3);--rs-menu-item-padding-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-unit-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}@media (min-width:900px){.--rounded-corners-true--l{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--l{border-radius:0}.--size-small--l{--rs-menu-item-padding-v:var(--rs-unit-x1);--rs-menu-item-padding-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-unit-radius-small)}.--size-medium--l,.--size-small--l{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--l{--rs-menu-item-padding-v:var(--rs-unit-x2);--rs-menu-item-padding-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-unit-radius-medium)}.--size-large--l{--rs-menu-item-padding-v:var(--rs-unit-x3);--rs-menu-item-padding-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-unit-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}@media (min-width:1280px){.--rounded-corners-true--xl{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--xl{border-radius:0}.--size-small--xl{--rs-menu-item-padding-v:var(--rs-unit-x1);--rs-menu-item-padding-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-unit-radius-small)}.--size-medium--xl,.--size-small--xl{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--xl{--rs-menu-item-padding-v:var(--rs-unit-x2);--rs-menu-item-padding-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-unit-radius-medium)}.--size-large--xl{--rs-menu-item-padding-v:var(--rs-unit-x3);--rs-menu-item-padding-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-unit-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.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);background:var(--rs-color-background-elevation-overlay);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);transition:transform var(--rs-easing-accelerate) var(--rs-duration-medium)}.--position-center{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-unit-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100vw - var(--rs-unit-x8));overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-bottom{--rs-modal-size-s:auto;border-radius:var(--rs-unit-radius-large) var(--rs-unit-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(100vh - var(--rs-unit-x4));max-width:100%;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--position-start{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100)
|
|
1
|
+
.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);background:var(--rs-color-background-elevation-overlay);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);transition:transform var(--rs-easing-accelerate) var(--rs-duration-medium)}.--position-center{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-unit-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100vw - var(--rs-unit-x8));overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-bottom{--rs-modal-size-s:auto;border-radius:var(--rs-unit-radius-large) var(--rs-unit-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(100vh - var(--rs-unit-x4));max-width:100%;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--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(100vw - var(--rs-unit-x4));overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}.--position-end,[dir=rtl] .--position-start{transform:translate(100%)}.--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(100vw - var(--rs-unit-x4));overflow:auto;position:fixed;width:var(--rs-modal-size)}[dir=rtl] .--position-end{transform:translate(-100%)}.--active,[dir=rtl] .--active{transform:translate(0) scale(1)!important;transition-timing-function:var(--rs-easing-decelerate)}@media (min-width:660px){.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-unit-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100vw - var(--rs-unit-x8));overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-bottom--m{--rs-modal-size-s:auto;border-radius:var(--rs-unit-radius-large) var(--rs-unit-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(100vh - var(--rs-unit-x4));max-width:100%;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--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(100vw - var(--rs-unit-x4));overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}.--position-end--m,[dir=rtl] .--position-start--m{transform:translate(100%)}.--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(100vw - var(--rs-unit-x4));overflow:auto;position:fixed;width:var(--rs-modal-size)}[dir=rtl] .--position-end--m{transform:translate(-100%)}}@media (min-width:900px){.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-unit-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100vw - var(--rs-unit-x8));overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-bottom--l{--rs-modal-size-s:auto;border-radius:var(--rs-unit-radius-large) var(--rs-unit-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(100vh - var(--rs-unit-x4));max-width:100%;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--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(100vw - var(--rs-unit-x4));overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}.--position-end--l,[dir=rtl] .--position-start--l{transform:translate(100%)}.--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(100vw - var(--rs-unit-x4));overflow:auto;position:fixed;width:var(--rs-modal-size)}[dir=rtl] .--position-end--l{transform:translate(-100%)}}@media (min-width:1280px){.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-unit-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100vw - var(--rs-unit-x8));overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-bottom--xl{--rs-modal-size-s:auto;border-radius:var(--rs-unit-radius-large) var(--rs-unit-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(100vh - var(--rs-unit-x4));max-width:100%;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--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(100vw - var(--rs-unit-x4));overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}.--position-end--xl,[dir=rtl] .--position-start--xl{transform:translate(100%)}.--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(100vw - var(--rs-unit-x4));overflow:auto;position:fixed;width:var(--rs-modal-size)}[dir=rtl] .--position-end--xl{transform:translate(-100%)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{align-items:center;cursor:pointer;display:inline-flex;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:top}.root:hover .input:not(:checked)+.decorator{background:var(--rs-color-background-neutral-faded)}.field{position:relative}.decorator{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:50%;height:var(--rs-line-height-body-3);width:var(--rs-line-height-body-3)}.decorator:after{background:var(--rs-color-on-background-primary);border-radius:50%;content:"";height:var(--rs-unit-x2);left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--rs-unit-x2)}[data-rs-keyboard] .input:focus+.decorator{box-shadow:var(--rs-focus-shadow)}.input:checked+.decorator,.root.--error .input:checked+.decorator,.root.--error:hover .input:checked+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary);border-width:2px}.input:checked+.decorator:after,.root.--error .input:checked+.decorator:after,.root.--error:hover .input:checked+.decorator:after{opacity:1;transform:translate(-50%,-50%)}.text{
|
|
1
|
+
.root{-webkit-tap-highlight-color:transparent;align-items:center;cursor:pointer;display:inline-flex;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:top}.root:hover .input:not(:checked)+.decorator{background:var(--rs-color-background-neutral-faded)}.field{position:relative}.decorator{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:50%;height:var(--rs-line-height-body-3);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color;width:var(--rs-line-height-body-3)}.decorator:after{background:var(--rs-color-on-background-primary);border-radius:50%;content:"";height:var(--rs-unit-x2);left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;width:var(--rs-unit-x2)}[data-rs-keyboard] .input:focus+.decorator{box-shadow:var(--rs-focus-shadow)}.input:checked+.decorator,.root.--error .input:checked+.decorator,.root.--error:hover .input:checked+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary);border-width:2px}.input:checked+.decorator:after,.root.--error .input:checked+.decorator:after,.root.--error:hover .input:checked+.decorator:after{opacity:1;transform:translate(-50%,-50%) scale(1)}.text{margin-inline-start:var(--rs-unit-x2)}.root.--error .decorator,.root.--error:hover .input+.decorator{border-color:var(--rs-color-border-critical)}.root.--disabled{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.root.--disabled .decorator,.root.--disabled .input:checked+.decorator,.root.--disabled:hover .input+.decorator{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled .input:checked+.decorator{border-color:transparent}.root.--disabled .input:checked+.decorator:after{background:var(--rs-color-border-disabled)}
|
|
@@ -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{
|
|
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}
|
|
@@ -52,7 +52,7 @@ const Select = (props) => {
|
|
|
52
52
|
children || (placeholder ? React.createElement(Text, { color: "neutral-faded" }, placeholder) : null)),
|
|
53
53
|
React.createElement("input", { type: "hidden", value: value, name: name }))),
|
|
54
54
|
React.createElement("div", { className: s.arrow },
|
|
55
|
-
React.createElement(Icon, { svg: IconArrow, color: "neutral-faded", size: responsivePropDependency(size, (size) => {
|
|
55
|
+
React.createElement(Icon, { svg: IconArrow, color: disabled ? "disabled" : "neutral-faded", size: responsivePropDependency(size, (size) => {
|
|
56
56
|
return size === "large" || size === "xlarge" ? 5 : 4;
|
|
57
57
|
}) }))));
|
|
58
58
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);display:flex;overflow:hidden;padding:calc(var(--rs-unit-x1) - 1px);position:relative;z-index:0}.root:focus-within{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.input{
|
|
1
|
+
.root{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);display:flex;overflow:hidden;padding:calc(var(--rs-unit-x1) - 1px);position:relative;z-index:0}.root:focus-within{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.input{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;box-sizing:border-box;color:var(--rs-color-foreground-neutral);cursor:pointer;display:flex;flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);outline:none;padding-inline-end:calc(var(--rs-select-chevron-size) + var(--rs-select-gap) * 2 + var(--rs-unit-x1));position:relative;width:100%;z-index:1}.input::-ms-expand{display:none}select.input{padding-inline-start:var(--rs-select-gap)}.slot{align-items:center;display:flex;flex-shrink:0;position:relative;z-index:5}.icon{box-sizing:initial;padding-inline-end:var(--rs-unit-x1);padding-inline-start:var(--rs-select-gap)}.input .slot{padding-inline-end:var(--rs-select-gap);padding-inline-start:0}.arrow{color:var(--rs-color-foreground-neutral-faded);display:flex;inset-block-start:50%;inset-inline-end:calc(var(--rs-select-gap) + var(--rs-unit-x1));pointer-events:none;position:absolute;transform:translateY(-50%);z-index:5}.--size-medium{--rs-select-gap:var(--rs-unit-x1);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-small)}.--size-medium .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3);padding-bottom:var(--rs-unit-x1);padding-top:var(--rs-unit-x1)}.--size-large{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-large .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-xlarge{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);border-color:transparent}.root.--variant-faded:focus-within{border-color:var(--rs-color-border-primary)}.root.--variant-headless{background:transparent;border-color:transparent}.root.--variant-headless.--status-error,.root.--variant-headless.--status-error:focus-within,.root.--variant-headless:focus-within{border-color:transparent;box-shadow:none}.root.--status-error{border-color:var(--rs-color-border-critical)}.root.--status-error:focus-within{border-color:var(--rs-color-border-primary)}.root.--placeholder .input{color:var(--rs-color-foreground-neutral-faded)}.root.--disabled{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled .arrow,.root.--disabled .input{color:var(--rs-color-foreground-disabled);cursor:not-allowed}@media (max-width:659px) and (hover:none){.input{font-size:var(--rs-font-size-body-2)!important}}@media (min-width:660px){.--size-medium--m{--rs-select-gap:var(--rs-unit-x1);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-small)}.--size-medium--m .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3);padding-bottom:var(--rs-unit-x1);padding-top:var(--rs-unit-x1)}.--size-large--m{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-large--m .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-xlarge--m{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--m .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}}@media (min-width:900px){.--size-medium--l{--rs-select-gap:var(--rs-unit-x1);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-small)}.--size-medium--l .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3);padding-bottom:var(--rs-unit-x1);padding-top:var(--rs-unit-x1)}.--size-large--l{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-large--l .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-xlarge--l{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--l .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}}@media (min-width:1280px){.--size-medium--xl{--rs-select-gap:var(--rs-unit-x1);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-small)}.--size-medium--xl .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3);padding-bottom:var(--rs-unit-x1);padding-top:var(--rs-unit-x1)}.--size-large--xl{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-large--xl .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-xlarge--xl{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--xl .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import React from "react";
|
|
13
|
+
import SliderControlled from "./SliderControlled.js";
|
|
14
|
+
import SliderUncontrolled from "./SliderUncontrolled.js";
|
|
15
|
+
const Slider = (props) => {
|
|
16
|
+
const { min = 0, max = 100 } = props, rest = __rest(props, ["min", "max"]);
|
|
17
|
+
if (("value" in props && props.value !== undefined) ||
|
|
18
|
+
("minValue" in props &&
|
|
19
|
+
"maxValue" in props &&
|
|
20
|
+
props.minValue !== undefined &&
|
|
21
|
+
props.maxValue !== undefined)) {
|
|
22
|
+
return React.createElement(SliderControlled, Object.assign({}, rest, { min: min, max: max }));
|
|
23
|
+
}
|
|
24
|
+
return React.createElement(SliderUncontrolled, Object.assign({}, rest, { min: min, max: max }));
|
|
25
|
+
};
|
|
26
|
+
export default Slider;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.root{align-items:center;cursor:pointer;display:flex;height:var(--rs-unit-x4);-webkit-user-select:none;-moz-user-select:none;user-select:none}.bar,.root{position:relative}.bar{background:var(--rs-color-background-neutral);border-radius:var(--rs-unit-radius-small);height:var(--rs-unit-x1);width:100%}.bar,.input{overflow:hidden}.input{height:1px;opacity:0;pointer-events:none;position:absolute;width:1px}.selection{background:var(--rs-color-background-primary);height:100%;position:absolute}.tooltip{background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-unit-radius-small);bottom:100%;box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);left:50%;opacity:0;padding:calc(var(--rs-unit-x1) / 2) var(--rs-unit-x1);transform:translate(-50%);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;-webkit-user-select:none;-moz-user-select:none;user-select:none}.thumb,.tooltip{position:absolute}.thumb{height:100%;width:0}.thumb:before{background:var(--rs-color-background-primary);border-radius:999px;box-shadow:0 0 0 2px var(--rs-color-background-elevation-base);box-sizing:border-box;height:var(--rs-unit-x4);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:box-shadow;width:var(--rs-unit-x4)}.thumb:after,.thumb:before{content:"";left:0;position:absolute;top:50%;transform:translate(-50%,-50%)}.thumb:after{cursor:grab;height:var(--rs-unit-x9);width:var(--rs-unit-x9)}.thumb:hover .tooltip{opacity:1;transform:translate(-50%,calc(var(--rs-unit-x1) * -1))}.input:focus+.thumb:after,.thumb--active:after{cursor:grabbing}.input:focus+.thumb:before,.thumb--active:before{box-shadow:0 0 0 1px var(--rs-color-background-elevation-base)}.input:focus+.thumb .tooltip,.thumb--active .tooltip{opacity:1;transform:translate(-50%,calc(var(--rs-unit-x1) * -1)) scale(1.1)!important}.--disabled{cursor:not-allowed}.--disabled .bar{background-color:var(--rs-color-background-disabled)}.--disabled .selection,.--disabled .thumb:before{background-color:var(--rs-color-foreground-disabled)}.--disabled .thumb:after{cursor:not-allowed}.--disabled .thumb:hover .tooltip{opacity:0}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import type * as G from "../../types/global";
|
|
2
|
+
export type SingleChangeArgs = {
|
|
3
|
+
value: number;
|
|
4
|
+
minValue?: never;
|
|
5
|
+
maxValue?: never;
|
|
6
|
+
name: string;
|
|
7
|
+
};
|
|
8
|
+
export type RangeChangeArgs = {
|
|
9
|
+
value?: never;
|
|
10
|
+
minValue: number;
|
|
11
|
+
maxValue: number;
|
|
12
|
+
name: string;
|
|
13
|
+
};
|
|
14
|
+
type RangeSelectionProps = {
|
|
15
|
+
range: true;
|
|
16
|
+
onChange?: (args: RangeChangeArgs) => void;
|
|
17
|
+
onChangeCommit?: (args: RangeChangeArgs) => void;
|
|
18
|
+
};
|
|
19
|
+
type SingleSelectionProps = {
|
|
20
|
+
range?: false;
|
|
21
|
+
onChange?: (args: SingleChangeArgs) => void;
|
|
22
|
+
onChangeCommit?: (args: SingleChangeArgs) => void;
|
|
23
|
+
};
|
|
24
|
+
type ControlledSingleProps = {
|
|
25
|
+
value: number;
|
|
26
|
+
defaultValue?: never;
|
|
27
|
+
};
|
|
28
|
+
type ControlledRangeProps = {
|
|
29
|
+
minValue: number;
|
|
30
|
+
maxValue: number;
|
|
31
|
+
defaultMinValue?: never;
|
|
32
|
+
defaultMaxValue?: never;
|
|
33
|
+
};
|
|
34
|
+
type UncontrolledSingleProps = {
|
|
35
|
+
value?: never;
|
|
36
|
+
defaultValue?: number;
|
|
37
|
+
};
|
|
38
|
+
type UncontrolledRangeProps = {
|
|
39
|
+
minValue?: never;
|
|
40
|
+
maxValue?: never;
|
|
41
|
+
defaultMinValue?: number;
|
|
42
|
+
defaultMaxValue?: number;
|
|
43
|
+
};
|
|
44
|
+
type BaseProps = {
|
|
45
|
+
name: string;
|
|
46
|
+
step?: number;
|
|
47
|
+
disabled?: boolean;
|
|
48
|
+
min?: number;
|
|
49
|
+
max?: number;
|
|
50
|
+
renderValue?: (args: {
|
|
51
|
+
value: number;
|
|
52
|
+
}) => string;
|
|
53
|
+
className?: G.ClassName;
|
|
54
|
+
attributes?: G.Attributes<"div", Props>;
|
|
55
|
+
};
|
|
56
|
+
export type ControlledProps = BaseProps & ((ControlledSingleProps & SingleSelectionProps) | (ControlledRangeProps & RangeSelectionProps));
|
|
57
|
+
export type UncontrolledProps = BaseProps & ((UncontrolledSingleProps & SingleSelectionProps) | (UncontrolledRangeProps & RangeSelectionProps));
|
|
58
|
+
export type Props = ControlledProps | UncontrolledProps;
|
|
59
|
+
export type DefaultProps = {
|
|
60
|
+
min: number;
|
|
61
|
+
max: number;
|
|
62
|
+
};
|
|
63
|
+
export type ThumbProps = {
|
|
64
|
+
id: string;
|
|
65
|
+
name: string;
|
|
66
|
+
disabled?: boolean;
|
|
67
|
+
value: number;
|
|
68
|
+
active?: boolean;
|
|
69
|
+
position: number;
|
|
70
|
+
onChange: (value: number, options?: {
|
|
71
|
+
commit?: boolean;
|
|
72
|
+
}) => void;
|
|
73
|
+
onDragStart: () => void;
|
|
74
|
+
max: number;
|
|
75
|
+
min: number;
|
|
76
|
+
renderValue?: BaseProps["renderValue"];
|
|
77
|
+
};
|
|
78
|
+
export {};
|
|
@@ -0,0 +1,172 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { classNames } from "../../utilities/helpers.js";
|
|
4
|
+
import useRTL from "../../hooks/useRTL.js";
|
|
5
|
+
import useElementId from "../../hooks/useElementId.js";
|
|
6
|
+
import { useFormControl } from "../FormControl/index.js";
|
|
7
|
+
import SliderThumb from "./SliderThumb.js";
|
|
8
|
+
import s from "./Slider.module.css";
|
|
9
|
+
const getDragX = (event) => {
|
|
10
|
+
if (event instanceof MouseEvent)
|
|
11
|
+
return event.pageX || event.screenX;
|
|
12
|
+
return event.changedTouches[0].pageX;
|
|
13
|
+
};
|
|
14
|
+
const applyStepToValue = (value, step) => {
|
|
15
|
+
return Math.round(value / step) * step;
|
|
16
|
+
};
|
|
17
|
+
const SliderControlled = (props) => {
|
|
18
|
+
var _a;
|
|
19
|
+
const { name, range, max, min, step = 1, onChange, onChangeCommit, renderValue, className, attributes, } = props;
|
|
20
|
+
const minValue = range && props.minValue !== undefined ? applyStepToValue(props.minValue, step) : undefined;
|
|
21
|
+
const maxValue = applyStepToValue(range ? props.maxValue : props.value, step);
|
|
22
|
+
const barRef = React.useRef(null);
|
|
23
|
+
const minRef = React.useRef(null);
|
|
24
|
+
const maxRef = React.useRef(null);
|
|
25
|
+
const [draggingId, setDraggingId] = React.useState(null);
|
|
26
|
+
const [rtl] = useRTL();
|
|
27
|
+
const formControl = useFormControl();
|
|
28
|
+
const id = useElementId();
|
|
29
|
+
const inputId = ((_a = formControl === null || formControl === void 0 ? void 0 : formControl.attributes) === null || _a === void 0 ? void 0 : _a.id) || id;
|
|
30
|
+
const minId = `${inputId}-min`;
|
|
31
|
+
const maxId = `${inputId}-max`;
|
|
32
|
+
const disabled = (formControl === null || formControl === void 0 ? void 0 : formControl.disabled) || props.disabled;
|
|
33
|
+
const rootClassNames = classNames(s.root, disabled && s["--disabled"], className);
|
|
34
|
+
const getPositionValue = React.useCallback((x) => {
|
|
35
|
+
if (!barRef.current)
|
|
36
|
+
return;
|
|
37
|
+
const barWidth = barRef.current.clientWidth;
|
|
38
|
+
const positionX = x - barRef.current.getBoundingClientRect().left;
|
|
39
|
+
let percentage = positionX / barWidth;
|
|
40
|
+
if (rtl)
|
|
41
|
+
percentage = 1 - percentage;
|
|
42
|
+
let value = (max - min) * percentage + min;
|
|
43
|
+
value = Math.max(min, Math.min(max, value));
|
|
44
|
+
return applyStepToValue(value, step);
|
|
45
|
+
}, [max, min, rtl, step]);
|
|
46
|
+
const getPercentPosition = (value) => {
|
|
47
|
+
const ratio = (value - min) / (max - min);
|
|
48
|
+
return ratio * 100;
|
|
49
|
+
};
|
|
50
|
+
const handleMinChange = React.useCallback((value, options) => {
|
|
51
|
+
if (!range)
|
|
52
|
+
return;
|
|
53
|
+
const method = (options === null || options === void 0 ? void 0 : options.commit) ? onChangeCommit : onChange;
|
|
54
|
+
method === null || method === void 0 ? void 0 : method({ minValue: value, maxValue, name });
|
|
55
|
+
},
|
|
56
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
57
|
+
[maxValue, name, range]);
|
|
58
|
+
const handleMaxChange = React.useCallback((value, options) => {
|
|
59
|
+
if (range) {
|
|
60
|
+
const method = (options === null || options === void 0 ? void 0 : options.commit) ? onChangeCommit : onChange;
|
|
61
|
+
method === null || method === void 0 ? void 0 : method({ minValue: minValue, maxValue: value, name });
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
64
|
+
const method = (options === null || options === void 0 ? void 0 : options.commit) ? onChangeCommit : onChange;
|
|
65
|
+
method === null || method === void 0 ? void 0 : method({ value, name });
|
|
66
|
+
},
|
|
67
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
68
|
+
[minValue, name, range]);
|
|
69
|
+
const handleMouseDown = ({ nativeEvent }) => {
|
|
70
|
+
if (disabled)
|
|
71
|
+
return;
|
|
72
|
+
let minDistance;
|
|
73
|
+
let closestId;
|
|
74
|
+
const x = getDragX(nativeEvent);
|
|
75
|
+
const nextValue = getPositionValue(x);
|
|
76
|
+
const thumbs = [
|
|
77
|
+
{ ref: minRef, id: minId },
|
|
78
|
+
{ ref: maxRef, id: maxId },
|
|
79
|
+
];
|
|
80
|
+
thumbs.forEach((item) => {
|
|
81
|
+
if (!item.ref.current)
|
|
82
|
+
return;
|
|
83
|
+
const el = item.ref.current;
|
|
84
|
+
const distance = Math.abs(el.getBoundingClientRect().left - x);
|
|
85
|
+
if (minDistance === undefined || distance <= minDistance) {
|
|
86
|
+
minDistance = distance;
|
|
87
|
+
closestId = item.id;
|
|
88
|
+
}
|
|
89
|
+
});
|
|
90
|
+
if (!closestId || nextValue === undefined)
|
|
91
|
+
return;
|
|
92
|
+
if (closestId === minId)
|
|
93
|
+
handleMinChange(nextValue);
|
|
94
|
+
if (closestId === maxId)
|
|
95
|
+
handleMaxChange(nextValue);
|
|
96
|
+
setDraggingId(closestId);
|
|
97
|
+
};
|
|
98
|
+
const handleMinDragStart = () => {
|
|
99
|
+
if (disabled)
|
|
100
|
+
return;
|
|
101
|
+
setDraggingId(minId);
|
|
102
|
+
};
|
|
103
|
+
const handleMaxDragStart = () => {
|
|
104
|
+
if (disabled)
|
|
105
|
+
return;
|
|
106
|
+
setDraggingId(maxId);
|
|
107
|
+
};
|
|
108
|
+
const handleDragStop = React.useCallback(() => {
|
|
109
|
+
if (draggingId === minId && minValue !== undefined) {
|
|
110
|
+
handleMinChange(minValue, { commit: true });
|
|
111
|
+
}
|
|
112
|
+
if (draggingId === maxId) {
|
|
113
|
+
handleMaxChange(maxValue, { commit: true });
|
|
114
|
+
}
|
|
115
|
+
setDraggingId(null);
|
|
116
|
+
}, [minValue, maxValue, handleMinChange, handleMaxChange, draggingId, minId, maxId]);
|
|
117
|
+
const handleDrag = React.useCallback((e) => {
|
|
118
|
+
if (!draggingId)
|
|
119
|
+
return;
|
|
120
|
+
const x = getDragX(e);
|
|
121
|
+
const nextValue = getPositionValue(x);
|
|
122
|
+
if (nextValue === undefined)
|
|
123
|
+
return;
|
|
124
|
+
// Switch to another id if thumbs overlap
|
|
125
|
+
let nextDraggingId = draggingId;
|
|
126
|
+
if (draggingId === minId && nextValue > maxValue)
|
|
127
|
+
nextDraggingId = maxId;
|
|
128
|
+
if (draggingId === maxId && minValue && nextValue < minValue)
|
|
129
|
+
nextDraggingId = minId;
|
|
130
|
+
if (nextDraggingId === minId)
|
|
131
|
+
handleMinChange(nextValue);
|
|
132
|
+
if (nextDraggingId === maxId)
|
|
133
|
+
handleMaxChange(nextValue);
|
|
134
|
+
if (draggingId !== nextDraggingId)
|
|
135
|
+
setDraggingId(nextDraggingId);
|
|
136
|
+
}, [
|
|
137
|
+
draggingId,
|
|
138
|
+
minValue,
|
|
139
|
+
maxValue,
|
|
140
|
+
getPositionValue,
|
|
141
|
+
handleMaxChange,
|
|
142
|
+
handleMinChange,
|
|
143
|
+
maxId,
|
|
144
|
+
minId,
|
|
145
|
+
]);
|
|
146
|
+
React.useEffect(() => {
|
|
147
|
+
window.addEventListener("mouseup", handleDragStop);
|
|
148
|
+
window.addEventListener("touchend", handleDragStop);
|
|
149
|
+
window.addEventListener("mousemove", handleDrag);
|
|
150
|
+
window.addEventListener("touchmove", handleDrag);
|
|
151
|
+
return () => {
|
|
152
|
+
window.removeEventListener("mouseup", handleDragStop);
|
|
153
|
+
window.removeEventListener("touchend", handleDragStop);
|
|
154
|
+
window.removeEventListener("mousemove", handleDrag);
|
|
155
|
+
window.removeEventListener("touchmove", handleDrag);
|
|
156
|
+
};
|
|
157
|
+
}, [handleDragStop, handleDrag]);
|
|
158
|
+
const minPercentPosition = minValue && getPercentPosition(minValue);
|
|
159
|
+
const maxPercentPosition = getPercentPosition(maxValue);
|
|
160
|
+
return (
|
|
161
|
+
// mouse/touch events only needed for non-keyboard use
|
|
162
|
+
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
163
|
+
React.createElement("div", Object.assign({}, attributes, { className: rootClassNames, onMouseDown: handleMouseDown, onTouchStart: handleMouseDown }),
|
|
164
|
+
React.createElement("div", { className: s.bar, ref: barRef },
|
|
165
|
+
React.createElement("div", { className: s.selection, style: {
|
|
166
|
+
insetInlineStart: `${minPercentPosition || 0}%`,
|
|
167
|
+
width: `${maxPercentPosition - (minPercentPosition || 0)}%`,
|
|
168
|
+
} })),
|
|
169
|
+
minValue !== undefined && minPercentPosition !== undefined && (React.createElement(SliderThumb, { id: minId, active: minId === draggingId, name: name, disabled: disabled, onChange: handleMinChange, value: minValue, onDragStart: handleMinDragStart, position: minPercentPosition, max: max, min: min, ref: minRef, renderValue: renderValue })),
|
|
170
|
+
React.createElement(SliderThumb, { id: maxId, active: maxId === draggingId, name: name, disabled: disabled, onChange: handleMaxChange, value: maxValue, onDragStart: handleMaxDragStart, position: maxPercentPosition, max: max, min: min, ref: maxRef, renderValue: renderValue })));
|
|
171
|
+
};
|
|
172
|
+
export default SliderControlled;
|