@sia.soul/sia-react-ui 0.1.13 → 0.1.15

package/dist/index.css

@@ -2,6 +2,9 @@
 .sia-placeholder-floating {
   position: relative;
 }
+.sia-placeholder-floating > .sia-floating-placeholder {
+  font-size: var(--sia-control-font-size, var(--sia-font-size-small));
+}
 .sia-select__trigger.sia-placeholder-floating {
   overflow: visible;
 }
@@ -110,6 +113,252 @@ fieldset:disabled .sia-input-control__floating-placeholder,
 fieldset:disabled .sia-input-number__floating-placeholder {
   background: var(--sia-color-control-hover);
 }
+.sia-picker-range-control__field {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+}
+.sia-picker-range-control__field.sia-placeholder-floating > .is-placeholder {
+  color: transparent;
+}
+.sia-picker-range-control__field > .sia-floating-placeholder {
+  left: -4px;
+  max-width: 100%;
+}
+.sia-picker-range-control__field.sia-placeholder-floating--filled > .sia-floating-placeholder,
+.sia-picker-range-control__field.sia-placeholder-floating--active > .sia-floating-placeholder {
+  max-width: calc(100% / .85);
+}
+.sia-picker--error .sia-picker-range-control__field > .sia-floating-placeholder {
+  color: var(--sia-color-error);
+}
+.sia-picker--warning .sia-picker-range-control__field > .sia-floating-placeholder {
+  color: var(--sia-color-warning);
+}
+.sia-picker.is-disabled .sia-picker-range-control__field > .sia-floating-placeholder {
+  background: var(--sia-color-control-hover);
+}
+
+/* src/control-sizes.css */
+:is(.sia-picker, .sia-time-range).sia-picker--small {
+  --sia-control-font-size: 12px;
+  font-size: 12px;
+}
+:is(.sia-picker, .sia-time-range).sia-picker--medium {
+  --sia-control-font-size: 14px;
+  font-size: 14px;
+}
+:is(.sia-picker, .sia-time-range).sia-picker--large {
+  --sia-control-font-size: 16px;
+  font-size: 16px;
+}
+.sia-picker .sia-picker__trigger {
+  font: inherit;
+}
+:is(.sia-select--small, .sia-tree-select--small, .sia-cascader--small) {
+  --sia-control-font-size: 12px;
+}
+:is(.sia-select--medium, .sia-tree-select--medium, .sia-cascader--medium) {
+  --sia-control-font-size: 14px;
+}
+:is(.sia-select--large, .sia-tree-select--large, .sia-cascader--large) {
+  --sia-control-font-size: 16px;
+}
+.sia-tree-select .sia-tree-select__trigger,
+.sia-cascader .sia-cascader__trigger {
+  font-size: var(--sia-control-font-size, 14px);
+}
+.sia-segmented.sia-segmented--medium button {
+  font-size: 14px;
+}
+.sia-segmented.sia-segmented--large button {
+  font-size: 16px;
+}
+.sia-checkbox.sia-checkbox--small,
+.sia-radio.sia-radio--small {
+  --sia-choice-size: 14px;
+  --sia-choice-dot: 6px;
+  gap: 6px;
+  font-size: 12px;
+}
+.sia-checkbox--medium,
+.sia-radio--medium {
+  --sia-choice-size: 16px;
+  --sia-choice-dot: 8px;
+  font-size: 14px;
+}
+.sia-checkbox.sia-checkbox--large,
+.sia-radio.sia-radio--large {
+  --sia-choice-size: 18px;
+  --sia-choice-dot: 10px;
+  gap: 10px;
+  font-size: 16px;
+}
+.sia-checkbox .sia-checkbox__control,
+.sia-radio .sia-radio__control {
+  width: var(--sia-choice-size);
+  height: var(--sia-choice-size);
+}
+.sia-checkbox--small .sia-checkbox__control {
+  border-radius: 4px;
+}
+.sia-checkbox--small .sia-checkbox__control span {
+  width: 7px;
+  height: 4px;
+}
+.sia-checkbox--large .sia-checkbox__control span {
+  width: 9px;
+  height: 6px;
+}
+.sia-radio .sia-radio__control span {
+  width: var(--sia-choice-dot);
+  height: var(--sia-choice-dot);
+}
+.sia-radio--button.sia-radio--small {
+  height: var(--sia-control-height-small);
+  padding-inline: 9px;
+}
+.sia-radio--button.sia-radio--medium {
+  height: var(--sia-control-height-medium);
+}
+.sia-radio--button.sia-radio--large {
+  height: var(--sia-control-height-large);
+  padding-inline: 19px;
+}
+.sia-switch-wrap.sia-switch-wrap--small {
+  --sia-switch-width: 32px;
+  --sia-switch-height: 16px;
+  --sia-switch-segmented-height: var(--sia-control-height-small);
+  font-size: 12px;
+}
+.sia-switch-wrap.sia-switch-wrap--medium {
+  --sia-switch-width: 44px;
+  --sia-switch-height: 22px;
+  --sia-switch-segmented-height: var(--sia-control-height-medium);
+  font-size: 14px;
+}
+.sia-switch-wrap.sia-switch-wrap--large {
+  --sia-switch-width: 52px;
+  --sia-switch-height: 28px;
+  --sia-switch-segmented-height: var(--sia-control-height-large);
+  font-size: 16px;
+}
+.sia-switch-wrap.sia-switch-wrap--small {
+  gap: 6px;
+}
+.sia-switch-wrap.sia-switch-wrap--large {
+  gap: 10px;
+}
+.sia-select--small .sia-select__tag {
+  padding-block: 0;
+  line-height: 16px;
+}
+.sia-cascader--small .sia-cascader__tag {
+  padding-block: 0;
+  line-height: 16px;
+}
+.sia-input-select .sia-input-control--small .sia-button {
+  height: 18px;
+}
+.sia-textarea-control--small .sia-textarea {
+  padding: 4px 7px 22px;
+  font-size: 12px;
+}
+.sia-textarea-control--large .sia-textarea {
+  padding: 10px 11px 28px;
+  font-size: 16px;
+}
+.sia-color-picker--small {
+  --sia-color-control-height: var(--sia-control-height-small);
+  font-size: 12px;
+}
+.sia-color-picker--medium {
+  --sia-color-control-height: var(--sia-control-height-medium);
+  font-size: 14px;
+}
+.sia-color-picker--large {
+  --sia-color-control-height: var(--sia-control-height-large);
+  font-size: 16px;
+}
+.sia-color-picker .sia-color-picker__trigger {
+  height: var(--sia-color-control-height);
+  min-height: 0;
+  padding: 3px;
+  font-size: inherit;
+}
+.sia-color-picker__trigger .sia-color-picker__swatch {
+  width: calc(var(--sia-color-control-height) - 8px);
+  height: calc(var(--sia-color-control-height) - 8px);
+  border-radius: 3px;
+}
+.sia-segmented.sia-segmented--small {
+  padding: 2px;
+}
+.sia-segmented.sia-segmented--medium {
+  padding: 2px;
+}
+.sia-segmented.sia-segmented--large {
+  padding: 2px;
+}
+.sia-segmented.sia-segmented--small button {
+  height: calc(var(--sia-control-height-small) - 4px);
+  min-height: 0;
+  padding-block: 0;
+}
+.sia-segmented.sia-segmented--medium button {
+  height: calc(var(--sia-control-height-medium) - 4px);
+  min-height: 0;
+  padding-block: 0;
+}
+.sia-segmented.sia-segmented--large button {
+  height: calc(var(--sia-control-height-large) - 4px);
+  min-height: 0;
+  padding-block: 0;
+}
+.sia-form--small > fieldset > .sia-form-item > .sia-form-item__label {
+  padding-top: 1px;
+}
+.sia-form--medium > fieldset > .sia-form-item > .sia-form-item__label {
+  padding-top: 5px;
+}
+.sia-form--large > fieldset > .sia-form-item > .sia-form-item__label {
+  padding-top: 9px;
+}
+.sia-form.sia-form--vertical > fieldset > .sia-form-item > .sia-form-item__label {
+  padding-top: 0;
+}
+.sia-rate--small .sia-rate__item button {
+  font-size: 15px;
+}
+.sia-rate--medium .sia-rate__item button {
+  font-size: 20px;
+}
+.sia-rate--large .sia-rate__item button {
+  font-size: 25px;
+}
+.sia-pagination .sia-pagination__size-select .sia-select__trigger {
+  min-height: 0;
+}
+.sia-pagination--small {
+  font-size: 12px;
+}
+.sia-pagination--medium {
+  font-size: 14px;
+}
+.sia-pagination--large {
+  font-size: 16px;
+}
+.sia-pagination--small .sia-pagination__buttons .sia-button {
+  width: 22px;
+  min-width: 22px;
+}
+.sia-pagination--large .sia-pagination__buttons .sia-button {
+  width: 38px;
+  min-width: 38px;
+}
 
 /* src/styles.css */
 :root,
@@ -134,7 +383,10 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   --sia-color-warning: #faad14;
   --sia-color-error: #ff4d4f;
   --sia-radius: 6px;
-  --sia-control-height: 32px;
+  --sia-control-height-small: 22px;
+  --sia-control-height-medium: 30px;
+  --sia-control-height-large: 38px;
+  --sia-control-height: var(--sia-control-height-medium);
   --sia-spacing: 16px;
   --sia-font-size: 16px;
   --sia-font-size-small: 14px;
@@ -445,12 +697,12 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   border-color: #d9363e;
 }
 .sia-button--small {
-  height: 24px;
+  height: var(--sia-control-height-small);
   padding-inline: 9px;
   font-size: 12px;
 }
 .sia-button--large {
-  height: 40px;
+  height: var(--sia-control-height-large);
   padding-inline: 19px;
   font-size: var(--sia-font-size);
 }
@@ -509,11 +761,11 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   border-color: var(--sia-color-primary);
 }
 .sia-input-control--small {
-  height: 24px;
+  height: var(--sia-control-height-small);
   padding-inline: 7px;
 }
 .sia-input-control--large {
-  height: 40px;
+  height: var(--sia-control-height-large);
   padding-inline: 11px;
 }
 .sia-input-control--warning {
@@ -1242,10 +1494,10 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   border-color: var(--sia-color-primary);
 }
 .sia-input-number--small {
-  height: 24px;
+  height: var(--sia-control-height-small);
 }
 .sia-input-number--large {
-  height: 40px;
+  height: var(--sia-control-height-large);
 }
 .sia-input-number--warning {
   border-color: var(--sia-color-warning);
@@ -1395,12 +1647,12 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   border-color: var(--sia-color-primary);
 }
 .sia-select--small > .sia-select__trigger {
-  height: 24px;
+  height: var(--sia-control-height-small);
   padding-inline: 7px;
   font-size: 12px;
 }
 .sia-select--large > .sia-select__trigger {
-  height: 40px;
+  height: var(--sia-control-height-large);
   padding-inline: 11px;
   font-size: var(--sia-font-size);
 }
@@ -1483,9 +1735,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   color: var(--sia-color-text-secondary);
 }
 .sia-select--multiple .sia-select__trigger {
-  min-height: var(--sia-control-height);
-  height: auto;
-  padding-block: 3px;
+  padding-block: 0;
 }
 .sia-select__clear {
   position: absolute;
@@ -1701,8 +1951,8 @@ fieldset:disabled .sia-input-number__floating-placeholder {
 .sia-switch--standard {
   display: inline-grid;
   place-items: center;
-  width: 44px;
-  height: 24px;
+  width: var(--sia-switch-width, 44px);
+  height: var(--sia-switch-height, 22px);
   color: #fff;
   background-color: #8c8c8c;
 }
@@ -1711,8 +1961,8 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   z-index: 1;
   top: 2px;
   left: 2px;
-  width: 20px;
-  height: 20px;
+  width: calc(var(--sia-switch-height, 22px) - 4px);
+  height: calc(var(--sia-switch-height, 22px) - 4px);
   background-color: #fff;
   border-radius: 999px;
   box-shadow: 0 1px 2px rgb(0 0 0 / 35%);
@@ -1722,15 +1972,15 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   background-color: var(--sia-color-primary);
 }
 .sia-switch-input:checked + .sia-switch--standard .sia-switch__thumb {
-  left: calc(100% - 22px);
+  left: calc(100% - var(--sia-switch-height, 22px) + 2px);
 }
 .sia-switch--with-content {
   width: auto;
-  min-width: 58px;
-  padding: 0 8px 0 26px;
+  min-width: calc(var(--sia-switch-width, 44px) + 14px);
+  padding: 0 8px 0 calc(var(--sia-switch-height, 22px) + 2px);
 }
 .sia-switch-input:checked + .sia-switch--with-content {
-  padding-right: 26px;
+  padding-right: calc(var(--sia-switch-height, 22px) + 2px);
   padding-left: 8px;
 }
 .sia-switch__content {
@@ -1760,7 +2010,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   grid-template-columns: repeat(2, minmax(34px, 1fr));
   width: max-content;
   min-width: 74px;
-  height: 36px;
+  height: var(--sia-switch-segmented-height, 30px);
   padding: 2px;
   color: var(--sia-color-text-secondary);
   background-color: var(--sia-color-surface);
@@ -1771,7 +2021,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   top: 2px;
   left: 2px;
   width: calc(50% - 3px);
-  height: 30px;
+  height: calc(var(--sia-switch-segmented-height, 30px) - 6px);
   background-color: var(--sia-color-primary);
   box-shadow: 0 1px 3px rgb(22 119 255 / 40%);
 }
@@ -1785,7 +2035,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   align-items: center;
   justify-content: center;
   min-width: 34px;
-  height: 30px;
+  height: calc(var(--sia-switch-segmented-height, 30px) - 6px);
   padding-inline: 9px;
   white-space: nowrap;
   transition: color 160ms ease;
@@ -4459,6 +4709,165 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+.sia-table-settings__item {
+  position: relative;
+  touch-action: none;
+}
+.sia-table-settings__list.is-sorting .sia-table-settings__item {
+  transition: transform 180ms ease;
+  user-select: none;
+}
+.sia-table-settings__list.is-sorting .sia-table-settings__item.is-dragging {
+  z-index: 2;
+  transition: none;
+  opacity: 1;
+  box-shadow: 0 4px 10px -3px rgb(0 0 0 / 25%);
+  cursor: grabbing;
+}
+@media (prefers-reduced-motion: reduce) {
+  .sia-table-settings__list.is-sorting .sia-table-settings__item {
+    transition: none;
+  }
+}
+.sia-query-form {
+  min-width: 0;
+  width: 100%;
+}
+.sia-query-form__fields {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+  padding-top: 8px;
+}
+.sia-query-form__field {
+  flex: 0 1 var(--sia-query-field-width, 220px);
+  width: var(--sia-query-field-width, 220px);
+  min-width: 0;
+  max-width: 100%;
+}
+.sia-query-form__field[hidden] {
+  display: none;
+}
+.sia-query-form__field > .sia-input-control,
+.sia-query-form__field > .sia-select,
+.sia-query-form__field > .sia-picker,
+.sia-query-form__field > .sia-input-number,
+.sia-query-form__field > .sia-cascader,
+.sia-query-form__field > .sia-tree-select,
+.sia-query-form__field > .sia-select-date-range {
+  width: 100%;
+}
+.sia-query-form__field > .sia-space-compact {
+  width: 100%;
+}
+.sia-query-form__field > .sia-space-compact > .sia-select {
+  flex: 1;
+  min-width: 0;
+  width: 0;
+}
+.sia-query-form__actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.sia-query-form__quick,
+.sia-query-form__saved {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+.sia-query-form__quick {
+  margin-bottom: 8px;
+}
+.sia-query-form__saved {
+  margin-top: 10px;
+}
+.sia-query-form__saved > .sia-tag {
+  cursor: pointer;
+}
+.sia-query-form__saved > .sia-tag.is-active {
+  outline: 1px solid currentColor;
+}
+.sia-query-form__saved > .sia-tag:focus-visible {
+  outline: 2px solid var(--sia-color-primary);
+  outline-offset: 2px;
+}
+.sia-query-form__saved > .sia-tag--disabled {
+  cursor: not-allowed;
+}
+.sia-query-form__error {
+  margin: 8px 0 0;
+  color: var(--sia-color-error);
+  font-size: 13px;
+}
+@media (max-width: 600px) {
+  .sia-query-form__field {
+    flex-basis: 100% !important;
+    width: 100% !important;
+  }
+  .sia-query-form__actions {
+    width: 100%;
+  }
+}
+.sia-query-form__fields.is-collapsed {
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  padding-bottom: 2px;
+}
+.sia-query-form__fields.is-collapsed > .sia-query-form__field {
+  flex: 0 0 auto;
+}
+.sia-query-form__fields.is-collapsed > .sia-query-form__actions {
+  flex: 0 0 auto;
+  flex-wrap: nowrap;
+  width: max-content;
+}
+@media (max-width: 600px) {
+  .sia-query-form__fields.is-collapsed > .sia-query-form__field {
+    flex-basis: auto !important;
+    width: var(--sia-query-field-width, 220px) !important;
+  }
+}
+.sia-query-form__quick > .sia-badge:has(.sia-badge__count) {
+  margin: 5px 12px 2px 0;
+}
+.sia-tag--close-on-hover > .sia-tag__close {
+  flex-shrink: 0;
+  width: 0;
+  margin-left: -4px;
+  margin-right: 0;
+  overflow: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    width 180ms ease,
+    margin 180ms ease,
+    opacity 180ms ease;
+}
+.sia-tag--close-on-hover:not(.sia-tag--disabled):is(:hover, :focus-within) > .sia-tag__close {
+  width: 16px;
+  margin-left: 0;
+  margin-right: -4px;
+  opacity: 1;
+  pointer-events: auto;
+}
+@media (hover: none) {
+  .sia-tag--close-on-hover:not(.sia-tag--disabled) > .sia-tag__close {
+    width: 16px;
+    margin-left: 0;
+    margin-right: -4px;
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .sia-tag--close-on-hover > .sia-tag__close {
+    transition: none;
+  }
+}
 
 /* src/components-extra.css */
 .sia-flex {
@@ -5056,7 +5465,8 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   gap: 0;
 }
 .sia-radio--button {
-  min-height: 36px;
+  height: var(--sia-control-height);
+  min-height: 0;
   margin-left: -1px;
   padding: 0 14px;
   background: var(--sia-color-surface);
@@ -5629,12 +6039,12 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   border-color: var(--sia-color-primary);
 }
 .sia-picker--small {
-  height: 24px;
-  min-height: 24px;
+  height: var(--sia-control-height-small);
+  min-height: var(--sia-control-height-small);
 }
 .sia-picker--large {
-  height: 40px;
-  min-height: 40px;
+  height: var(--sia-control-height-large);
+  min-height: var(--sia-control-height-large);
 }
 .sia-picker--warning {
   border-color: var(--sia-color-warning);
@@ -5806,11 +6216,11 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   border-color: var(--sia-color-primary);
 }
 .sia-time-range.sia-picker--small {
-  height: 24px;
+  height: var(--sia-control-height-small);
   font-size: 12px;
 }
 .sia-time-range.sia-picker--large {
-  height: 40px;
+  height: var(--sia-control-height-large);
 }
 .sia-time-range.sia-picker--warning {
   border-color: var(--sia-color-warning);
@@ -5847,7 +6257,8 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   color: var(--sia-color-text-secondary);
 }
 .sia-picker-range-control {
-  width: 420px;
+  width: min(420px, 100%);
+  min-width: 0;
 }
 .sia-picker-range-control__value {
   flex: 1;
@@ -5871,10 +6282,10 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   vertical-align: middle;
 }
 .sia-select-date-range--small {
-  --sia-select-date-range-height: 24px;
+  --sia-select-date-range-height: var(--sia-control-height-small);
 }
 .sia-select-date-range--large {
-  --sia-select-date-range-height: 40px;
+  --sia-select-date-range-height: var(--sia-control-height-large);
 }
 .sia-select-date-range__select {
   flex: 0 0 var(--sia-select-date-range-select-width, 180px);
@@ -6261,8 +6672,9 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   align-items: center;
   gap: 8px;
   width: 100%;
-  min-height: 36px;
-  padding: 5px 10px;
+  height: var(--sia-control-height);
+  min-height: 0;
+  padding: 0 10px;
   color: inherit;
   cursor: pointer;
   background: var(--sia-color-surface);
@@ -6278,10 +6690,16 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   border-color: var(--sia-color-primary);
 }
 .sia-tree-select--small .sia-tree-select__trigger {
-  min-height: 30px;
+  height: var(--sia-control-height-small);
+  font-size: 12px;
 }
 .sia-tree-select--large .sia-tree-select__trigger {
-  min-height: 42px;
+  height: var(--sia-control-height-large);
+  font-size: 16px;
+}
+.sia-tree-select--small .sia-tree-select__tag {
+  padding-block: 0;
+  line-height: 16px;
 }
 .sia-tree-select--warning .sia-tree-select__trigger {
   border-color: var(--sia-color-warning);
@@ -6502,7 +6920,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   display: grid;
   grid-template-columns: minmax(90px, 140px) minmax(0, 1fr);
   gap: 8px 14px;
-  margin-bottom: 18px;
+  margin-bottom: 0;
   color: var(--sia-color-text);
 }
 .sia-form-item__label {
@@ -7420,8 +7838,9 @@ button.sia-pagination__total:disabled {
   align-items: center;
   gap: 8px;
   width: 100%;
-  min-height: 36px;
-  padding: 5px 10px;
+  height: var(--sia-control-height);
+  min-height: 0;
+  padding: 0 10px;
   color: inherit;
   cursor: pointer;
   background: var(--sia-color-surface);
@@ -7433,6 +7852,14 @@ button.sia-pagination__total:disabled {
 .sia-cascader.is-open .sia-cascader__trigger {
   border-color: var(--sia-color-primary);
 }
+.sia-cascader--small .sia-cascader__trigger {
+  height: var(--sia-control-height-small);
+  font-size: 12px;
+}
+.sia-cascader--large .sia-cascader__trigger {
+  height: var(--sia-control-height-large);
+  font-size: 16px;
+}
 .sia-cascader.is-open .sia-cascader__trigger {
   border-color: var(--sia-color-primary);
 }