rsuite 6.0.0-canary-20250620 → 6.0.0-canary-2025062016

package/dist/rsuite.css

@@ -578,6 +578,19 @@ dd{
   --rs-radio-tile-icon-size:32px;
   --rs-rate-symbol:var(--rs-gray-600);
   --rs-rate-color:var(--rs-blue-500);
+  --rs-segmented-control-bg:var(--rs-gray-100);
+  --rs-segmented-control-border-color:var(--rs-border-primary);
+  --rs-segmented-control-item-active-color:var(--rs-text-primary);
+  --rs-segmented-control-item-color:var(--rs-text-secondary);
+  --rs-segmented-control-item-disabled-color:var(--rs-gray-400);
+  --rs-segmented-control-pill-indicator-bg:var(--rs-gray-0);
+  --rs-segmented-control-underline-color:var(--rs-primary-500);
+  --rs-slider-bar:var(--rs-gray-100);
+  --rs-slider-hover-bar:var(--rs-gray-200);
+  --rs-slider-thumb-border:var(--rs-primary-500);
+  --rs-slider-thumb-bg:#fff;
+  --rs-slider-thumb-hover-shadow:0 0 0 8px rgb(from var(--rs-gray-500) r g b / 25%);
+  --rs-slider-progress:var(--rs-primary-500);
   --rs-toggle-bg:var(--rs-gray-500);
   --rs-toggle-thumb:#fff;
   --rs-toggle-loader-ring:rgb(from var(--rs-gray-50) r g b / 30%);
@@ -590,12 +603,6 @@ dd{
   --rs-toggle-checked-hover-bg:var(--rs-primary-600);
   --rs-toggle-checked-disabled-bg:var(--rs-primary-200);
   --rs-toggle-checked-disabled-thumb:#fff;
-  --rs-slider-bar:var(--rs-gray-100);
-  --rs-slider-hover-bar:var(--rs-gray-200);
-  --rs-slider-thumb-border:var(--rs-primary-500);
-  --rs-slider-thumb-bg:#fff;
-  --rs-slider-thumb-hover-shadow:0 0 0 8px rgb(from var(--rs-gray-500) r g b / 25%);
-  --rs-slider-progress:var(--rs-primary-500);
   --rs-uploader-item-bg:var(--rs-gray-300);
   --rs-uploader-item-hover-bg:var(--rs-gray-50);
   --rs-uploader-overlay-bg:rgb(from #fff r g b / 80%);
@@ -968,6 +975,19 @@ dd{
   --rs-radio-tile-checked-disabled-color:var(--rs-primary-900);
   --rs-rate-symbol:var(--rs-gray-600);
   --rs-rate-color:var(--rs-yellow-500);
+  --rs-segmented-control-bg:var(--rs-gray-700);
+  --rs-segmented-control-border-color:var(--rs-border-primary);
+  --rs-segmented-control-item-active-color:var(--rs-text-primary);
+  --rs-segmented-control-item-color:var(--rs-text-secondary);
+  --rs-segmented-control-item-disabled-color:var(--rs-gray-500);
+  --rs-segmented-control-pill-indicator-bg:var(--rs-gray-800);
+  --rs-segmented-control-underline-color:var(--rs-primary-500);
+  --rs-slider-bar:var(--rs-gray-600);
+  --rs-slider-hover-bar:var(--rs-gray-600);
+  --rs-slider-thumb-border:var(--rs-primary-500);
+  --rs-slider-thumb-bg:var(--rs-gray-700);
+  --rs-slider-thumb-hover-shadow:0 0 0 8px rgb(from var(--rs-primary-500) r g b / 25%);
+  --rs-slider-progress:var(--rs-primary-500);
   --rs-toggle-bg:var(--rs-gray-500);
   --rs-toggle-thumb:#fff;
   --rs-toggle-hover-bg:var(--rs-gray-300);
@@ -978,12 +998,6 @@ dd{
   --rs-toggle-checked-hover-bg:var(--rs-primary-600);
   --rs-toggle-checked-disabled-bg:var(--rs-primary-900);
   --rs-toggle-checked-disabled-thumb:var(--rs-gray-300);
-  --rs-slider-bar:var(--rs-gray-600);
-  --rs-slider-hover-bar:var(--rs-gray-600);
-  --rs-slider-thumb-border:var(--rs-primary-500);
-  --rs-slider-thumb-bg:var(--rs-gray-700);
-  --rs-slider-thumb-hover-shadow:0 0 0 8px rgb(from var(--rs-primary-500) r g b / 25%);
-  --rs-slider-progress:var(--rs-primary-500);
   --rs-uploader-item-bg:var(--rs-gray-300);
   --rs-uploader-item-hover-bg:var(--rs-gray-600);
   --rs-uploader-overlay-bg:rgb(from var(--rs-gray-600) r g b / 80%);
@@ -1356,6 +1370,19 @@ dd{
   --rs-radio-tile-checked-disabled-color:var(--rs-primary-900);
   --rs-rate-symbol:var(--rs-gray-100);
   --rs-rate-color:var(--rs-primary-500);
+  --rs-segmented-control-bg:var(--rs-gray-700);
+  --rs-segmented-control-border-color:var(--rs-gray-600);
+  --rs-segmented-control-item-active-color:var(--rs-text-primary);
+  --rs-segmented-control-item-color:var(--rs-text-secondary);
+  --rs-segmented-control-item-disabled-color:var(--rs-gray-500);
+  --rs-segmented-control-pill-indicator-bg:var(--rs-gray-800);
+  --rs-segmented-control-underline-color:var(--rs-primary-500);
+  --rs-slider-bar:var(--rs-gray-600);
+  --rs-slider-hover-bar:var(--rs-gray-600);
+  --rs-slider-thumb-border:var(--rs-primary-500);
+  --rs-slider-thumb-bg:var(--rs-gray-700);
+  --rs-slider-thumb-hover-shadow:0 0 0 8px rgb(from var(--rs-primary-500) r g b / 25%);
+  --rs-slider-progress:var(--rs-primary-500);
   --rs-toggle-bg:var(--rs-gray-800);
   --rs-toggle-thumb:var(--rs-gray-100);
   --rs-toggle-hover-bg:var(--rs-gray-800);
@@ -1366,12 +1393,6 @@ dd{
   --rs-toggle-checked-hover-bg:var(--rs-primary-400);
   --rs-toggle-checked-disabled-bg:var(--rs-primary-900);
   --rs-toggle-checked-disabled-thumb:var(--rs-gray-800);
-  --rs-slider-bar:var(--rs-gray-600);
-  --rs-slider-hover-bar:var(--rs-gray-600);
-  --rs-slider-thumb-border:var(--rs-primary-500);
-  --rs-slider-thumb-bg:var(--rs-gray-700);
-  --rs-slider-thumb-hover-shadow:0 0 0 8px rgb(from var(--rs-primary-500) r g b / 25%);
-  --rs-slider-progress:var(--rs-primary-500);
   --rs-uploader-item-bg:var(--rs-gray-300);
   --rs-uploader-item-hover-bg:var(--rs-gray-800);
   --rs-uploader-item-hover-text:var(--rs-primary-500);
@@ -12678,6 +12699,164 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   --rs-rate-color:var(--rs-info-500);
 }
 
+:root{
+  --rs-segmented-control-spacing:calc(var(--rs-spacing) * 1);
+  --rs-segmented-control-border-radius:var(--rs-radius-md);
+  --rs-segmented-control-border-width:1px;
+  --rs-segmented-control-padding:calc(var(--rs-spacing) * 0.5);
+  --rs-segmented-control-height:36px;
+  --rs-segmented-control-height-xs:24px;
+  --rs-segmented-control-height-sm:30px;
+  --rs-segmented-control-height-lg:42px;
+  --rs-segmented-control-height-xl:48px;
+  --rs-segmented-control-item-padding-y:calc(var(--rs-spacing) * 1);
+  --rs-segmented-control-item-padding-y-xs:calc(var(--rs-spacing) * 0.5);
+  --rs-segmented-control-item-padding-y-sm:calc(var(--rs-spacing) * 0.75);
+  --rs-segmented-control-item-padding-y-lg:calc(var(--rs-spacing) * 1.25);
+  --rs-segmented-control-item-padding-y-xl:calc(var(--rs-spacing) * 1.5);
+  --rs-segmented-control-item-padding-x:calc(var(--rs-spacing) * 2);
+  --rs-segmented-control-item-padding-x-xs:calc(var(--rs-spacing) * 1.5);
+  --rs-segmented-control-item-padding-x-sm:calc(var(--rs-spacing) * 1.75);
+  --rs-segmented-control-item-padding-x-lg:calc(var(--rs-spacing) * 2.25);
+  --rs-segmented-control-item-padding-x-xl:calc(var(--rs-spacing) * 2.5);
+  --rs-segmented-control-font-size:var(--rs-font-size-sm);
+  --rs-segmented-control-font-size-xs:var(--rs-font-size-extra-small);
+  --rs-segmented-control-font-size-sm:var(--rs-font-size-sm);
+  --rs-segmented-control-font-size-lg:var(--rs-font-size-base);
+  --rs-segmented-control-font-size-xl:var(--rs-font-size-large);
+  --rs-segmented-control-indicator-transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  --rs-segmented-control-indicator-border-radius:calc(var(--rs-radius-md) - 2px);
+  --rs-segmented-control-indicator-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --rs-segmented-control-underline-height:2px;
+  --rs-segmented-control-pill-indicator-height:calc(var(--rs-segmented-control-height) - 8px);
+  --rs-segmented-control-pill-indicator-border-radius:var(--rs-radius-md);
+  --rs-segmented-control-pill-indicator-shadow:var(--rs-shadow-sm);
+}
+
+.rs-segmented-control{
+  display:inline-flex;
+  position:relative;
+  align-items:center;
+  height:var(--rs-segmented-control-height);
+  border-style:solid;
+  border-width:var(--rs-segmented-control-border-width);
+  border-color:var(--rs-segmented-control-border-color);
+  border-radius:var(--rs-segmented-control-border-radius);
+  padding:var(--rs-segmented-control-padding);
+  gap:var(--rs-segmented-control-spacing);
+  background-color:var(--rs-segmented-control-bg);
+  box-sizing:border-box;
+  font-size:var(--rs-segmented-control-font-size);
+}
+.rs-segmented-control:where([data-size=xs]){
+  --rs-segmented-control-height:var(--rs-segmented-control-height-xs);
+  --rs-segmented-control-item-padding-y:var(--rs-segmented-control-item-padding-y-xs);
+  --rs-segmented-control-item-padding-x:var(--rs-segmented-control-item-padding-x-xs);
+  --rs-segmented-control-font-size:var(--rs-segmented-control-font-size-xs);
+}
+.rs-segmented-control:where([data-size=sm]){
+  --rs-segmented-control-height:var(--rs-segmented-control-height-sm);
+  --rs-segmented-control-item-padding-y:var(--rs-segmented-control-item-padding-y-sm);
+  --rs-segmented-control-item-padding-x:var(--rs-segmented-control-item-padding-x-sm);
+  --rs-segmented-control-font-size:var(--rs-segmented-control-font-size-sm);
+}
+.rs-segmented-control:where([data-size=lg]){
+  --rs-segmented-control-height:var(--rs-segmented-control-height-lg);
+  --rs-segmented-control-item-padding-y:var(--rs-segmented-control-item-padding-y-lg);
+  --rs-segmented-control-item-padding-x:var(--rs-segmented-control-item-padding-x-lg);
+  --rs-segmented-control-font-size:var(--rs-segmented-control-font-size-lg);
+}
+.rs-segmented-control:where([data-size=xl]){
+  --rs-segmented-control-height:var(--rs-segmented-control-height-xl);
+  --rs-segmented-control-item-padding-y:var(--rs-segmented-control-item-padding-y-xl);
+  --rs-segmented-control-item-padding-x:var(--rs-segmented-control-item-padding-x-xl);
+  --rs-segmented-control-font-size:var(--rs-segmented-control-font-size-xl);
+}
+.rs-segmented-control[data-block=true]{
+  display:flex;
+  width:100%;
+}
+.rs-segmented-control[data-block=true] .rs-segmented-control-item{
+  flex:1 1 0%;
+  min-width:0;
+  text-align:center;
+  white-space:nowrap;
+  overflow:hidden;
+  text-overflow:ellipsis;
+}
+.rs-segmented-control:empty{
+  display:none;
+}
+.rs-segmented-control .rs-segmented-control-item{
+  position:relative;
+  z-index:1;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  height:100%;
+  padding-inline:var(--rs-segmented-control-item-padding-x);
+  padding-block:var(--rs-segmented-control-item-padding-y);
+  border-radius:var(--rs-segmented-control-indicator-border-radius);
+  cursor:pointer;
+  -webkit-user-select:none;
+     -moz-user-select:none;
+          user-select:none;
+  transition:color 0.2s ease;
+  color:var(--rs-segmented-control-item-color);
+}
+.rs-segmented-control .rs-segmented-control-item[data-active]{
+  color:var(--rs-segmented-control-item-active-color);
+}
+.rs-segmented-control .rs-segmented-control-item[data-disabled]{
+  opacity:0.5;
+  cursor:not-allowed;
+}
+.rs-segmented-control .rs-segmented-control-item .rs-segmented-control-radio{
+  position:absolute;
+  opacity:0;
+  width:0;
+  height:0;
+  margin:0;
+  padding:0;
+}
+.rs-segmented-control .rs-segmented-control-item .rs-segmented-control-label{
+  font-size:var(--rs-font-size-sm);
+  line-height:var(--rs-line-height-sm);
+}
+.rs-segmented-control .rs-segmented-control-indicator{
+  position:absolute;
+  z-index:0;
+  transition:var(--rs-segmented-control-indicator-transition);
+  box-shadow:var(--rs-segmented-control-indicator-shadow);
+}
+[data-theme=high-contrast] .rs-segmented-control .rs-segmented-control-indicator, .rs-theme-high-contrast .rs-segmented-control .rs-segmented-control-indicator{
+  transition:none;
+}
+.rs-segmented-control:where([data-indicator=pill]) .rs-segmented-control-indicator{
+  background-color:var(--rs-segmented-control-pill-indicator-bg);
+  border-radius:var(--rs-segmented-control-pill-indicator-border-radius);
+  box-shadow:var(--rs-segmented-control-pill-indicator-shadow);
+  height:var(--rs-segmented-control-pill-indicator-height);
+}
+.rs-segmented-control:where([data-indicator=underline]){
+  padding-block:0;
+  padding-inline:var(--rs-segmented-control-border-radius);
+  background-color:transparent;
+}
+.rs-segmented-control:where([data-indicator=underline]) .rs-segmented-control-item{
+  padding-bottom:calc(var(--rs-segmented-control-item-padding-y) + var(--rs-segmented-control-underline-height));
+  border-radius:0;
+  position:relative;
+  z-index:1;
+}
+.rs-segmented-control:where([data-indicator=underline]) .rs-segmented-control-indicator{
+  bottom:-1px;
+  height:var(--rs-segmented-control-underline-height);
+  background-color:var(--rs-segmented-control-underline-color);
+  border-radius:var(--rs-radius-none);
+  box-shadow:none;
+}
+
 .rs-sidenav{
   --rs-sidenav-width:52px;
   --rs-sidenav-item-font-size:var(--rs-font-size-sm);