@sia.soul/sia-react-ui 0.1.0 → 0.1.3

package/dist/core.css

@@ -63,6 +63,18 @@
   width: 0;
   height: 0;
 }
+.sia-scrollbar-track {
+  --sia-scrollbar-size: 3px;
+}
+.sia-scrollbar-track:hover,
+.sia-scrollbar-track:has(> :active) {
+  --sia-scrollbar-size: 6px;
+}
+@media (prefers-reduced-motion: reduce) {
+  .sia-scrollbar-track > * {
+    transition: none !important;
+  }
+}
 .sia-floating-scrollbar-layer {
   position: fixed;
   z-index: 2147483646;
@@ -100,14 +112,16 @@
   background: var(--sia-scrollbar-thumb-hover);
 }
 .sia-floating-scrollbar--horizontal .sia-floating-scrollbar__thumb {
-  top: 2px;
+  bottom: 0;
   left: 0;
-  height: 6px;
+  height: var(--sia-scrollbar-size);
+  transition: background-color 120ms ease, height 150ms ease;
 }
 .sia-floating-scrollbar--vertical .sia-floating-scrollbar__thumb {
   top: 0;
-  left: 2px;
-  width: 6px;
+  right: 0;
+  width: var(--sia-scrollbar-size);
+  transition: background-color 120ms ease, width 150ms ease;
 }
 .sia-button,
 .sia-input,
@@ -3232,18 +3246,20 @@
   background: rgb(64 64 64 / 82%);
 }
 .sia-table__scrollbar--horizontal .sia-table__scrollbar-thumb {
-  top: 2px;
+  bottom: 0;
   left: 0;
   width: var(--sia-table-scrollbar-x-size, 0);
-  height: 6px;
+  height: var(--sia-scrollbar-size);
   transform: translateX(var(--sia-table-scrollbar-x-position, 0));
+  transition: background-color 120ms ease, height 150ms ease;
 }
 .sia-table__scrollbar--vertical .sia-table__scrollbar-thumb {
   top: 0;
-  left: 2px;
-  width: 6px;
+  right: 0;
+  width: var(--sia-scrollbar-size);
   height: var(--sia-table-scrollbar-y-size, 0);
   transform: translateY(var(--sia-table-scrollbar-y-position, 0));
+  transition: background-color 120ms ease, width 150ms ease;
 }
 .sia-table__empty {
   position: absolute;
@@ -3915,6 +3931,17 @@
 .sia-space-compact--vertical > *:not(:first-child) {
   margin-top: -1px;
 }
+.sia-space-compact--horizontal > *:not(:first-child) :is(.sia-input, .sia-input-control, .sia-select, .sia-tree-select__trigger, .sia-picker, .sia-input-number) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.sia-space-compact--horizontal > *:not(:last-child) :is(.sia-input, .sia-input-control, .sia-select, .sia-tree-select__trigger, .sia-picker, .sia-input-number) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.sia-space-compact > *:focus-within {
+  z-index: 1;
+}
 .sia-row {
   --sia-grid-gutter-x: 0px;
   --sia-grid-gutter-y: 0px;
@@ -5674,10 +5701,20 @@
   font-size: 12px;
 }
 .sia-tree-select__clear {
+  position: absolute;
+  right: 30px;
+  top: 50%;
+  transform: translateY(-50%);
   display: none;
+  align-items: center;
+  padding: 2px;
+  border: 0;
+  background: var(--sia-color-surface);
   color: var(--sia-color-text-secondary);
+  cursor: pointer;
 }
-.sia-tree-select__trigger:hover .sia-tree-select__clear {
+.sia-tree-select:hover .sia-tree-select__clear,
+.sia-tree-select:focus-within .sia-tree-select__clear {
   display: inline-flex;
 }
 .sia-tree-select__dropdown {
@@ -6124,7 +6161,7 @@
   border-radius: 2px 2px 0 0;
 }
 .sia-menu__popup {
-  min-width: 180px;
+  width: max-content;
   padding: 4px;
   color: var(--sia-color-text);
   background: var(--sia-color-surface);
@@ -6279,7 +6316,7 @@
   pointer-events: none;
 }
 .sia-dropdown__popup {
-  min-width: 180px;
+  width: max-content;
   padding: 4px;
   color: var(--sia-color-text);
   background: var(--sia-color-surface);
@@ -6299,7 +6336,7 @@
   animation: sia-dropdown-popup-out 150ms cubic-bezier(.4, 0, 1, 1) both;
 }
 .sia-dropdown__menu {
-  min-width: 180px;
+  min-width: 0;
   padding: 0;
   background: transparent;
   border: 0;
@@ -8382,6 +8419,115 @@ button.sia-treemap__tile:focus-visible,
     transition-duration: .01ms;
   }
 }
+.sia-input-select {
+  min-width: 0;
+}
+.sia-input-select__suffix,
+.sia-selection-panel__actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.sia-input-select__suffix .sia-button {
+  padding: 0 3px;
+  min-width: 18px;
+}
+.sia-input-select__popup {
+  z-index: 1100;
+  width: max(240px, var(--sia-popup-anchor-width));
+  max-width: calc(100vw - 24px);
+  padding: 8px;
+  background: var(--sia-color-bg, white);
+  border: 1px solid var(--sia-color-border, #ddd);
+  border-radius: 6px;
+  box-shadow: 0 6px 24px #0002;
+}
+.sia-selection-panel {
+  min-width: 0;
+  display: grid;
+  gap: 8px;
+}
+.sia-selection-panel__actions {
+  margin-bottom: 4px;
+  flex-wrap: wrap;
+  font-size: 12px;
+}
+.sia-selection-panel__actions > span {
+  margin-left: auto;
+  color: var(--sia-color-text-secondary, #777);
+}
+.sia-selection-panel__list {
+  overflow: auto;
+  outline-offset: 1px;
+}
+.sia-selection-panel__row {
+  display: grid;
+  gap: 4px;
+}
+.sia-selection-panel__group {
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--sia-color-text-secondary, #777);
+  padding: 0 6px;
+}
+.sia-selection-panel__option {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  border: 0;
+  background: transparent;
+  border-radius: 4px;
+  padding: 4px 8px;
+  text-align: left;
+  color: inherit;
+  cursor: pointer;
+  min-width: 0;
+  font: inherit;
+}
+.sia-selection-panel__option:hover,
+.sia-selection-panel__option.is-active {
+  background: var(--sia-color-fill-secondary, #f2f5f8);
+}
+.sia-selection-panel__option[aria-selected=true] {
+  background: var(--sia-color-primary-bg, #eaf4ff);
+  color: var(--sia-color-primary, #1677ff);
+}
+.sia-selection-panel__option[aria-disabled=true] {
+  opacity: .45;
+  cursor: not-allowed;
+}
+.sia-selection-panel__check {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  border: 1px solid currentColor;
+  border-radius: 3px;
+  line-height: 12px;
+  text-align: center;
+}
+.sia-selection-panel__text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.sia-selection-panel__text small {
+  display: block;
+  opacity: .65;
+  font-size: 11px;
+}
+.sia-selection-panel__divider {
+  align-self: center;
+  border-top: 1px solid var(--sia-color-border, #ddd);
+}
+.sia-selection-panel__empty {
+  padding: 16px;
+  text-align: center;
+  color: var(--sia-color-text-secondary, #777);
+}
 
 /* src/breadcrumb.css */
 .sia-breadcrumb {

package/dist/core.d.cts

@@ -1,3 +1,3 @@
-export { e as Breadcrumb, f as BreadcrumbItem, g as BreadcrumbProps, h as Button, i as ButtonProps, j as ButtonSize, k as ButtonVariant, m as Card, n as CardAccent, o as CardProps, s as Collapse, t as CollapseItem, u as CollapseKey, v as CollapseProps, G as FilledIconName, H as FloatButton, I as FloatButtonBackTopProps, J as FloatButtonGroupProps, K as FloatButtonProps, L as FloatButtonShape, Q as Icon, R as IconName, S as IconProps, T as IconVariant, Z as Input, _ as InputProps, a5 as MessageConfig, a6 as MessageHandle, a7 as MessageKey, a8 as MessageType, a9 as Modal, aa as ModalActionResult, ab as ModalOpenConfig, ac as ModalProps, ad as ModalType, a as OverlayApiHandle, al as Progress, am as ProgressProps, an as ProgressStatus, aq as Segmented, ar as SegmentedOption, as as SegmentedProps, at as SegmentedValue, aA as TabItem, aB as Tabs, aD as TabsOrientation, aE as TabsPosition, aF as TabsProps, aG as TabsType, aH as Tag, aI as TagProps, aJ as TagStatus, aK as TagVariant, aY as Typography, aZ as TypographyLinkProps, a_ as TypographyProps, a$ as TypographyTitleProps, b0 as TypographyType, b1 as Upload, b2 as UploadChangeInfo, b3 as UploadDraggerProps, b4 as UploadFile, b5 as UploadFileStatus, b6 as UploadProps, b7 as UploadRequestOptions, bb as message } from './core-DRICIs2n.cjs';
+export { e as Breadcrumb, f as BreadcrumbItem, g as BreadcrumbProps, h as Button, i as ButtonProps, j as ButtonSize, k as ButtonVariant, m as Card, n as CardAccent, o as CardProps, s as Collapse, t as CollapseItem, u as CollapseKey, v as CollapseProps, G as FilledIconName, H as FloatButton, I as FloatButtonBackTopProps, J as FloatButtonGroupProps, K as FloatButtonProps, L as FloatButtonShape, Q as Icon, R as IconName, S as IconProps, T as IconVariant, Z as Input, _ as InputProps, a5 as MessageConfig, a6 as MessageHandle, a7 as MessageKey, a8 as MessageType, a9 as Modal, aa as ModalActionResult, ab as ModalOpenConfig, ac as ModalProps, ad as ModalType, a as OverlayApiHandle, al as Progress, am as ProgressProps, an as ProgressStatus, aq as Segmented, ar as SegmentedOption, as as SegmentedProps, at as SegmentedValue, aA as TabItem, aB as Tabs, aD as TabsOrientation, aE as TabsPosition, aF as TabsProps, aG as TabsType, aH as Tag, aI as TagProps, aJ as TagStatus, aK as TagVariant, aY as Typography, aZ as TypographyLinkProps, a_ as TypographyProps, a$ as TypographyTitleProps, b0 as TypographyType, b1 as Upload, b2 as UploadChangeInfo, b3 as UploadDraggerProps, b4 as UploadFile, b5 as UploadFileStatus, b6 as UploadProps, b7 as UploadRequestOptions, bb as message } from './core-De2pRX5w.cjs';
 export { S as Select, d as SelectOption, e as SelectProps, f as SelectValue } from './Select-CJJ5LQap.cjs';
 import 'react';

package/dist/core.d.ts

@@ -1,3 +1,3 @@
-export { e as Breadcrumb, f as BreadcrumbItem, g as BreadcrumbProps, h as Button, i as ButtonProps, j as ButtonSize, k as ButtonVariant, m as Card, n as CardAccent, o as CardProps, s as Collapse, t as CollapseItem, u as CollapseKey, v as CollapseProps, G as FilledIconName, H as FloatButton, I as FloatButtonBackTopProps, J as FloatButtonGroupProps, K as FloatButtonProps, L as FloatButtonShape, Q as Icon, R as IconName, S as IconProps, T as IconVariant, Z as Input, _ as InputProps, a5 as MessageConfig, a6 as MessageHandle, a7 as MessageKey, a8 as MessageType, a9 as Modal, aa as ModalActionResult, ab as ModalOpenConfig, ac as ModalProps, ad as ModalType, a as OverlayApiHandle, al as Progress, am as ProgressProps, an as ProgressStatus, aq as Segmented, ar as SegmentedOption, as as SegmentedProps, at as SegmentedValue, aA as TabItem, aB as Tabs, aD as TabsOrientation, aE as TabsPosition, aF as TabsProps, aG as TabsType, aH as Tag, aI as TagProps, aJ as TagStatus, aK as TagVariant, aY as Typography, aZ as TypographyLinkProps, a_ as TypographyProps, a$ as TypographyTitleProps, b0 as TypographyType, b1 as Upload, b2 as UploadChangeInfo, b3 as UploadDraggerProps, b4 as UploadFile, b5 as UploadFileStatus, b6 as UploadProps, b7 as UploadRequestOptions, bb as message } from './core-BeiAQiDY.js';
+export { e as Breadcrumb, f as BreadcrumbItem, g as BreadcrumbProps, h as Button, i as ButtonProps, j as ButtonSize, k as ButtonVariant, m as Card, n as CardAccent, o as CardProps, s as Collapse, t as CollapseItem, u as CollapseKey, v as CollapseProps, G as FilledIconName, H as FloatButton, I as FloatButtonBackTopProps, J as FloatButtonGroupProps, K as FloatButtonProps, L as FloatButtonShape, Q as Icon, R as IconName, S as IconProps, T as IconVariant, Z as Input, _ as InputProps, a5 as MessageConfig, a6 as MessageHandle, a7 as MessageKey, a8 as MessageType, a9 as Modal, aa as ModalActionResult, ab as ModalOpenConfig, ac as ModalProps, ad as ModalType, a as OverlayApiHandle, al as Progress, am as ProgressProps, an as ProgressStatus, aq as Segmented, ar as SegmentedOption, as as SegmentedProps, at as SegmentedValue, aA as TabItem, aB as Tabs, aD as TabsOrientation, aE as TabsPosition, aF as TabsProps, aG as TabsType, aH as Tag, aI as TagProps, aJ as TagStatus, aK as TagVariant, aY as Typography, aZ as TypographyLinkProps, a_ as TypographyProps, a$ as TypographyTitleProps, b0 as TypographyType, b1 as Upload, b2 as UploadChangeInfo, b3 as UploadDraggerProps, b4 as UploadFile, b5 as UploadFileStatus, b6 as UploadProps, b7 as UploadRequestOptions, bb as message } from './core-DFYheaoJ.js';
 export { S as Select, d as SelectOption, e as SelectProps, f as SelectValue } from './Select-CJJ5LQap.js';
 import 'react';

package/dist/core.js

@@ -10,21 +10,21 @@ import {
   Typography,
   Upload,
   message
-} from "./chunk-ULEGTKXR.js";
+} from "./chunk-Q4XNFMUH.js";
 import "./chunk-NZAT2RUM.js";
 import {
   Input,
   Segmented
-} from "./chunk-DZ45HRVP.js";
+} from "./chunk-IMZT6VCU.js";
 import {
   Button
 } from "./chunk-MBS2HXLZ.js";
 import {
   Select
-} from "./chunk-JKZGAZMB.js";
+} from "./chunk-OAC7BSUR.js";
 import {
   Icon
-} from "./chunk-YCVXUMGP.js";
+} from "./chunk-2RRTDU3N.js";
 export {
   Breadcrumb,
   Button,