@bioturing/components 0.14.0 → 0.15.0

package/dist/Badge.css

@@ -0,0 +1,6 @@
+@layer components {
+  .ds-badge {
+    display: inline-flex;
+  }
+}
+

package/dist/Breadcrumb.css

@@ -0,0 +1,83 @@
+@layer components {
+  .ds-breadcrumb {
+    display: flex;
+  }
+
+  .ds-breadcrumb ol {
+    flex: 1;
+    gap: .25rem 0;
+    min-width: 0;
+    display: inline-flex;
+  }
+
+  .ds-breadcrumb > ol > li {
+    flex: 0 1 0;
+    align-items: center;
+    max-width: 100%;
+    display: inline-flex;
+  }
+
+  .ds-breadcrumb > ol > li.ds-breadcrumb-separator {
+    flex: 0;
+  }
+
+  .ds-breadcrumb > ol > li .ds-breadcrumb-link {
+    white-space: nowrap;
+    flex: 0 auto;
+    align-items: center;
+    gap: .5rem;
+    min-width: 0;
+    display: inline-flex;
+  }
+
+  .ds-breadcrumb .ds-breadcrumb-item-name {
+    flex: auto;
+  }
+
+  .ds-breadcrumb .ds-breadcrumb-item-icon {
+    flex: none;
+  }
+
+  .ds-breadcrumb.ds-breadcrumb-nowrap {
+    flex-grow: 1;
+    align-items: center;
+    min-width: 0;
+    display: flex;
+  }
+
+  .ds-breadcrumb.ds-breadcrumb-nowrap ol {
+    flex-wrap: nowrap;
+  }
+
+  :is(.ds-breadcrumb.ds-breadcrumb-nowrap ol) li:not(.ds-breadcrumb-separator) {
+    flex: 0 auto;
+    min-width: 0;
+    transition: all .2s;
+    display: flex;
+  }
+
+  :is(:is(.ds-breadcrumb.ds-breadcrumb-nowrap ol) li:not(.ds-breadcrumb-separator)) span.ds-breadcrumb-link {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+    display: block;
+    overflow: hidden;
+  }
+
+  :is(.ds-breadcrumb.ds-breadcrumb-nowrap ol) li:not(.ds-breadcrumb-separator) {
+    max-width: 100%;
+  }
+
+  :is(.ds-breadcrumb.ds-breadcrumb-nowrap ol) li:last-child {
+    flex: none;
+  }
+
+  :is(.ds-breadcrumb.ds-breadcrumb-nowrap ol):hover li:last-child {
+    flex-shrink: 1;
+  }
+
+  :is(.ds-breadcrumb.ds-breadcrumb-nowrap ol) li:hover {
+    flex-shrink: 0;
+  }
+}
+

package/dist/Checkbox.css

@@ -0,0 +1,13 @@
+@layer components {
+  :is(.ds-checkbox-wrapper .ds-checkbox.ds-checkbox-indeterminate) .ds-checkbox-inner {
+    background-color: var(--ds-color-primary) !important;
+    border-color: var(--ds-color-primary) !important;
+  }
+
+  :is(:is(.ds-checkbox-wrapper .ds-checkbox.ds-checkbox-indeterminate) .ds-checkbox-inner):after {
+    background-color: var(--ds-color-white);
+    border-radius: .125rem;
+    height: .125rem;
+  }
+}
+

package/dist/CodeBlock.css

@@ -0,0 +1,213 @@
+: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;
+  }
+}
+
+@layer components {
+  .ds-code-block {
+    background: var(--ds-color-bg-layout);
+    box-shadow: 0 0 0 1px inset var(--ds-color-split);
+    border-radius: var(--ds-border-radius);
+    font-family: var(--font-mono);
+    padding: 1rem;
+    position: relative;
+  }
+
+  .ds-code-block-header {
+    justify-items: start;
+    margin-bottom: .75rem;
+    display: flex;
+  }
+
+  .ds-code-block-copy {
+    opacity: 0;
+    transition: opacity .2s ease-in-out;
+    position: absolute;
+    top: 1rem;
+    right: .75rem;
+  }
+
+  .ds-code-block:hover .ds-code-block-copy {
+    opacity: 100;
+  }
+
+  .ds-code-block-content {
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    padding-right: 1.5rem;
+    display: flex;
+    overflow: hidden;
+  }
+
+  .ds-code-block-content .ds-scoll-area {
+    max-height: 30rem;
+  }
+}
+
+@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;
+  }
+}
+
+@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;
+  }
+}
+
+@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/CodeBlock.js

@@ -88,24 +88,24 @@ const IconButtonImpl = (props, ref)=>{
 };
 const IconButton = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)(IconButtonImpl);
 "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)
                 })
             })
         ]
@@ -541,7 +541,7 @@ function reactNodeToString(node) {
     return "";
 }
 "use client";
-const CodeBlock = ({ code, children, lang: defaultLang = "tsx", className, options, activeOption: controlledActiveOption, defaultActiveOption = 0, onActiveOptionChange, copyText = "Copy", copySuccessText = "Copied", ...rest })=>{
+const CodeBlock = ({ code, children, lang: defaultLang = "tsx", className, options, activeOption: controlledActiveOption, defaultActiveOption = 0, onActiveOptionChange, copyText = "Copy", copySuccessText = "Copied", classNames, maxHeight, ...rest })=>{
     const [activeOption, setActiveOption] = useControlledState(controlledActiveOption, onActiveOptionChange, defaultActiveOption);
     const [currentCode, setCurrentCode] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(code || "");
     const [lang, setLang] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(defaultLang);
@@ -584,11 +584,11 @@ const CodeBlock = ({ code, children, lang: defaultLang = "tsx", className, optio
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(ThemeProvider, {
         theme: "dark",
         children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(WithAntdTokens, {
-            className: clsx(cls("code-block"), className),
+            className: clsx(cls("code-block"), className, null == classNames ? void 0 : classNames.root),
             ...rest,
             children: [
                 hasOptions && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                    className: cls("code-block-header"),
+                    className: cls("code-block-header", null == classNames ? void 0 : classNames.header),
                     children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Segmented, {
                         value: activeOption,
                         onChange: setActiveOption,
@@ -608,7 +608,10 @@ const CodeBlock = ({ code, children, lang: defaultLang = "tsx", className, optio
                     })
                 }),
                 /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                    className: cls("code-block-content"),
+                    className: cls("code-block-content", null == classNames ? void 0 : classNames.content),
+                    style: {
+                        maxHeight: maxHeight && ("number" == typeof maxHeight ? `${maxHeight}px` : maxHeight)
+                    },
                     children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(ScrollArea, {
                         children: currentCode ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_prism_react_renderer_be33806e__.Highlight, {
                             language: lang,

package/dist/Collapse.css

@@ -0,0 +1,21 @@
+@layer components {
+  .ds-collapse .ds-collapse-header {
+    align-items: center;
+    display: flex;
+  }
+
+  .ds-collapse .ds-collapse-expand-icon {
+    flex-grow: 0;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+  }
+
+  .ds-collapse .ds-collapse-header-text {
+    flex-grow: 1;
+    flex-shrink: 1;
+    min-width: 0;
+  }
+}
+