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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/core.css CHANGED
@@ -1530,7 +1530,9 @@ fieldset:disabled .sia-input-number__floating-placeholder {
1530
1530
  animation: sia-spin 700ms linear infinite;
1531
1531
  }
1532
1532
  .sia-select__dropdown {
1533
- width: max(var(--sia-popup-anchor-width), 260px);
1533
+ display: flex;
1534
+ flex-direction: column;
1535
+ width: max-content;
1534
1536
  padding: 4px;
1535
1537
  background: var(--sia-color-surface);
1536
1538
  border: 1px solid var(--sia-color-border);
@@ -1538,6 +1540,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
1538
1540
  box-shadow: var(--sia-shadow-popup);
1539
1541
  }
1540
1542
  .sia-select__search {
1543
+ flex-shrink: 0;
1541
1544
  display: flex;
1542
1545
  align-items: center;
1543
1546
  gap: 7px;
@@ -1581,12 +1584,14 @@ fieldset:disabled .sia-input-number__floating-placeholder {
1581
1584
  }
1582
1585
  .sia-select__actions {
1583
1586
  display: flex;
1587
+ flex: 0 0 auto;
1584
1588
  align-items: center;
1589
+ justify-content: flex-end;
1585
1590
  gap: 4px;
1586
- min-height: 32px;
1587
- margin-bottom: 4px;
1588
- padding: 2px 4px 5px;
1589
- border-bottom: 1px solid var(--sia-color-border);
1591
+ min-height: 36px;
1592
+ margin-top: 4px;
1593
+ padding: 4px;
1594
+ border-top: 1px solid var(--sia-color-border);
1590
1595
  }
1591
1596
  .sia-select__actions button {
1592
1597
  padding: 3px 6px;
@@ -1597,6 +1602,9 @@ fieldset:disabled .sia-input-number__floating-placeholder {
1597
1602
  border-radius: 4px;
1598
1603
  font-size: 12px;
1599
1604
  }
1605
+ .sia-select__actions button.sia-button--danger {
1606
+ color: var(--sia-color-error);
1607
+ }
1600
1608
  .sia-select__actions button:hover:not(:disabled) {
1601
1609
  background: var(--sia-color-control-hover);
1602
1610
  }
@@ -1605,12 +1613,14 @@ fieldset:disabled .sia-input-number__floating-placeholder {
1605
1613
  cursor: not-allowed;
1606
1614
  opacity: 0.45;
1607
1615
  }
1608
- .sia-select__actions span {
1616
+ .sia-select__actions > span {
1609
1617
  margin-left: auto;
1610
1618
  color: var(--sia-color-text-secondary);
1611
1619
  font-size: 11px;
1612
1620
  }
1613
1621
  .sia-select__list {
1622
+ flex: 1 1 auto;
1623
+ min-height: 0;
1614
1624
  position: relative;
1615
1625
  display: block;
1616
1626
  overflow-y: var(--sia-scroll-overflow, auto);
@@ -1637,9 +1647,9 @@ fieldset:disabled .sia-input-number__floating-placeholder {
1637
1647
  background-color: var(--sia-color-control-hover);
1638
1648
  }
1639
1649
  .sia-select__option.is-selected {
1640
- color: var(--sia-color-primary-text);
1650
+ color: var(--sia-color-primary, #1677ff);
1641
1651
  font-weight: 500;
1642
- background-color: var(--sia-color-control-active);
1652
+ background-color: var(--sia-color-primary-bg, #eaf4ff);
1643
1653
  }
1644
1654
  .sia-select__option.is-disabled {
1645
1655
  color: var(--sia-color-text-secondary);
@@ -3368,7 +3378,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
3368
3378
  z-index: 9;
3369
3379
  top: 0;
3370
3380
  bottom: 0;
3371
- width: 12px;
3381
+ width: 6px;
3372
3382
  content: "";
3373
3383
  opacity: 0;
3374
3384
  pointer-events: none;
@@ -3379,7 +3389,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
3379
3389
  background:
3380
3390
  linear-gradient(
3381
3391
  90deg,
3382
- color-mix(in srgb, var(--sia-color-text) 10%, transparent),
3392
+ color-mix(in srgb, var(--sia-color-text) 24%, transparent),
3383
3393
  transparent);
3384
3394
  }
3385
3395
  .sia-table__viewport-wrap::after {
@@ -3387,7 +3397,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
3387
3397
  background:
3388
3398
  linear-gradient(
3389
3399
  270deg,
3390
- color-mix(in srgb, var(--sia-color-text) 10%, transparent),
3400
+ color-mix(in srgb, var(--sia-color-text) 24%, transparent),
3391
3401
  transparent);
3392
3402
  }
3393
3403
  .sia-table[data-has-fixed-left=true][data-scrolled-left=true] .sia-table__viewport-wrap::before,
@@ -4120,6 +4130,122 @@ fieldset:disabled .sia-input-number__floating-placeholder {
4120
4130
  border: 1px solid var(--sia-color-border);
4121
4131
  border-radius: 0 0 var(--sia-radius) var(--sia-radius);
4122
4132
  }
4133
+ .sia-select-modal__heading {
4134
+ display: flex;
4135
+ justify-content: space-between;
4136
+ align-items: center;
4137
+ gap: 16px;
4138
+ margin-bottom: 16px;
4139
+ flex-wrap: wrap;
4140
+ }
4141
+ .sia-select-modal__heading > .sia-input-control {
4142
+ width: 240px;
4143
+ max-width: 100%;
4144
+ }
4145
+ .sia-select-modal__heading [role=tablist] {
4146
+ display: flex;
4147
+ gap: 16px;
4148
+ }
4149
+ .sia-select-modal__heading [role=tab] {
4150
+ border-radius: 0;
4151
+ padding-inline: 0;
4152
+ color: var(--sia-color-text);
4153
+ border-bottom: 2px solid transparent;
4154
+ }
4155
+ .sia-select-modal__heading [role=tab][aria-selected=true] {
4156
+ color: var(--sia-color-primary);
4157
+ border-bottom-color: var(--sia-color-primary);
4158
+ }
4159
+ .sia-select-modal__actions {
4160
+ display: flex;
4161
+ align-items: center;
4162
+ gap: 12px;
4163
+ margin-bottom: 12px;
4164
+ }
4165
+ .sia-select-modal .sia-selection-panel {
4166
+ min-height: 160px;
4167
+ }
4168
+ .sia-select-modal .sia-selection-panel__group {
4169
+ font-size: 16px;
4170
+ color: var(--sia-color-text);
4171
+ padding-left: 12px;
4172
+ border-left: 3px solid var(--sia-color-primary);
4173
+ }
4174
+ .sia-select-modal__footer {
4175
+ padding-top: 16px;
4176
+ border-top: 1px solid var(--sia-color-border);
4177
+ display: flex;
4178
+ width: 100%;
4179
+ justify-content: space-between;
4180
+ gap: 16px;
4181
+ }
4182
+ .sia-select-modal__footer > div {
4183
+ display: flex;
4184
+ gap: 12px;
4185
+ align-items: center;
4186
+ }
4187
+ .sia-select-modal .sia-selection-panel__option {
4188
+ font-size: 14px;
4189
+ }
4190
+ .sia-select-modal__actions > .sia-checkbox,
4191
+ .sia-select-modal__actions > .sia-button {
4192
+ font-size: 14px;
4193
+ }
4194
+ .sia-selection-panel__option > .sia-checkbox {
4195
+ width: 100%;
4196
+ min-width: 0;
4197
+ font: inherit;
4198
+ color: inherit;
4199
+ }
4200
+ .sia-selection-panel__option .sia-checkbox__label {
4201
+ min-width: 0;
4202
+ overflow: hidden;
4203
+ white-space: nowrap;
4204
+ text-overflow: ellipsis;
4205
+ }
4206
+ .sia-selection-panel__option .sia-checkbox__control {
4207
+ flex-shrink: 0;
4208
+ }
4209
+ .sia-selection-panel__text {
4210
+ display: grid;
4211
+ grid-template-columns: minmax(0, 1fr);
4212
+ justify-items: stretch;
4213
+ min-width: 0;
4214
+ max-width: 100%;
4215
+ text-align: left;
4216
+ }
4217
+ .sia-select__option-content {
4218
+ min-width: 0;
4219
+ flex: 1;
4220
+ }
4221
+ .sia-select__option-label,
4222
+ .sia-select__option-value {
4223
+ display: block;
4224
+ overflow: hidden;
4225
+ white-space: nowrap;
4226
+ text-overflow: ellipsis;
4227
+ }
4228
+ .sia-select__option-value {
4229
+ font-size: 12px;
4230
+ line-height: 18px;
4231
+ color: var(--sia-color-text-secondary);
4232
+ font-weight: 400;
4233
+ }
4234
+ .sia-select__option > .sia-icon {
4235
+ flex-shrink: 0;
4236
+ }
4237
+ .sia-selection-panel__label,
4238
+ .sia-selection-panel__text small {
4239
+ display: block;
4240
+ min-width: 0;
4241
+ margin: 0;
4242
+ padding: 0;
4243
+ text-align: left;
4244
+ text-indent: 0;
4245
+ overflow: hidden;
4246
+ white-space: nowrap;
4247
+ text-overflow: ellipsis;
4248
+ }
4123
4249
 
4124
4250
  /* src/components-extra.css */
4125
4251
  .sia-flex {
package/dist/core.d.cts CHANGED
@@ -1,4 +1,4 @@
1
- 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';
2
- export { S as Select, c as SelectOption, d as SelectProps, e as SelectValue } from './Select-GiTHMScg.cjs';
1
+ 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-DrpbQni9.cjs';
2
+ export { S as Select, c as SelectOption, d as SelectProps, e as SelectValue } from './Select-IjA4yqLh.cjs';
3
3
  import 'react';
4
4
  import './shared-DAYZvZVu.cjs';
package/dist/core.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- 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';
2
- export { S as Select, c as SelectOption, d as SelectProps, e as SelectValue } from './Select-rtDktLYY.js';
1
+ 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-CcB8n8uv.js';
2
+ export { S as Select, c as SelectOption, d as SelectProps, e as SelectValue } from './Select-Cl6UXsN5.js';
3
3
  import 'react';
4
4
  import './shared-DAYZvZVu.js';
package/dist/core.js CHANGED
@@ -3,28 +3,26 @@ import {
3
3
  Card,
4
4
  Collapse,
5
5
  FloatButton,
6
- Modal,
7
6
  Progress,
8
7
  Tabs,
9
8
  Tag,
10
9
  Typography,
11
10
  Upload,
12
11
  message
13
- } from "./chunk-S2JAJCLN.js";
12
+ } from "./chunk-6QQRMGW4.js";
14
13
  import "./chunk-WHARTF2I.js";
15
14
  import {
15
+ Modal,
16
+ Select
17
+ } from "./chunk-SMNSQDXN.js";
18
+ import {
19
+ Icon,
16
20
  Input,
17
21
  Segmented
18
- } from "./chunk-IHTODT53.js";
22
+ } from "./chunk-JJVD2ITI.js";
19
23
  import {
20
24
  Button
21
25
  } from "./chunk-MBS2HXLZ.js";
22
- import {
23
- Select
24
- } from "./chunk-R7BVDN3Q.js";
25
- import {
26
- Icon
27
- } from "./chunk-EJ23MVR6.js";
28
26
  import "./chunk-EJDPRAU2.js";
29
27
  export {
30
28
  Breadcrumb,