@sia.soul/sia-react-ui 0.1.38 → 0.1.40

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/index.css CHANGED
@@ -327,16 +327,24 @@ fieldset:disabled .sia-input-number__floating-placeholder {
327
327
  min-height: 0;
328
328
  padding-block: 0;
329
329
  }
330
- .sia-form--small > fieldset > .sia-form-item > .sia-form-item__label {
331
- padding-top: 1px;
330
+ .sia-form--small {
331
+ --sia-form-row-height: var(--sia-control-height-small);
332
332
  }
333
- .sia-form--medium > fieldset > .sia-form-item > .sia-form-item__label {
334
- padding-top: 5px;
333
+ .sia-form--medium {
334
+ --sia-form-row-height: var(--sia-control-height-medium);
335
335
  }
336
- .sia-form--large > fieldset > .sia-form-item > .sia-form-item__label {
337
- padding-top: 9px;
336
+ .sia-form--large {
337
+ --sia-form-row-height: var(--sia-control-height-large);
338
338
  }
339
- .sia-form.sia-form--vertical > fieldset > .sia-form-item > .sia-form-item__label {
339
+ @media (min-width: 651px) {
340
+ .sia-form--horizontal .sia-form-item__label {
341
+ padding-top: max(0px, calc((var(--sia-form-row-height) - 1.45em) / 2));
342
+ }
343
+ .sia-form--horizontal .sia-form-item__input-wrap > :is(.sia-radio, .sia-checkbox, .sia-radio-group, .sia-checkbox-group) {
344
+ min-height: var(--sia-form-row-height);
345
+ }
346
+ }
347
+ .sia-form.sia-form--vertical .sia-form-item__label {
340
348
  padding-top: 0;
341
349
  }
342
350
  .sia-rate--small .sia-rate__item button {
@@ -3276,7 +3284,11 @@ fieldset:disabled .sia-input-number__floating-placeholder {
3276
3284
  gap: 0;
3277
3285
  align-items: flex-start;
3278
3286
  padding-top: 13px;
3279
- padding-right: 40px;
3287
+ padding-right: 0;
3288
+ }
3289
+ .sia-tabs--tech-line.sia-tabs--horizontal > .sia-tabs__header .sia-tabs__list {
3290
+ overflow-x: clip;
3291
+ overflow-y: clip;
3280
3292
  }
3281
3293
  .sia-tabs--tech-line > .sia-tabs__header .sia-tabs__list::before {
3282
3294
  position: absolute;
@@ -3386,7 +3398,6 @@ fieldset:disabled .sia-input-number__floating-placeholder {
3386
3398
  }
3387
3399
  .sia-tabs--tech-line.sia-tabs--horizontal > .sia-tabs__header .sia-tabs__list {
3388
3400
  max-width: 100%;
3389
- overflow-x: auto;
3390
3401
  padding: 8px 0;
3391
3402
  }
3392
3403
  .sia-tabs--tech-line.sia-tabs--horizontal > .sia-tabs__header .sia-tabs__list::before {
@@ -3403,9 +3414,6 @@ fieldset:disabled .sia-input-number__floating-placeholder {
3403
3414
  max-width: none;
3404
3415
  min-height: 32px;
3405
3416
  }
3406
- .sia-tabs--tech.sia-tabs--horizontal > .sia-tabs__header .sia-tabs__list {
3407
- overflow-x: auto;
3408
- }
3409
3417
  .sia-tabs--tech.sia-tabs--horizontal > .sia-tabs__header .sia-tabs__tab-wrap {
3410
3418
  min-width: 96px;
3411
3419
  }
@@ -4644,7 +4652,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
4644
4652
  height: 34px;
4645
4653
  padding-inline: 22px;
4646
4654
  border-radius: 999px;
4647
- transition: background-color 240ms ease, color 240ms ease;
4655
+ transition: background-color 180ms ease, color 180ms ease;
4648
4656
  }
4649
4657
  .sia-tabs--capsule > .sia-tabs__header .sia-tabs__tab[aria-selected=true] {
4650
4658
  color: var(--sia-tabs-accent);
@@ -4670,7 +4678,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
4670
4678
  }
4671
4679
  .sia-tabs--underline > .sia-tabs__header .sia-tabs__tab {
4672
4680
  padding-inline: 22px;
4673
- transition: color 240ms ease;
4681
+ transition: color 180ms ease;
4674
4682
  }
4675
4683
  .sia-tabs--underline > .sia-tabs__header .sia-tabs__tab[aria-selected=true] {
4676
4684
  color: var(--sia-tabs-accent);
@@ -4705,9 +4713,9 @@ fieldset:disabled .sia-input-number__floating-placeholder {
4705
4713
  }
4706
4714
  .sia-tabs__capsule-indicator[data-ready=true] {
4707
4715
  transition:
4708
- transform 240ms ease,
4709
- width 240ms ease,
4710
- height 240ms ease;
4716
+ transform 180ms ease,
4717
+ width 180ms ease,
4718
+ height 180ms ease;
4711
4719
  }
4712
4720
  @media (prefers-reduced-motion: reduce) {
4713
4721
  .sia-tabs__capsule-indicator[data-ready=true] {
@@ -4728,15 +4736,15 @@ fieldset:disabled .sia-input-number__floating-placeholder {
4728
4736
  }
4729
4737
  .sia-tabs__indicator[data-ready=true] {
4730
4738
  transition:
4731
- transform 240ms ease,
4732
- width 240ms ease,
4733
- height 240ms ease;
4739
+ transform 180ms ease,
4740
+ width 180ms ease,
4741
+ height 180ms ease;
4734
4742
  }
4735
4743
  .sia-tabs--tech-line > .sia-tabs__header .sia-tabs__indicator[data-ready=true] {
4736
4744
  transition:
4737
- transform 300ms cubic-bezier(.4, 0, .2, 1),
4738
- width 300ms cubic-bezier(.4, 0, .2, 1),
4739
- height 300ms cubic-bezier(.4, 0, .2, 1);
4745
+ transform 180ms cubic-bezier(.4, 0, .2, 1),
4746
+ width 180ms cubic-bezier(.4, 0, .2, 1),
4747
+ height 180ms cubic-bezier(.4, 0, .2, 1);
4740
4748
  }
4741
4749
  .sia-tabs--line > .sia-tabs__header .sia-tabs__tab[aria-selected=true]::after {
4742
4750
  display: none;
@@ -5019,6 +5027,38 @@ fieldset:disabled .sia-input-number__floating-placeholder {
5019
5027
  flex-shrink: 0;
5020
5028
  flex-wrap: nowrap;
5021
5029
  }
5030
+ .sia-tabs--horizontal > .sia-tabs__header > .sia-tabs__list {
5031
+ position: relative;
5032
+ box-sizing: border-box;
5033
+ overflow: clip;
5034
+ min-width: 0;
5035
+ }
5036
+ .sia-tabs--horizontal > .sia-tabs__header > .sia-tabs__list > [data-tab-entry] {
5037
+ flex: 0 0 auto;
5038
+ width: max-content;
5039
+ }
5040
+ .sia-tabs--horizontal > .sia-tabs__header > .sia-tabs__list > [data-tab-hidden=true] {
5041
+ position: absolute;
5042
+ left: 0;
5043
+ top: 0;
5044
+ visibility: hidden;
5045
+ pointer-events: none;
5046
+ }
5047
+ .sia-tabs__more {
5048
+ display: inline-flex;
5049
+ flex: 0 0 auto;
5050
+ align-items: center;
5051
+ align-self: center;
5052
+ }
5053
+ .sia-tabs__more > .sia-button {
5054
+ width: 36px;
5055
+ height: 34px;
5056
+ padding: 0;
5057
+ }
5058
+ .sia-tabs__more > .sia-button.is-active {
5059
+ color: var(--sia-color-primary);
5060
+ background: var(--sia-color-primary-light);
5061
+ }
5022
5062
 
5023
5063
  /* src/components-extra.css */
5024
5064
  .sia-flex {
package/dist/index.d.cts CHANGED
@@ -1,5 +1,5 @@
1
- import { T as TagStatus, B as BadgeProps } from './core-BzBVS9md.cjs';
2
- export { a as Badge, b as BadgeRibbonProps, c as BadgeStatus, d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, C as Calendar, g as CalendarProps, h as Card, i as CardAccent, j as CardProps, k as Carousel, l as CarouselProps, m as CarouselRef, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, D as Dropdown, r as DropdownButtonProps, s as DropdownMenuProps, t as DropdownOpenSource, u as DropdownPlacement, v as DropdownProps, w as DropdownTrigger, F as FILLED_ICON_NAMES, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, H as FloatingPlacement, I as FloatingTrigger, J as ICON_NAMES, K as Icon, L as IconName, M as IconProps, N as IconVariant, O as Image, P as ImagePreview, Q as ImagePreviewConfig, R as ImagePreviewProps, S as ImageProps, U as Input, V as InputProps, W as Menu, X as MenuClickInfo, Y as MenuItem, Z as MenuMode, _ as MenuProps, $ as MenuTheme, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, a4 as NotificationConfig, a5 as NotificationPlacement, a6 as NotificationType, a7 as Popconfirm, a8 as PopconfirmProps, a9 as Popover, aa as PopoverProps, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ae as Rate, af as RateProps, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, ak as Spin, al as SpinProps, am as StepItem, an as StepStatus, ao as Steps, ap as StepsProps, aq as TabItem, ar as Tabs, as as TabsContextMenuClickInfo, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, aA as TagVariant, aB as Timeline, aC as TimelineItem, aD as TimelineProps, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aH as Tooltip, aI as TooltipProps, aJ as Tour, aK as TourProps, aL as TourStep, aM as Tree, aN as TreeDropPosition, aO as TreeKey, aP as TreeNode, aQ as TreeProps, 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, a$ as UploadHttpRequest, b0 as UploadItemActions, b1 as UploadProps, b2 as UploadRef, b3 as UploadRejectInfo, b4 as UploadRequestHandle, b5 as UploadRequestOptions, b6 as Watermark, b7 as WatermarkFont, b8 as WatermarkProps, b9 as message, ba as notification } from './core-BzBVS9md.cjs';
1
+ import { T as TagStatus, B as BadgeProps } from './core-BAHoW7_e.cjs';
2
+ export { a as Badge, b as BadgeRibbonProps, c as BadgeStatus, d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, C as Calendar, g as CalendarProps, h as Card, i as CardAccent, j as CardProps, k as Carousel, l as CarouselProps, m as CarouselRef, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, D as Dropdown, r as DropdownButtonProps, s as DropdownMenuProps, t as DropdownOpenSource, u as DropdownPlacement, v as DropdownProps, w as DropdownTrigger, F as FILLED_ICON_NAMES, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, H as FloatingPlacement, I as FloatingTrigger, J as ICON_NAMES, K as Icon, L as IconName, M as IconProps, N as IconVariant, O as Image, P as ImagePreview, Q as ImagePreviewConfig, R as ImagePreviewProps, S as ImageProps, U as Input, V as InputProps, W as Menu, X as MenuClickInfo, Y as MenuItem, Z as MenuMode, _ as MenuProps, $ as MenuTheme, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, a4 as NotificationConfig, a5 as NotificationPlacement, a6 as NotificationType, a7 as Popconfirm, a8 as PopconfirmProps, a9 as Popover, aa as PopoverProps, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ae as Rate, af as RateProps, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, ak as Spin, al as SpinProps, am as StepItem, an as StepStatus, ao as Steps, ap as StepsProps, aq as TabItem, ar as Tabs, as as TabsContextMenuClickInfo, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, aA as TagVariant, aB as Timeline, aC as TimelineItem, aD as TimelineProps, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aH as Tooltip, aI as TooltipProps, aJ as Tour, aK as TourProps, aL as TourStep, aM as Tree, aN as TreeDropPosition, aO as TreeKey, aP as TreeNode, aQ as TreeProps, 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, a$ as UploadHttpRequest, b0 as UploadItemActions, b1 as UploadProps, b2 as UploadRef, b3 as UploadRejectInfo, b4 as UploadRequestHandle, b5 as UploadRequestOptions, b6 as Watermark, b7 as WatermarkFont, b8 as WatermarkProps, b9 as message, ba as notification } from './core-BAHoW7_e.cjs';
3
3
  import * as react from 'react';
4
4
  import { HTMLAttributes, ReactNode, CSSProperties, ElementType, FormHTMLAttributes, InputHTMLAttributes, ChangeEvent, TextareaHTMLAttributes, MouseEvent, Key, PointerEvent, Ref, ReactElement, ButtonHTMLAttributes, RefObject } from 'react';
5
5
  import { C as ControlSize, I as InputPlaceholderMode, a as ControlStatus } from './shared-Bx4B28Wh.cjs';
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { T as TagStatus, B as BadgeProps } from './core-CBURAp9W.js';
2
- export { a as Badge, b as BadgeRibbonProps, c as BadgeStatus, d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, C as Calendar, g as CalendarProps, h as Card, i as CardAccent, j as CardProps, k as Carousel, l as CarouselProps, m as CarouselRef, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, D as Dropdown, r as DropdownButtonProps, s as DropdownMenuProps, t as DropdownOpenSource, u as DropdownPlacement, v as DropdownProps, w as DropdownTrigger, F as FILLED_ICON_NAMES, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, H as FloatingPlacement, I as FloatingTrigger, J as ICON_NAMES, K as Icon, L as IconName, M as IconProps, N as IconVariant, O as Image, P as ImagePreview, Q as ImagePreviewConfig, R as ImagePreviewProps, S as ImageProps, U as Input, V as InputProps, W as Menu, X as MenuClickInfo, Y as MenuItem, Z as MenuMode, _ as MenuProps, $ as MenuTheme, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, a4 as NotificationConfig, a5 as NotificationPlacement, a6 as NotificationType, a7 as Popconfirm, a8 as PopconfirmProps, a9 as Popover, aa as PopoverProps, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ae as Rate, af as RateProps, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, ak as Spin, al as SpinProps, am as StepItem, an as StepStatus, ao as Steps, ap as StepsProps, aq as TabItem, ar as Tabs, as as TabsContextMenuClickInfo, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, aA as TagVariant, aB as Timeline, aC as TimelineItem, aD as TimelineProps, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aH as Tooltip, aI as TooltipProps, aJ as Tour, aK as TourProps, aL as TourStep, aM as Tree, aN as TreeDropPosition, aO as TreeKey, aP as TreeNode, aQ as TreeProps, 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, a$ as UploadHttpRequest, b0 as UploadItemActions, b1 as UploadProps, b2 as UploadRef, b3 as UploadRejectInfo, b4 as UploadRequestHandle, b5 as UploadRequestOptions, b6 as Watermark, b7 as WatermarkFont, b8 as WatermarkProps, b9 as message, ba as notification } from './core-CBURAp9W.js';
1
+ import { T as TagStatus, B as BadgeProps } from './core-fn8h4yRg.js';
2
+ export { a as Badge, b as BadgeRibbonProps, c as BadgeStatus, d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, C as Calendar, g as CalendarProps, h as Card, i as CardAccent, j as CardProps, k as Carousel, l as CarouselProps, m as CarouselRef, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, D as Dropdown, r as DropdownButtonProps, s as DropdownMenuProps, t as DropdownOpenSource, u as DropdownPlacement, v as DropdownProps, w as DropdownTrigger, F as FILLED_ICON_NAMES, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, H as FloatingPlacement, I as FloatingTrigger, J as ICON_NAMES, K as Icon, L as IconName, M as IconProps, N as IconVariant, O as Image, P as ImagePreview, Q as ImagePreviewConfig, R as ImagePreviewProps, S as ImageProps, U as Input, V as InputProps, W as Menu, X as MenuClickInfo, Y as MenuItem, Z as MenuMode, _ as MenuProps, $ as MenuTheme, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, a4 as NotificationConfig, a5 as NotificationPlacement, a6 as NotificationType, a7 as Popconfirm, a8 as PopconfirmProps, a9 as Popover, aa as PopoverProps, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ae as Rate, af as RateProps, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, ak as Spin, al as SpinProps, am as StepItem, an as StepStatus, ao as Steps, ap as StepsProps, aq as TabItem, ar as Tabs, as as TabsContextMenuClickInfo, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, aA as TagVariant, aB as Timeline, aC as TimelineItem, aD as TimelineProps, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aH as Tooltip, aI as TooltipProps, aJ as Tour, aK as TourProps, aL as TourStep, aM as Tree, aN as TreeDropPosition, aO as TreeKey, aP as TreeNode, aQ as TreeProps, 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, a$ as UploadHttpRequest, b0 as UploadItemActions, b1 as UploadProps, b2 as UploadRef, b3 as UploadRejectInfo, b4 as UploadRequestHandle, b5 as UploadRequestOptions, b6 as Watermark, b7 as WatermarkFont, b8 as WatermarkProps, b9 as message, ba as notification } from './core-fn8h4yRg.js';
3
3
  import * as react from 'react';
4
4
  import { HTMLAttributes, ReactNode, CSSProperties, ElementType, FormHTMLAttributes, InputHTMLAttributes, ChangeEvent, TextareaHTMLAttributes, MouseEvent, Key, PointerEvent, Ref, ReactElement, ButtonHTMLAttributes, RefObject } from 'react';
5
5
  import { C as ControlSize, I as InputPlaceholderMode, a as ControlStatus } from './shared-Bx4B28Wh.js';
package/dist/index.js CHANGED
@@ -80,7 +80,7 @@ import {
80
80
  Watermark,
81
81
  message,
82
82
  notification
83
- } from "./chunk-DQ7WGTKA.js";
83
+ } from "./chunk-CEZ4GW3X.js";
84
84
  import {
85
85
  TextArea
86
86
  } from "./chunk-SMCYEPBL.js";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sia.soul/sia-react-ui",
3
- "version": "0.1.38",
3
+ "version": "0.1.40",
4
4
  "description": "Sia Design components and tokens for React",
5
5
  "publishConfig": {
6
6
  "access": "public",