@bioturing/components 0.14.0 → 0.15.0

package/dist/PopupPanel.css

@@ -1,116 +1,170 @@
-.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;
-}
+@layer components {
+  .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[data-ending-style], .ds-popup-panel[data-starting-style] {
+    opacity: 0;
+    transform: scale(.9);
+  }
 
-.ds-popup-panel:focus {
-  outline: none;
-}
+  .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 {
+    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-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-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 {
+    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-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-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-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-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;
+  }
 }
 
-.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;
+@layer components {
+  .ds-icon-button {
+    cursor: pointer;
+    color: var(--ds-color-icon);
+    background-color: #0000;
+    border: none;
+    border-radius: 999px;
+    justify-content: center;
+    align-items: center;
+    transition: all .2s;
+    display: inline-flex;
+  }
+
+  .ds-icon-button:hover {
+    background-color: var(--ds-color-fill-secondary);
+    color: var(--ds-color-icon-hover);
+  }
+
+  .ds-icon-button:active, .ds-icon-button.ds-popover-open {
+    background-color: var(--ds-color-primary-bg);
+    color: var(--ds-color-primary);
+  }
+
+  .ds-icon-button:focus {
+    outline: none;
+  }
+
+  .ds-icon-button:disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+    color: var(--ds-color-text-disabled);
+  }
+
+  .ds-icon-button.ds-icon-button-medium {
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: .125rem;
+    font-size: 1.25rem;
+  }
+
+  .ds-icon-button.ds-icon-button-small {
+    width: 1.25rem;
+    height: 1.25rem;
+    padding: .125rem;
+    font-size: 1rem;
+  }
+
+  .ds-icon-button.ds-icon-button-negative-margin {
+    margin: -.125rem;
+  }
 }
 

package/dist/Radio.css

@@ -0,0 +1,14 @@
+@layer components {
+  .ds-radio {
+    align-self: unset;
+  }
+
+  .ds-radio-wrapper {
+    display: inline-flex;
+  }
+
+  .ds-radio-wrapper .ds-radio {
+    transform: translateY(.1875rem);
+  }
+}
+

package/dist/ScrollArea.css

@@ -0,0 +1,64 @@
+@layer components {
+  .ds-scroll-area {
+    flex-direction: column;
+    flex: 1;
+    height: 100%;
+    min-height: 0;
+    display: flex;
+  }
+
+  .ds-scroll-area .ds-scroll-area-viewport {
+    overscroll-behavior: contain;
+    flex-shrink: 1;
+    height: 100%;
+    max-height: 100%;
+    overflow: hidden;
+  }
+
+  :is(.ds-scroll-area .ds-scroll-area-viewport):focus-visible {
+    outline-offset: 4px;
+    outline-width: 2px;
+    outline-color: var(--ds-color-primary);
+  }
+
+  .ds-scroll-area .ds-scroll-area-scrollbar {
+    opacity: 0;
+    background-color: #0000;
+    justify-content: center;
+    padding: .25rem;
+    transition-property: opacity;
+    transition-delay: .1s;
+    display: flex;
+  }
+
+  :is(.ds-scroll-area .ds-scroll-area-scrollbar) .ds-scroll-area-thumb {
+    background-color: var(--ds-color-bg-fill-tertiary);
+    border: 1px solid var(--ds-color-border);
+    border-radius: 9999px;
+  }
+
+  [data-orientation="vertical"]:is(.ds-scroll-area .ds-scroll-area-scrollbar) {
+    width: .875rem;
+  }
+
+  [data-orientation="vertical"]:is(.ds-scroll-area .ds-scroll-area-scrollbar) .ds-scroll-area-thumb {
+    width: 100%;
+  }
+
+  [data-orientation="horizontal"]:is(.ds-scroll-area .ds-scroll-area-scrollbar) {
+    flex-direction: column;
+    width: 100%;
+    height: .875rem;
+  }
+
+  [data-orientation="horizontal"]:is(.ds-scroll-area .ds-scroll-area-scrollbar) .ds-scroll-area-thumb {
+    height: 100%;
+  }
+
+  [data-hovering]:is(.ds-scroll-area .ds-scroll-area-scrollbar), [data-scrolling]:is(.ds-scroll-area .ds-scroll-area-scrollbar) {
+    opacity: 1;
+    transition-duration: .2s;
+    transition-delay: 0s;
+  }
+}
+

package/dist/ScrollArea.js

@@ -24,24 +24,24 @@ const useCls = ()=>{
     return (...args)=>cx(...args).map((cls)=>getPrefixCls(cls)).join(" ");
 };
 "use client";
-const ScrollArea = ({ children, className, viewportClassName, thumbClassName, scrollbarClassName, orientation = "vertical" })=>{
+const ScrollArea = ({ children, className, classNames = {}, orientation = "vertical" })=>{
     const cls = useCls();
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_5aaa6934__.ScrollArea.Root, {
         className: clsx(cls("scroll-area"), className),
         children: [
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_5aaa6934__.ScrollArea.Viewport, {
-                className: clsx(cls("scroll-area-viewport"), viewportClassName),
+                className: clsx(cls("scroll-area-viewport"), null == classNames ? void 0 : classNames.viewport),
                 children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_5aaa6934__.ScrollArea.Content, {
                     className: clsx(cls("scroll-area-content")),
                     children: children
                 })
             }),
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_5aaa6934__.ScrollArea.Scrollbar, {
-                className: clsx(cls("scroll-area-scrollbar"), scrollbarClassName),
+                className: clsx(cls("scroll-area-scrollbar"), null == classNames ? void 0 : classNames.scrollbar),
                 orientation: orientation,
                 "data-orientation": orientation,
                 children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_5aaa6934__.ScrollArea.Thumb, {
-                    className: clsx(cls("scroll-area-thumb", thumbClassName))
+                    className: clsx(cls("scroll-area-thumb"), null == classNames ? void 0 : classNames.thumb)
                 })
             })
         ]

package/dist/Segmented.css

@@ -0,0 +1,16 @@
+@layer components {
+  .ds-segmented .ds-segmented-item-label {
+    justify-content: center;
+    align-items: center;
+    display: flex;
+  }
+
+  .ds-segmented .ds-segmented-item-icon {
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    font-size: 1rem;
+    display: flex;
+  }
+}
+

package/dist/Select.css

@@ -0,0 +1,24 @@
+@layer components {
+  .ds-select-popup .ds-select-item-option-state {
+    order: -1;
+  }
+
+  .ds-select-popup .ds-select-checkbox-indicator, .ds-select-popup .ant-select-checkbox-indicator {
+    margin-right: .5rem;
+  }
+
+  .ds-select-multiple .ds-select-item-option-selected:not(.ds-select-item-option-disabled):not(:hover) {
+    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;
+  }
+}
+

package/dist/Select.js

@@ -47,7 +47,7 @@ var constants_PopupPanelSize = /*#__PURE__*/ function(PopupPanelSize) {
     PopupPanelSize["xlarge"] = "840px";
     return PopupPanelSize;
 }({});
-const MainSelectInner = ({ mode, className, open: openProp, defaultOpen, onOpenChange, popupClassName, onDropdownVisibleChange, enhancePositioner, getPopupContainer, popupSize, popupRender, classNames, styles = {}, ...rest }, ref)=>{
+const MainSelectInner = ({ mode, className, open: openProp, defaultOpen, onOpenChange, popupClassName, onDropdownVisibleChange, enhancePositioner, getPopupContainer, popupSize, popupRender, dropdownRender, classNames, styles = {}, ...rest }, ref)=>{
     var _classNames_popup;
     const portalNode = (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.useFloatingPortalNode)({});
     const isMultiple = "multiple" === mode || "tags" === mode;
@@ -127,7 +127,8 @@ const MainSelectInner = ({ mode, className, open: openProp, defaultOpen, onOpenC
         }) : styles,
         getPopupContainer: getPopupContainer || (enhancePositioner ? ()=>portalNode || document.body : void 0),
         popupRender: (menu)=>{
-            if (!enhancePositioner) return popupRender ? popupRender(menu) : menu;
+            const renderMenu = ()=>popupRender ? popupRender(menu) : dropdownRender ? dropdownRender(menu) : menu;
+            if (!enhancePositioner) return renderMenu();
             return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
                 children: [
                     /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.FloatingOverlay, {
@@ -140,7 +141,7 @@ const MainSelectInner = ({ mode, className, open: openProp, defaultOpen, onOpenC
                             const popupEl = node.closest(".ds-select-dropdown");
                             refs.setFloating(popupEl);
                         },
-                        children: popupRender ? popupRender(menu) : menu
+                        children: renderMenu()
                     })
                 ]
             });

package/dist/Spin.css

@@ -0,0 +1,36 @@
+@layer components {
+  :root {
+    --ds-animate-spin: ds-spin 1s linear infinite;
+  }
+
+  @keyframes ds-spin {
+    0% {
+      transform: rotate(0);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  .ds-spin .ds-spin-icon {
+    animation: var(--ds-animate-spin);
+    color: var(--ds-color-icon);
+  }
+
+  .ds-spin .ds-spin-text {
+    color: var(--ds-color-icon);
+  }
+
+  .ds-spin-loader {
+    border: max(2px, .12em) solid var(--ds-color-border);
+    border-bottom-color: var(--ds-color-icon);
+    box-sizing: border-box;
+    border-radius: 50%;
+    width: 1em;
+    height: 1em;
+    animation: 1s linear infinite spin;
+    display: inline-block;
+  }
+}
+

package/dist/Splitter.css

@@ -0,0 +1,6 @@
+@layer components {
+  .ds-splitter > .ds-splitter-bar .ds-splitter-bar-collapse-bar.ds-splitter-bar-collapse-bar-start {
+    opacity: 1;
+  }
+}
+

package/dist/Switch.css

@@ -0,0 +1,7 @@
+@layer components {
+  :is(.ds-switch .ds-switch-inner) span.ds-switch-inner-checked, :is(.ds-switch .ds-switch-inner) span.ds-switch-inner-unchecked {
+    place-items: center;
+    display: flex;
+  }
+}
+

package/dist/Table.css

@@ -0,0 +1,116 @@
+@layer components {
+  .ds-empty .ds-empty-image {
+    height: auto;
+  }
+
+  .ds-empty-small .ds-empty-icon {
+    color: var(--ds-color-base-solid);
+    font-size: 2rem;
+  }
+
+  .ds-empty-medium .ds-empty-icon {
+    font-size: 3rem;
+  }
+
+  .ds-empty-large .ds-empty-icon {
+    font-size: 4rem;
+  }
+}
+
+@layer components {
+  .ds-table-column-sort-icon {
+    flex-direction: column;
+    display: flex;
+  }
+
+  .ds-table-column-sort-icon svg {
+    color: var(--ds-color-text-disabled);
+    font-size: 1rem;
+  }
+
+  :is(.ds-table-column-sort-icon svg):hover {
+    color: var(--ds-color-text-secondary);
+  }
+
+  .ds-table-column-sort-icon.ds-table-column-sort-icon-none svg {
+    font-size: .75rem;
+  }
+
+  .ds-table-column-sort-icon.ds-table-column-sort-icon-none > svg:first-child {
+    margin-bottom: -2px;
+  }
+
+  .ds-table-column-sort-icon.ds-table-column-sort-icon-none > svg:last-child {
+    margin-top: -2px;
+  }
+
+  .ds-table-column-filter-icon {
+    flex-direction: column;
+    display: flex;
+  }
+
+  .ds-table-column-filter-icon svg {
+    color: var(--ds-color-text-disabled);
+    font-size: .875rem;
+  }
+
+  :is(.ds-table-column-filter-icon svg):hover {
+    color: var(--ds-color-text-secondary);
+  }
+
+  .ds-table-column-filter-icon.ds-table-column-filter-icon-active svg {
+    color: var(--ds-color-primary);
+  }
+
+  .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-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-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-color-table-fixed-column-shadow);
+  }
+
+  .ds-table-wrapper {
+    flex-direction: column;
+    display: flex;
+  }
+
+  .ds-table-wrapper .ds-spin-nested-loading, .ds-table-wrapper .ds-spin-container {
+    flex-direction: column;
+    flex-grow: 1;
+    flex-shrink: 1;
+    min-height: 0;
+    display: flex;
+  }
+
+  :is(.ds-table-wrapper .ds-spin-container) .ds-table {
+    flex-grow: 1;
+    flex-shrink: 1;
+    min-height: 0;
+  }
+
+  .ds-table {
+    flex-direction: column;
+    display: flex;
+  }
+
+  .ds-table-container {
+    flex-direction: column;
+    flex-shrink: 1;
+    min-height: 0;
+    display: flex;
+  }
+
+  .ds-table-header {
+    flex-shrink: 0;
+  }
+
+  .ds-table-body {
+    flex-shrink: 1;
+  }
+}
+

package/dist/Tag.css

@@ -0,0 +1,17 @@
+@layer components {
+  .ds-tag {
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .ds-tag[data-active] {
+    background-color: var(--ds-color-primary-bg);
+    border-color: var(--ds-color-primary);
+    color: var(--ds-color-primary);
+  }
+
+  .ds-tag .ds-tag-close-icon {
+    color: var(--ds-color-icon);
+  }
+}
+

package/dist/ThemeProvider.css

@@ -0,0 +1,39 @@
+: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;
+}
+
+@supports (font-variation-settings: normal) {
+  :root {
+    --ds-inter: "InterVariable", Inter, Helvetica, Arial, sans-serif;
+    --ds-roboto-mono: "Roboto Mono Variable", Roboto Mono, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-optical-sizing: auto;
+  }
+}
+
+@layer components {
+  .ds-theme-provider {
+    --ds-color-bg-segment-active: #fff;
+    --ds-scrollbar-color-thumb: #0003;
+    --ds-scrollbar-color-track: #0000;
+    --ds-color-base-solid: #000;
+    --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-color-table-fixed-column-shadow: #0003;
+  }
+}
+