@bioturing/components 0.13.3 → 0.14.0

package/dist/style.css

@@ -1,8 +1,10 @@
 :root {
   --ds-modal-padding: 24px;
   --ds-modal-edge-padding: 16px;
+  --ds-popup-panel-padding: 16px;
   --ds-scrollbar-width: auto;
   --ds-scrollbar-width-legacy: 15;
+  --ds-box-shadow-popover-arrow: 0px 0px 1px 0px var(--ds-color-border-modal), 2px 2px 5px #0000000d;
   --ds-inter: "Inter", Helvetica, Arial, sans-serif;
   --ds-roboto-mono: "Roboto Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
@@ -20,15 +22,17 @@
   --ds-scrollbar-color-thumb: #0003;
   --ds-scrollbar-color-track: #0000;
   --ds-color-base-solid: #000;
-  --ds-table-fixed-column-shadow-color: #0000001a;
+  --ds-color-table-fixed-column-shadow: #0000001a;
+  --ds-color-border-modal: #0000003d;
 }
 
 .ds-theme-provider.dark {
+  --ds-color-border-modal: #ffffff8c;
   --ds-color-bg-segment-active: #424248;
   --ds-scrollbar-color-thumb: #fff3;
   --ds-scrollbar-color-track: #0000;
   --ds-color-base-solid: #fff;
-  --ds-table-fixed-column-shadow-color: #0003;
+  --ds-color-table-fixed-column-shadow: #0003;
 }
 
 @supports (scrollbar-width: auto) {
@@ -151,7 +155,6 @@ svg {
 .ds-breadcrumb.ds-breadcrumb-nowrap ol li:not(.ds-breadcrumb-separator) {
   flex: 0 auto;
   min-width: 0;
-  max-width: 100%;
   transition: all .2s;
   display: flex;
 }
@@ -164,6 +167,10 @@ svg {
   overflow: hidden;
 }
 
+.ds-breadcrumb.ds-breadcrumb-nowrap ol li:not(.ds-breadcrumb-separator) {
+  max-width: 100%;
+}
+
 .ds-breadcrumb.ds-breadcrumb-nowrap ol li:last-child {
   flex: none;
 }
@@ -603,6 +610,8 @@ span.ds-btn-icon {
 }
 
 .ds-modal-wrap .ds-modal .ds-modal-content {
+  box-shadow: var(--ds-box-shadow-secondary);
+  background: var(--ds-modal-bg);
   flex-direction: column;
   padding: 0;
   display: flex;
@@ -618,11 +627,13 @@ span.ds-btn-icon {
 
 .ds-modal-wrap .ds-modal .ds-modal-header {
   padding: calc(var(--ds-modal-padding) * 2 / 3) var(--ds-modal-padding) 0 var(--ds-modal-padding);
+  background: none;
   margin-bottom: 0;
 }
 
 .ds-modal-wrap .ds-modal .ds-modal-footer {
   padding: 0 var(--ds-modal-padding) var(--ds-modal-padding) var(--ds-modal-padding);
+  background: none;
   margin-top: 0;
 }
 
@@ -643,6 +654,19 @@ span.ds-btn-icon {
   max-height: calc(100vh - var(--ds-modal-edge-padding) * 2);
 }
 
+.ds-modal-no-body-scroll .ds-modal {
+  height: 100%;
+}
+
+.ds-modal-no-body-scroll .ds-modal .ds-modal-body {
+  display: grid;
+  overflow: hidden;
+}
+
+.ds-modal-no-body-scroll .ds-modal .ds-modal-body > * {
+  min-height: 0;
+}
+
 .ds-modal-fullscreen .ds-modal > div[tabindex="0"], .ds-modal-fullscreen .ds-modal .ds-modal-inner {
   height: 100%;
 }
@@ -669,7 +693,7 @@ span.ds-btn-icon {
   top: 8px;
 }
 
-.ds-modal-scrollable .ds-modal .ds-modal-inner {
+.ds-modal-content-overflow .ds-modal .ds-modal-inner {
   margin-top: 0;
 }
 
@@ -772,6 +796,16 @@ span.ds-btn-icon {
   background: none;
 }
 
+.ds-select-popup-enhanced {
+  z-index: 1000;
+  width: var(--ds-select-popup-width);
+  height: -moz-fit-content;
+  height: fit-content;
+  max-width: calc(var(--available-width)  - 16px);
+  max-height: calc(var(--available-height)  - 16px);
+  transition: none;
+}
+
 :root {
   --ds-animate-spin: ds-spin 1s linear infinite;
 }
@@ -860,15 +894,15 @@ span.ds-btn-icon {
 }
 
 .ds-table-wrapper .ds-table-ping-left .ds-table-cell-fix-left-first:after, .ds-table-wrapper .ds-table-ping-left .ds-table-cell-fix-left-last:after {
-  box-shadow: inset 10px 0 8px -8px var(--ds-table-fixed-column-shadow-color);
+  box-shadow: inset 10px 0 8px -8px var(--ds-color-table-fixed-column-shadow);
 }
 
 .ds-table-wrapper .ds-table-ping-right .ds-table-cell-fix-right-first:after, .ds-table-wrapper .ds-table-ping-right .ds-table-cell-fix-right-last:after, .ds-table-wrapper .ds-table-ping-right:not(.ds-table-has-fix-right) .ds-table-container:after {
-  box-shadow: inset -10px 0 8px -8px var(--ds-table-fixed-column-shadow-color);
+  box-shadow: inset -10px 0 8px -8px var(--ds-color-table-fixed-column-shadow);
 }
 
 .ds-table-wrapper .ds-table-ping-left:not(.ds-table-has-fix-left) .ds-table-container:before {
-  box-shadow: inset 10px 0 8px -8px var(--ds-table-fixed-column-shadow-color);
+  box-shadow: inset 10px 0 8px -8px var(--ds-color-table-fixed-column-shadow);
 }
 
 .ds-table-wrapper {
@@ -1240,3 +1274,119 @@ span.ds-btn-icon {
   display: flex;
 }
 
+.ds-popup-panel {
+  box-shadow: var(--ds-box-shadow-secondary);
+  border-radius: var(--ds-border-radius);
+  background: var(--ds-color-bg-elevated);
+  color: var(--ds-color-text);
+  font-size: var(--ds-font-size);
+  font-family: var(--ds-font-family);
+  transition-property: transform, scale, opacity;
+  transition-duration: .2s;
+  transition-timing-function: var(--ds-motion-ease-out);
+  transform-origin: var(--transform-origin);
+  width: calc(min(var(--size-width), var(--available-width)));
+  max-width: var(--available-width);
+  max-height: var(--available-height);
+  flex-direction: column;
+  height: max-content;
+  list-style: none;
+  display: flex;
+}
+
+.ds-popup-panel[data-ending-style], .ds-popup-panel[data-starting-style] {
+  opacity: 0;
+  transform: scale(.9);
+}
+
+.ds-popup-panel:focus {
+  outline: none;
+}
+
+.ds-popup-panel-header {
+  border-bottom: 1px solid var(--ds-color-split);
+  padding: calc(var(--ds-popup-panel-padding) / 2) var(--ds-popup-panel-padding);
+  flex: 0;
+  margin-bottom: 0;
+}
+
+.ds-popup-panel-header .ds-popup-panel-title-wrapper {
+  font-weight: 500;
+  font-size: var(--ds-font-size);
+  line-height: var(--ds-line-height);
+  color: var(--ds-color-text);
+}
+
+.ds-popup-panel-footer {
+  border-top: 1px solid var(--ds-color-split);
+  padding: calc(var(--ds-popup-panel-padding) / 2) var(--ds-popup-panel-padding);
+  flex: 0;
+  margin-top: 0;
+}
+
+.ds-popup-panel-content {
+  flex-direction: column;
+  flex: 1;
+  display: flex;
+  overflow: auto;
+}
+
+.ds-popup-panel-content .ds-popup-panel-content-inner {
+  padding: var(--ds-popup-panel-padding);
+  flex: 1;
+}
+
+.ds-resize-handle-top {
+  color: #fff;
+  border-top-left-radius: .5rem;
+  border-top-right-radius: .5rem;
+  justify-content: center;
+  width: 100%;
+  height: 4px;
+  padding: .5rem;
+  display: block;
+  position: absolute;
+  top: 0;
+}
+
+.ds-resize-handle-bottom {
+  color: #fff;
+  border-bottom-right-radius: .5rem;
+  border-bottom-left-radius: .5rem;
+  justify-content: center;
+  width: 100%;
+  height: 4px;
+  padding: .5rem;
+  display: block;
+  position: absolute;
+  bottom: 0;
+}
+
+.ds-resize-handle-left {
+  color: #fff;
+  border-top-left-radius: .5rem;
+  border-bottom-left-radius: .5rem;
+  align-items: center;
+  width: 4px;
+  height: 100%;
+  padding: .5rem;
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.ds-resize-handle-right {
+  color: #fff;
+  border-top-right-radius: .5rem;
+  border-bottom-right-radius: .5rem;
+  align-items: center;
+  width: 4px;
+  height: 100%;
+  padding: .5rem;
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+

package/dist/tokens/and-theme/index.d.ts

@@ -0,0 +1 @@
+export * from "./tokens";

package/dist/{components/src/tokens/index.d.ts → tokens/and-theme/tokens.d.ts}

@@ -1,3 +1,5 @@
 import { type ThemeConfig } from "antd";
+import { type ColorTokens } from "../utils";
+export declare const antdColorTokens: ColorTokens;
 export declare const lightTheme: ThemeConfig;
 export declare const darkTheme: ThemeConfig;

package/dist/tokens/charts/index.d.ts

@@ -0,0 +1,6 @@
+import { rawChartColorTokens, chartColorTokens } from "./tokens";
+import { ColorTokenValue } from "../utils";
+export declare const categoricalChartColorKeys: Array<keyof typeof chartColorTokens>;
+export declare const categoricalChartColorTokens: Record<"colorChartsRed300" | "colorChartsRed400" | "colorChartsRed500" | "colorChartsRed600" | "colorChartsRed700" | "colorChartsRed800" | "colorChartsRed900" | "colorChartsRed1000" | "colorChartsRed1100" | "colorChartsRed1200" | "colorChartsOrange300" | "colorChartsOrange400" | "colorChartsOrange500" | "colorChartsOrange600" | "colorChartsOrange700" | "colorChartsOrange800" | "colorChartsOrange900" | "colorChartsOrange1000" | "colorChartsOrange1100" | "colorChartsOrange1200" | "colorChartsYellow300" | "colorChartsYellow400" | "colorChartsYellow500" | "colorChartsYellow600" | "colorChartsYellow700" | "colorChartsYellow800" | "colorChartsYellow900" | "colorChartsYellow1000" | "colorChartsYellow1100" | "colorChartsYellow1200" | "colorChartsGreen300" | "colorChartsGreen400" | "colorChartsGreen500" | "colorChartsGreen600" | "colorChartsGreen700" | "colorChartsGreen800" | "colorChartsGreen900" | "colorChartsGreen1000" | "colorChartsGreen1100" | "colorChartsGreen1200" | "colorChartsTeal300" | "colorChartsTeal400" | "colorChartsTeal500" | "colorChartsTeal600" | "colorChartsTeal700" | "colorChartsTeal800" | "colorChartsTeal900" | "colorChartsTeal1000" | "colorChartsTeal1100" | "colorChartsTeal1200" | "colorChartsBlue1300" | "colorChartsBlue1400" | "colorChartsBlue1500" | "colorChartsBlue1600" | "colorChartsBlue1700" | "colorChartsBlue1800" | "colorChartsBlue1900" | "colorChartsBlue11000" | "colorChartsBlue11100" | "colorChartsBlue11200" | "colorChartsBlue2300" | "colorChartsBlue2400" | "colorChartsBlue2500" | "colorChartsBlue2600" | "colorChartsBlue2700" | "colorChartsBlue2800" | "colorChartsBlue2900" | "colorChartsBlue21000" | "colorChartsBlue21100" | "colorChartsBlue21200" | "colorChartsPurple300" | "colorChartsPurple400" | "colorChartsPurple500" | "colorChartsPurple600" | "colorChartsPurple700" | "colorChartsPurple800" | "colorChartsPurple900" | "colorChartsPurple1000" | "colorChartsPurple1100" | "colorChartsPurple1200" | "colorChartsPink300" | "colorChartsPink400" | "colorChartsPink500" | "colorChartsPink600" | "colorChartsPink700" | "colorChartsPink800" | "colorChartsPink900" | "colorChartsPink1000" | "colorChartsPink1100" | "colorChartsPink1200" | "colorChartsStatusCritical" | "colorChartsStatusHigh" | "colorChartsStatusMedium" | "colorChartsStatusLow" | "colorChartsStatusPositive" | "colorChartsStatusInfo" | "colorChartsStatusNeutral" | "colorChartsThresholdNegative" | "colorChartsThresholdPositive" | "colorChartsThresholdInfo" | "colorChartsThresholdNeutral" | "colorChartsLineGrid" | "colorChartsLineTick" | "colorChartsLineAxis" | "colorChartsLabelAxis" | "colorChartsPaletteCategorical1" | "colorChartsPaletteCategorical2" | "colorChartsPaletteCategorical3" | "colorChartsPaletteCategorical4" | "colorChartsPaletteCategorical5" | "colorChartsPaletteCategorical6" | "colorChartsPaletteCategorical7" | "colorChartsPaletteCategorical8" | "colorChartsPaletteCategorical9" | "colorChartsPaletteCategorical10" | "colorChartsPaletteCategorical11" | "colorChartsPaletteCategorical12" | "colorChartsPaletteCategorical13" | "colorChartsPaletteCategorical14" | "colorChartsPaletteCategorical15" | "colorChartsPaletteCategorical16" | "colorChartsPaletteCategorical17" | "colorChartsPaletteCategorical18" | "colorChartsPaletteCategorical19" | "colorChartsPaletteCategorical20" | "colorChartsPaletteCategorical21" | "colorChartsPaletteCategorical22" | "colorChartsPaletteCategorical23" | "colorChartsPaletteCategorical24" | "colorChartsPaletteCategorical25" | "colorChartsPaletteCategorical26" | "colorChartsPaletteCategorical27" | "colorChartsPaletteCategorical28" | "colorChartsPaletteCategorical29" | "colorChartsPaletteCategorical30" | "colorChartsPaletteCategorical31" | "colorChartsPaletteCategorical32" | "colorChartsPaletteCategorical33" | "colorChartsPaletteCategorical34" | "colorChartsPaletteCategorical35" | "colorChartsPaletteCategorical36" | "colorChartsPaletteCategorical37" | "colorChartsPaletteCategorical38" | "colorChartsPaletteCategorical39" | "colorChartsPaletteCategorical40" | "colorChartsPaletteCategorical41" | "colorChartsPaletteCategorical42" | "colorChartsPaletteCategorical43" | "colorChartsPaletteCategorical44" | "colorChartsPaletteCategorical45" | "colorChartsPaletteCategorical46" | "colorChartsPaletteCategorical47" | "colorChartsPaletteCategorical48" | "colorChartsPaletteCategorical49" | "colorChartsPaletteCategorical50", ColorTokenValue>;
+export declare const categoricalChartsColors: ColorTokenValue[];
+export { rawChartColorTokens, chartColorTokens };