@sia.soul/sia-react-ui 0.1.34 → 0.1.36

package/dist/core.css

@@ -3219,7 +3219,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
 }
 .sia-tabs--tech-line > .sia-tabs__header {
   min-height: 50px;
-  padding: 0 28px;
+  padding: 0 12px;
   background: var(--sia-tabs-line-surface);
   gap: 28px;
 }
@@ -3377,7 +3377,6 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   .sia-tabs--tech-line.sia-tabs--horizontal > .sia-tabs__header {
     flex-wrap: wrap;
     gap: 0;
-    padding-inline: 16px;
   }
   .sia-tabs--tech-line.sia-tabs--horizontal > .sia-tabs__header .sia-tabs__title {
     flex-basis: 100%;
@@ -7120,16 +7119,24 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   grid-column: 2 / -1;
   font-size: 12px;
 }
-.sia-upload__item > .sia-upload__remove {
+.sia-upload__actions {
+  display: inline-flex;
   grid-column: 3;
   grid-row: 1;
-  width: 28px;
-  height: 28px;
+  align-items: center;
+  gap: 2px;
+  flex: 0 0 auto;
+}
+.sia-upload__actions > .sia-button {
+  width: 26px;
+  height: 26px;
+  min-width: 0;
+  padding: 0;
 }
 .sia-upload__item--error {
   border-color: var(--sia-color-error);
 }
-.sia-upload__item--error > .sia-upload__remove {
+.sia-upload__item--error .sia-upload__remove {
   color: var(--sia-color-error);
 }
 .sia-upload__thumbnail.sia-button {
@@ -7178,8 +7185,8 @@ fieldset:disabled .sia-input-number__floating-placeholder {
 .sia-upload--picture-card .sia-upload__item,
 .sia-upload--picture-card .sia-upload__choose {
   box-sizing: border-box;
-  width: 112px;
-  height: 112px;
+  width: var(--sia-upload-card-width, 112px);
+  height: var(--sia-upload-card-height, 112px);
   border: 1px solid var(--sia-color-border);
   border-radius: 9px;
 }
@@ -7189,7 +7196,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   justify-content: center;
   padding: 8px;
   gap: 4px;
-  overflow: hidden;
+  overflow: visible;
 }
 .sia-upload--picture-card .sia-upload__choose {
   display: flex;
@@ -7209,6 +7216,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   height: 70px;
   min-height: 0;
   flex: 1 1 auto;
+  overflow: hidden;
 }
 .sia-upload--picture-card .sia-upload__name {
   display: block;
@@ -7217,18 +7225,50 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   font-size: 12px;
   flex: 0 0 auto;
 }
-.sia-upload--picture-card .sia-upload__remove {
+.sia-upload--picture-card .sia-upload__actions {
   position: absolute;
-  right: 3px;
-  top: 3px;
+  z-index: 1;
+  top: 50%;
+  left: 50%;
+  width: max-content;
+  justify-content: center;
+  padding: 3px;
+  border-radius: 6px;
   background: var(--sia-color-surface);
-  border-radius: 50%;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
   opacity: 0;
-  z-index: 1;
+  pointer-events: none;
+  transform: translate(-50%, -50%);
+  transition: opacity 150ms ease;
 }
-.sia-upload--picture-card .sia-upload__item:hover .sia-upload__remove,
-.sia-upload--picture-card .sia-upload__item:focus-within .sia-upload__remove {
+.sia-upload--picture-card .sia-upload__item:hover .sia-upload__actions,
+.sia-upload--picture-card .sia-upload__item:has(:focus-visible) .sia-upload__actions {
   opacity: 1;
+  pointer-events: auto;
+}
+.sia-upload--picture-card .sia-upload__item:hover,
+.sia-upload--picture-card .sia-upload__item:has(:focus-visible) {
+  z-index: 2;
+}
+.sia-upload--compact-card .sia-upload__name,
+.sia-upload--compact-card .sia-upload__choose > span > span:not(.sia-icon) {
+  display: none;
+}
+.sia-upload--compact-card .sia-upload__choose > span {
+  gap: 0;
+}
+.sia-upload--compact-card .sia-upload__error {
+  position: absolute;
+  inset: auto 0 0;
+  border-radius: 0 0 8px 8px;
+  text-align: center;
+  background: var(--sia-color-surface);
+}
+.sia-upload--compact-card .sia-upload__uploading {
+  padding: 4px;
+  gap: 4px;
+  font-size: 10px;
+  border-radius: inherit;
 }
 .sia-upload--picture-card .sia-upload__item--error {
   border-color: var(--sia-color-error);
@@ -7273,8 +7313,14 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   cursor: not-allowed;
 }
 @media (hover: none) {
-  .sia-upload--picture-card .sia-upload__remove {
+  .sia-upload--picture-card .sia-upload__actions {
     opacity: 1;
+    pointer-events: auto;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .sia-upload--picture-card .sia-upload__actions {
+    transition: none;
   }
 }
 .sia-form > fieldset {
@@ -7296,7 +7342,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   text-align: right;
   line-height: 1.45;
 }
-.sia-form-item__label > span {
+.sia-form-item__required-mark {
   margin-right: 4px;
   color: var(--sia-color-error);
 }
@@ -8846,31 +8892,81 @@ button.sia-pagination__total:disabled {
   position: fixed;
   z-index: 1500;
   inset: 0;
-  display: grid;
-  place-items: center;
-  padding: 56px;
+  box-sizing: border-box;
   background: rgb(0 0 0 / 78%);
   animation: sia-fade-in 180ms ease;
 }
-.sia-image-preview > img {
-  max-width: 100%;
-  max-height: 100%;
-  object-fit: contain;
-}
-.sia-image-preview > button {
+.sia-image-preview__stage {
   position: absolute;
-  top: 18px;
-  right: 18px;
+  inset: 64px 24px 92px;
   display: grid;
+  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
   place-items: center;
+  overflow: hidden;
+}
+.sia-image-preview__stage > img {
+  display: block;
+  max-width: none;
+  max-height: none;
+  object-fit: contain;
+  user-select: none;
+  touch-action: none;
+  cursor: grab;
+}
+.sia-image-preview__stage > img:active {
+  cursor: grabbing;
+}
+.sia-image-preview .sia-image-preview__close {
+  position: absolute;
+  top: 16px;
+  right: 16px;
   width: 38px;
   height: 38px;
+  padding: 0;
   color: #fff;
-  cursor: pointer;
   background: rgb(255 255 255 / 12%);
   border: 0;
   border-radius: 50%;
 }
+.sia-image-preview__toolbar {
+  position: absolute;
+  bottom: 24px;
+  left: 50%;
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  gap: 6px;
+  max-width: calc(100% - 24px);
+  padding: 6px 12px;
+  border-radius: 28px;
+  background: rgb(45 45 45 / 90%);
+  transform: translateX(-50%);
+}
+.sia-image-preview__scale {
+  flex: 0 0 48px;
+  color: #fff;
+  text-align: center;
+  font-size: 14px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.sia-image-preview__toolbar > .sia-button {
+  flex: 0 1 36px;
+  width: 36px;
+  min-width: 0;
+  height: 36px;
+  padding: 0;
+  color: #fff;
+}
+.sia-image-preview__toolbar > .sia-button:hover:not(:disabled) {
+  background: rgb(255 255 255 / 16%);
+}
+.sia-image-preview__toolbar > .sia-button:disabled {
+  color: rgb(255 255 255 / 30%);
+}
+.sia-image-preview__error {
+  color: #fff;
+}
 body > .sia-popup-portal[data-sia-popup-layer] {
   position: fixed;
   z-index: 1080;

package/dist/core.d.cts

@@ -1,4 +1,4 @@
-export { d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, h as Card, i as CardAccent, j as CardProps, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, K as Icon, L as IconName, M as IconProps, N as IconVariant, U as Input, V as InputProps, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, aq as TabItem, ar as Tabs, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, T as TagStatus, aA as TagVariant, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aR as Typography, aS as TypographyLinkProps, aT as TypographyProps, aU as TypographyTitleProps, aV as TypographyType, aW as Upload, aX as UploadChangeInfo, aY as UploadDraggerProps, aZ as UploadFile, a_ as UploadFileStatus, b1 as UploadProps, b5 as UploadRequestOptions, b9 as message } from './core-CIj-Xevv.cjs';
+export { d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, h as Card, i as CardAccent, j as CardProps, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, K as Icon, L as IconName, M as IconProps, N as IconVariant, U as Input, V as InputProps, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, aq as TabItem, ar as Tabs, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, T as TagStatus, aA as TagVariant, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aR as Typography, aS as TypographyLinkProps, aT as TypographyProps, aU as TypographyTitleProps, aV as TypographyType, aW as Upload, aX as UploadChangeInfo, aY as UploadDraggerProps, aZ as UploadFile, a_ as UploadFileStatus, b1 as UploadProps, b5 as UploadRequestOptions, b9 as message } from './core-CLt6U7oH.cjs';
 export { f as Button, B as ButtonProps, e as ButtonSize, g as ButtonVariant, h as Modal, d as ModalActionResult, M as ModalOpenConfig, i as ModalProps, j as ModalType, a as OverlayApiHandle, k as Select, S as SelectOption, c as SelectProps, m as SelectValue } from './Select-YJbT-MF1.cjs';
 import 'react';
 import './shared-Bx4B28Wh.cjs';

package/dist/core.d.ts

@@ -1,4 +1,4 @@
-export { d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, h as Card, i as CardAccent, j as CardProps, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, K as Icon, L as IconName, M as IconProps, N as IconVariant, U as Input, V as InputProps, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, aq as TabItem, ar as Tabs, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, T as TagStatus, aA as TagVariant, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aR as Typography, aS as TypographyLinkProps, aT as TypographyProps, aU as TypographyTitleProps, aV as TypographyType, aW as Upload, aX as UploadChangeInfo, aY as UploadDraggerProps, aZ as UploadFile, a_ as UploadFileStatus, b1 as UploadProps, b5 as UploadRequestOptions, b9 as message } from './core-Cj9bxBwT.js';
+export { d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, h as Card, i as CardAccent, j as CardProps, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, K as Icon, L as IconName, M as IconProps, N as IconVariant, U as Input, V as InputProps, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, aq as TabItem, ar as Tabs, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, T as TagStatus, aA as TagVariant, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aR as Typography, aS as TypographyLinkProps, aT as TypographyProps, aU as TypographyTitleProps, aV as TypographyType, aW as Upload, aX as UploadChangeInfo, aY as UploadDraggerProps, aZ as UploadFile, a_ as UploadFileStatus, b1 as UploadProps, b5 as UploadRequestOptions, b9 as message } from './core-vIHbXa6s.js';
 export { f as Button, B as ButtonProps, e as ButtonSize, g as ButtonVariant, h as Modal, d as ModalActionResult, M as ModalOpenConfig, i as ModalProps, j as ModalType, a as OverlayApiHandle, k as Select, S as SelectOption, c as SelectProps, m as SelectValue } from './Select-CCrPqULn.js';
 import 'react';
 import './shared-Bx4B28Wh.js';

package/dist/core.js

@@ -10,17 +10,17 @@ import {
   Typography,
   Upload,
   message
-} from "./chunk-Z63VYNCR.js";
+} from "./chunk-7CPIEYS2.js";
 import "./chunk-SMCYEPBL.js";
 import {
   Modal,
   Select
-} from "./chunk-QAVQEBIS.js";
+} from "./chunk-ZTJUFVJO.js";
 import {
   Icon,
   Input,
   Segmented
-} from "./chunk-HOU5JLNJ.js";
+} from "./chunk-XCVAVCIO.js";
 import {
   Button
 } from "./chunk-IKAMZNCK.js";