@sia.soul/sia-react-ui 0.1.6 → 0.1.8

package/dist/core.css

@@ -92,6 +92,11 @@ fieldset:disabled .sia-placeholder-floating > .sia-floating-placeholder {
 .sia-markdown-editor.sia-placeholder-floating [data-placeholder]::before {
   content: none !important;
 }
+.sia-placeholder-floating:focus-within > .sia-floating-placeholder,
+.sia-placeholder-floating--filled > .sia-floating-placeholder,
+.sia-placeholder-floating--active > .sia-floating-placeholder {
+  max-width: calc((100% - 14px) / .85);
+}
 @media (prefers-reduced-motion: reduce) {
   .sia-floating-placeholder {
     transition: none;
@@ -1530,7 +1535,9 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   animation: sia-spin 700ms linear infinite;
 }
 .sia-select__dropdown {
-  width: max(var(--sia-popup-anchor-width), 260px);
+  display: flex;
+  flex-direction: column;
+  width: max-content;
   padding: 4px;
   background: var(--sia-color-surface);
   border: 1px solid var(--sia-color-border);
@@ -1538,6 +1545,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   box-shadow: var(--sia-shadow-popup);
 }
 .sia-select__search {
+  flex-shrink: 0;
   display: flex;
   align-items: center;
   gap: 7px;
@@ -1581,12 +1589,14 @@ fieldset:disabled .sia-input-number__floating-placeholder {
 }
 .sia-select__actions {
   display: flex;
+  flex: 0 0 auto;
   align-items: center;
+  justify-content: flex-end;
   gap: 4px;
-  min-height: 32px;
-  margin-bottom: 4px;
-  padding: 2px 4px 5px;
-  border-bottom: 1px solid var(--sia-color-border);
+  min-height: 36px;
+  margin-top: 4px;
+  padding: 4px;
+  border-top: 1px solid var(--sia-color-border);
 }
 .sia-select__actions button {
   padding: 3px 6px;
@@ -1597,6 +1607,9 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   border-radius: 4px;
   font-size: 12px;
 }
+.sia-select__actions button.sia-button--danger {
+  color: var(--sia-color-error);
+}
 .sia-select__actions button:hover:not(:disabled) {
   background: var(--sia-color-control-hover);
 }
@@ -1605,12 +1618,14 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   cursor: not-allowed;
   opacity: 0.45;
 }
-.sia-select__actions span {
+.sia-select__actions > span {
   margin-left: auto;
   color: var(--sia-color-text-secondary);
   font-size: 11px;
 }
 .sia-select__list {
+  flex: 1 1 auto;
+  min-height: 0;
   position: relative;
   display: block;
   overflow-y: var(--sia-scroll-overflow, auto);
@@ -1637,9 +1652,9 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   background-color: var(--sia-color-control-hover);
 }
 .sia-select__option.is-selected {
-  color: var(--sia-color-primary-text);
+  color: var(--sia-color-primary, #1677ff);
   font-weight: 500;
-  background-color: var(--sia-color-control-active);
+  background-color: var(--sia-color-primary-bg, #eaf4ff);
 }
 .sia-select__option.is-disabled {
   color: var(--sia-color-text-secondary);
@@ -3368,7 +3383,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   z-index: 9;
   top: 0;
   bottom: 0;
-  width: 12px;
+  width: 6px;
   content: "";
   opacity: 0;
   pointer-events: none;
@@ -3379,7 +3394,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   background:
     linear-gradient(
       90deg,
-      color-mix(in srgb, var(--sia-color-text) 10%, transparent),
+      color-mix(in srgb, var(--sia-color-text) 24%, transparent),
       transparent);
 }
 .sia-table__viewport-wrap::after {
@@ -3387,7 +3402,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   background:
     linear-gradient(
       270deg,
-      color-mix(in srgb, var(--sia-color-text) 10%, transparent),
+      color-mix(in srgb, var(--sia-color-text) 24%, transparent),
       transparent);
 }
 .sia-table[data-has-fixed-left=true][data-scrolled-left=true] .sia-table__viewport-wrap::before,
@@ -4120,6 +4135,122 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   border: 1px solid var(--sia-color-border);
   border-radius: 0 0 var(--sia-radius) var(--sia-radius);
 }
+.sia-select-modal__heading {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+.sia-select-modal__heading > .sia-input-control {
+  width: 240px;
+  max-width: 100%;
+}
+.sia-select-modal__heading [role=tablist] {
+  display: flex;
+  gap: 16px;
+}
+.sia-select-modal__heading [role=tab] {
+  border-radius: 0;
+  padding-inline: 0;
+  color: var(--sia-color-text);
+  border-bottom: 2px solid transparent;
+}
+.sia-select-modal__heading [role=tab][aria-selected=true] {
+  color: var(--sia-color-primary);
+  border-bottom-color: var(--sia-color-primary);
+}
+.sia-select-modal__actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+.sia-select-modal .sia-selection-panel {
+  min-height: 160px;
+}
+.sia-select-modal .sia-selection-panel__group {
+  font-size: 16px;
+  color: var(--sia-color-text);
+  padding-left: 12px;
+  border-left: 3px solid var(--sia-color-primary);
+}
+.sia-select-modal__footer {
+  padding-top: 16px;
+  border-top: 1px solid var(--sia-color-border);
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  gap: 16px;
+}
+.sia-select-modal__footer > div {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+.sia-select-modal .sia-selection-panel__option {
+  font-size: 14px;
+}
+.sia-select-modal__actions > .sia-checkbox,
+.sia-select-modal__actions > .sia-button {
+  font-size: 14px;
+}
+.sia-selection-panel__option > .sia-checkbox {
+  width: 100%;
+  min-width: 0;
+  font: inherit;
+  color: inherit;
+}
+.sia-selection-panel__option .sia-checkbox__label {
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.sia-selection-panel__option .sia-checkbox__control {
+  flex-shrink: 0;
+}
+.sia-selection-panel__text {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  justify-items: stretch;
+  min-width: 0;
+  max-width: 100%;
+  text-align: left;
+}
+.sia-select__option-content {
+  min-width: 0;
+  flex: 1;
+}
+.sia-select__option-label,
+.sia-select__option-value {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.sia-select__option-value {
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--sia-color-text-secondary);
+  font-weight: 400;
+}
+.sia-select__option > .sia-icon {
+  flex-shrink: 0;
+}
+.sia-selection-panel__label,
+.sia-selection-panel__text small {
+  display: block;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  text-align: left;
+  text-indent: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 
 /* src/components-extra.css */
 .sia-flex {

package/dist/core.d.cts

@@ -1,4 +1,4 @@
-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-CBtbeAms.cjs';
-export { S as Select, c as SelectOption, d as SelectProps, e as SelectValue } from './Select-GiTHMScg.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-Dwc_30PN.cjs';
+export { S as Select, c as SelectOption, d as SelectProps, e as SelectValue } from './Select-CVvF4mcy.cjs';
 import 'react';
 import './shared-DAYZvZVu.cjs';

package/dist/core.d.ts

@@ -1,4 +1,4 @@
-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-D8BSMfHD.js';
-export { S as Select, c as SelectOption, d as SelectProps, e as SelectValue } from './Select-rtDktLYY.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-ByQQ3hq2.js';
+export { S as Select, c as SelectOption, d as SelectProps, e as SelectValue } from './Select-Ce2Irbpt.js';
 import 'react';
 import './shared-DAYZvZVu.js';

package/dist/core.js

@@ -3,28 +3,26 @@ import {
   Card,
   Collapse,
   FloatButton,
-  Modal,
   Progress,
   Tabs,
   Tag,
   Typography,
   Upload,
   message
-} from "./chunk-S2JAJCLN.js";
+} from "./chunk-FVQON65A.js";
 import "./chunk-WHARTF2I.js";
 import {
+  Modal,
+  Select
+} from "./chunk-JMVCKK34.js";
+import {
+  Icon,
   Input,
   Segmented
-} from "./chunk-IHTODT53.js";
+} from "./chunk-JJVD2ITI.js";
 import {
   Button
 } from "./chunk-MBS2HXLZ.js";
-import {
-  Select
-} from "./chunk-R7BVDN3Q.js";
-import {
-  Icon
-} from "./chunk-EJ23MVR6.js";
 import "./chunk-EJDPRAU2.js";
 export {
   Breadcrumb,