@sia.soul/sia-react-ui 0.1.10 → 0.1.12

package/dist/core.css

@@ -4121,12 +4121,14 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   }
 }
 .sia-table__settings-dropdown .sia-menu__item {
-  min-height: 44px;
-  padding: 10px 16px;
-  gap: 12px;
+  min-height: 34px;
+  padding: 4px 12px;
+  gap: 10px;
+  font-size: 14px;
+  line-height: 24px;
 }
 .sia-table__settings-dropdown .sia-menu__divider {
-  margin: 8px 12px;
+  margin: 4px 8px;
 }
 .sia-table--borderless-toolbar {
   border: 0;
@@ -4263,6 +4265,184 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+.sia-tabs--capsule,
+.sia-tabs--underline {
+  --sia-tabs-accent: var(--sia-color-primary);
+  --sia-tabs-selection-bg: var(--sia-color-primary-light);
+}
+.sia-tabs--capsule .sia-tabs__list {
+  position: relative;
+  isolation: isolate;
+  flex: 0 1 auto;
+  gap: 4px;
+  padding: 5px;
+  border: 1px solid var(--sia-color-border);
+  border-radius: 999px;
+  background: var(--sia-color-surface);
+  box-shadow: 0 3px 7px -3px rgb(0 0 0 / 24%);
+}
+.sia-tabs--capsule .sia-tabs__tab {
+  height: 34px;
+  padding-inline: 22px;
+  border-radius: 999px;
+  transition: background-color 240ms ease, color 240ms ease;
+}
+.sia-tabs--capsule .sia-tabs__tab[aria-selected=true] {
+  color: var(--sia-tabs-accent);
+  background: transparent;
+  font-weight: 500;
+}
+.sia-tabs--capsule.sia-tabs--small .sia-tabs__tab {
+  height: 26px;
+  padding-inline: 16px;
+}
+.sia-tabs--capsule.sia-tabs--large .sia-tabs__tab {
+  height: 42px;
+  padding-inline: 26px;
+}
+.sia-tabs--capsule.sia-tabs--centered .sia-tabs__header {
+  justify-content: center;
+}
+.sia-tabs--capsule.sia-tabs--vertical .sia-tabs__list {
+  border-radius: 24px;
+}
+.sia-tabs--underline .sia-tabs__list {
+  gap: 0;
+}
+.sia-tabs--underline .sia-tabs__tab {
+  padding-inline: 22px;
+  transition: color 240ms ease;
+}
+.sia-tabs--underline .sia-tabs__tab[aria-selected=true] {
+  color: var(--sia-tabs-accent);
+  font-weight: 500;
+}
+.sia-tabs--underline .sia-tabs__tab[aria-selected=true]::after {
+  background: var(--sia-tabs-accent);
+}
+.sia-tabs--underline .sia-tabs__tab .sia-badge {
+  margin-inline-end: 8px;
+}
+.sia-tabs--capsule .sia-tabs__tab:focus-visible,
+.sia-tabs--underline .sia-tabs__tab:focus-visible {
+  outline: 2px solid var(--sia-tabs-accent);
+  outline-offset: -2px;
+}
+@media (prefers-reduced-motion: reduce) {
+  .sia-tabs--capsule .sia-tabs__tab,
+  .sia-tabs--underline .sia-tabs__tab {
+    transition: none;
+  }
+}
+.sia-tabs__capsule-indicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  visibility: hidden;
+  border-radius: 999px;
+  background: var(--sia-tabs-selection-bg);
+  pointer-events: none;
+}
+.sia-tabs__capsule-indicator[data-ready=true] {
+  transition:
+    transform 240ms ease,
+    width 240ms ease,
+    height 240ms ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .sia-tabs__capsule-indicator[data-ready=true] {
+    transition: none;
+  }
+}
+.sia-tabs__list--sliding {
+  position: relative;
+  isolation: isolate;
+}
+.sia-tabs__indicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  visibility: hidden;
+  pointer-events: none;
+}
+.sia-tabs__indicator[data-ready=true] {
+  transition:
+    transform 240ms ease,
+    width 240ms ease,
+    height 240ms ease;
+}
+.sia-tabs--line .sia-tabs__tab[aria-selected=true]::after {
+  display: none;
+}
+.sia-tabs--line .sia-tabs__indicator::after {
+  position: absolute;
+  content: "";
+  background: var(--sia-tabs-accent, var(--sia-color-primary));
+}
+.sia-tabs--line.sia-tabs--top .sia-tabs__indicator::after {
+  bottom: -1px;
+  left: 0;
+  right: 0;
+  height: 2px;
+  border-radius: 2px 2px 0 0;
+}
+.sia-tabs--line.sia-tabs--bottom .sia-tabs__indicator::after {
+  top: -1px;
+  left: 0;
+  right: 0;
+  height: 2px;
+  border-radius: 0 0 2px 2px;
+}
+.sia-tabs--line.sia-tabs--left .sia-tabs__indicator::after {
+  top: 0;
+  bottom: 0;
+  right: -1px;
+  width: 2px;
+}
+.sia-tabs--line.sia-tabs--right .sia-tabs__indicator::after {
+  top: 0;
+  bottom: 0;
+  left: -1px;
+  width: 2px;
+}
+.sia-tabs--tech .sia-tabs__tab[aria-selected=true]::before,
+.sia-tabs--tech .sia-tabs__tab[aria-selected=true]::after {
+  display: none;
+}
+.sia-tabs--tech .sia-tabs__indicator::before,
+.sia-tabs--tech .sia-tabs__indicator::after {
+  position: absolute;
+  content: "";
+  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
+}
+.sia-tabs--tech .sia-tabs__indicator::before {
+  inset: 1px 0;
+  background: var(--sia-tabs-tech-accent);
+}
+.sia-tabs--tech .sia-tabs__indicator::after {
+  inset: 2px 1px;
+  background: var(--sia-tabs-tech-selection);
+}
+.sia-tabs--tech-line .sia-tabs__tab[aria-selected=true] .sia-tabs__tab-shape {
+  visibility: hidden;
+}
+.sia-tabs__indicator-shape {
+  display: block;
+  width: 100%;
+  height: 100%;
+  color: var(--sia-tabs-line-accent);
+}
+[data-sia-theme=dark] .sia-tabs--tech-line .sia-tabs__indicator {
+  --sia-tabs-line-fill-edge: var(--sia-tabs-line-surface);
+  --sia-tabs-line-fill-center: var(--sia-color-primary);
+}
+@media (prefers-reduced-motion: reduce) {
+  .sia-tabs__indicator[data-ready=true] {
+    transition: none;
+  }
+}
 
 /* src/components-extra.css */
 .sia-flex {
@@ -4634,11 +4814,14 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   width: calc(var(--sia-tool-panel-rail-size) + var(--sia-tool-panel-size) + var(--sia-tool-panel-handle-size));
 }
 .sia-tool-panel__rail {
+  position: relative;
   display: flex;
+  flex-direction: column;
   align-items: flex-start;
   flex: 0 0 var(--sia-tool-panel-rail-size);
   width: var(--sia-tool-panel-rail-size);
   min-width: 0;
+  overflow-y: auto;
   background: var(--sia-color-surface);
 }
 .sia-tool-panel--left:not(.is-open) .sia-tool-panel__rail {
@@ -4668,16 +4851,38 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   background: var(--sia-color-control-hover);
 }
 .sia-tool-panel__activity:focus-visible {
-  outline: none;
+  outline: 2px solid var(--sia-color-primary);
+  outline-offset: -2px;
+}
+.sia-tool-panel__activity {
+  flex-shrink: 0;
+}
+.sia-tool-panel__activity:disabled {
+  cursor: not-allowed;
+  opacity: .45;
+  background: transparent;
+  color: var(--sia-color-text-secondary);
 }
 .sia-tool-panel__activity.is-active {
   color: var(--sia-color-primary-text);
 }
-.sia-tool-panel--left .sia-tool-panel__activity.is-active {
-  box-shadow: inset -3px 0 0 var(--sia-color-primary);
+.sia-tool-panel__indicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  width: 3px;
+  visibility: hidden;
+  background: var(--sia-color-primary);
+  pointer-events: none;
 }
-.sia-tool-panel--right .sia-tool-panel__activity.is-active {
-  box-shadow: inset 3px 0 0 var(--sia-color-primary);
+.sia-tool-panel__indicator[data-ready=true] {
+  transition: transform 240ms ease, height 240ms ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .sia-tool-panel__indicator[data-ready=true] {
+    transition: none;
+  }
 }
 .sia-tool-panel__activity-icon {
   display: inline-flex;
@@ -4699,6 +4904,14 @@ fieldset:disabled .sia-input-number__floating-placeholder {
 .sia-tool-panel__content[hidden] {
   display: none;
 }
+.sia-tool-panel__pane {
+  height: 100%;
+  min-height: 0;
+  overflow: auto;
+}
+.sia-tool-panel__pane[hidden] {
+  display: none;
+}
 .sia-tool-panel__resize-handle {
   position: relative;
   z-index: 2;

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-Dwc_30PN.cjs';
+export { f as Breadcrumb, g as BreadcrumbItem, h as BreadcrumbProps, i as Button, B 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-y0w5PBO2.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-ByQQ3hq2.js';
+export { f as Breadcrumb, g as BreadcrumbItem, h as BreadcrumbProps, i as Button, B 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-VmiEI1Jp.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

@@ -9,12 +9,12 @@ import {
   Typography,
   Upload,
   message
-} from "./chunk-6HP6IIT4.js";
+} from "./chunk-MOOMDRAN.js";
 import "./chunk-WHARTF2I.js";
 import {
   Modal,
   Select
-} from "./chunk-SGJLZN23.js";
+} from "./chunk-BUMS62NO.js";
 import {
   Icon,
   Input,