@smwb/ui-react 2.6.3 → 2.8.0

package/dist/assets/styles/less/components/thumbCard/thumbCard.entry.css

@@ -1 +1 @@
-.smwb-thumb-card{position:relative;display:flex;flex-direction:column;border-radius:8px;overflow:visible;outline:none}.smwb-thumb-card--interactive{cursor:pointer}.smwb-thumb-card--disabled{opacity:.5;pointer-events:none}.smwb-thumb-card__media{position:relative;width:100%;aspect-ratio:1;border-radius:8px;overflow:hidden;background-color:var(--smui-surfaceVariant)}.smwb-thumb-card--selected .smwb-thumb-card__media{outline:2px solid var(--smui-primaryColor);outline-offset:1px}.smwb-thumb-card--interactive:focus-visible .smwb-thumb-card__media{outline:2px solid var(--smui-primaryColor);outline-offset:1px}.smwb-thumb-card__slot{position:absolute;top:4px;display:flex;gap:4px;z-index:1}.smwb-thumb-card__slot--start{left:4px}.smwb-thumb-card__slot--end{right:4px}.smwb-thumb-card__caption{margin-top:4px;font-size:.8125rem;color:var(--smui-onSurfaceColor);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.smwb-thumb-card__preview{z-index:1000;border-radius:8px;overflow:hidden;box-shadow:0 8px 24px #0000004d;background-color:var(--smui-surfaceBackground);pointer-events:none}.smwb-thumb-card__preview img{display:block;max-width:320px;max-height:320px;object-fit:contain}
+.smwb-thumb-card{position:relative;display:flex;flex-direction:column;border-radius:8px;overflow:visible}.smwb-thumb-card--interactive{cursor:pointer}.smwb-thumb-card--disabled{opacity:.5;pointer-events:none}.smwb-thumb-card__content{display:flex;flex-direction:column;outline:none}.smwb-thumb-card__media{position:relative;width:100%;aspect-ratio:1;border-radius:8px;overflow:hidden;background-color:var(--smui-surfaceVariant)}.smwb-thumb-card--selected .smwb-thumb-card__media{outline:2px solid var(--smui-primaryColor);outline-offset:1px}.smwb-thumb-card__content:focus-visible .smwb-thumb-card__media{outline:2px solid var(--smui-primaryColor);outline-offset:1px}.smwb-thumb-card__slot{position:absolute;top:4px;display:flex;gap:4px;z-index:1}.smwb-thumb-card__slot--start{left:4px}.smwb-thumb-card__slot--end{right:4px}.smwb-thumb-card__caption{margin-top:4px;font-size:.8125rem;color:var(--smui-onSurfaceColor);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.smwb-thumb-card__preview{z-index:1000;border-radius:8px;overflow:hidden;box-shadow:0 8px 24px #0000004d;background-color:var(--smui-surfaceBackground);pointer-events:none}.smwb-thumb-card__preview img{display:block;max-width:320px;max-height:320px;object-fit:contain}

package/dist/assets/styles/less/components/timeline/timeline.entry.css

@@ -0,0 +1 @@
+.smwb-timeline{--smwb-timeline-mark: 24px;--smwb-timeline-pad: 4px;display:grid;row-gap:12px;margin:0;padding:0;list-style:none;font-size:.875rem;line-height:1.45;min-width:0}.smwb-timeline__group{display:grid;row-gap:4px;min-width:0}.smwb-timeline__label{padding:2px 0;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--smui-onSurfaceVariant)}.smwb-timeline__items{display:grid;margin:0;padding:0;list-style:none;min-width:0}.smwb-timeline__item{--smwb-timeline-tone: var(--smui-onSurfaceVariant);position:relative;display:grid;grid-template-columns:var(--smwb-timeline-mark) minmax(0,1fr) auto;column-gap:8px;align-items:start;padding:var(--smwb-timeline-pad) 0;min-width:0}.smwb-timeline__item:before{content:"";position:absolute;left:calc(var(--smwb-timeline-mark) / 2 - 1px);top:calc(var(--smwb-timeline-pad) + var(--smwb-timeline-mark));bottom:calc(-1 * var(--smwb-timeline-pad));width:2px;background-color:var(--smui-dividerColor)}.smwb-timeline__item:last-child:before{display:none}.smwb-timeline__mark{display:inline-flex;align-items:center;justify-content:center;width:var(--smwb-timeline-mark);height:var(--smwb-timeline-mark);color:var(--smwb-timeline-tone)}.smwb-timeline__dot{width:8px;height:8px;border-radius:50%;background-color:currentColor}.smwb-timeline__body{min-width:0}.smwb-timeline__title{overflow-wrap:anywhere}.smwb-timeline__title a{color:inherit;text-decoration:none}.smwb-timeline__title a:hover{color:var(--smui-primaryColor);text-decoration:underline}.smwb-timeline__meta{font-size:.75rem;color:var(--smui-onSurfaceVariant);overflow-wrap:anywhere}.smwb-timeline__content{margin-top:4px}.smwb-timeline__time{font-size:.75rem;line-height:1.45rem;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--smui-onSurfaceVariant)}.smwb-timeline__item_tone-info{--smwb-timeline-tone: var(--smui-infoColor)}.smwb-timeline__item_tone-success{--smwb-timeline-tone: var(--smui-successColor)}.smwb-timeline__item_tone-warning{--smwb-timeline-tone: var(--smui-warningColor)}.smwb-timeline__item_tone-error{--smwb-timeline-tone: var(--smui-errorColor)}.smwb-timeline_dense{--smwb-timeline-pad: 2px;row-gap:8px;font-size:.8125rem}.smwb-timeline_sticky-labels .smwb-timeline__label{position:sticky;top:0;z-index:1;background-color:var(--smwb-timeline-label-bg, var(--smui-surfaceBackground))}

package/dist/assets/styles/less/components/toggle/toggle.entry.css

@@ -1 +1 @@
-.smwb-toggle{width:50px;height:30px;position:relative;cursor:pointer;display:inline-flex}.smwb-toggle__wrapper{display:inline-flex;flex-direction:column;gap:8px}.smwb-toggle__wrapper_label-left{flex-direction:row;align-items:center}.smwb-toggle__wrapper_label-right{flex-direction:row-reverse;align-items:center}.smwb-toggle.smwb-disabled{opacity:.35;pointer-events:none}.smwb-toggle__track{width:100%;height:100%;position:absolute;top:0;left:0;background-color:var(--smui-toggleTrackColor);border-radius:999px;transition:all .2s ease-in-out;border:2px solid var(--smui-toggleBorderColor)}.smwb-toggle__thumb{position:absolute;z-index:1;width:15px;height:15px;border-radius:50%;background-color:#79747e;left:5px;transform:translateY(-50%);top:50%;transition:all .2s ease-in-out;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.smwb-toggle__thumb:before{width:40px;height:40px;border-radius:50%;content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);background-color:none;opacity:0;transition:all .2s ease-in-out}.smwb-toggle__thumb:hover:before{transform:translate(-50%,-50%) scale(1);background-color:var(--smui-onSurfaceHover);opacity:1}.smwb-toggle__checkbox{display:none}.smwb-toggle__checkbox:checked~.smwb-toggle__track{background-color:var(--smui-toggleTrackActiveColor);border:2px solid transparent}.smwb-toggle__checkbox:checked~.smwb-toggle__thumb{left:25px;background-color:var(--smui-toggleThumbActiveColor);width:20px;height:20px}.smwb-toggle__checkbox:checked~.smwb-toggle__thumb:hover:before{transform:translate(-50%,-50%) scale(1);background-color:var(--smui-primaryColorHover);opacity:1}.smwb-toggle__checkbox:checked:active~.smwb-toggle__thumb:before{transform:translate(-50%,-50%) scale(1);background-color:var(--smui-primaryColorActive);opacity:1}.smwb-toggle__checkbox:active~.smwb-toggle__thumb:before{transform:translate(-50%,-50%) scale(1);background-color:var(--smui-onSurfaceActive);opacity:1}
+.smwb-toggle{width:50px;height:30px;position:relative;cursor:pointer;display:inline-flex}.smwb-toggle__wrapper{display:inline-flex;flex-direction:column;gap:8px}.smwb-toggle__wrapper_label-left{flex-direction:row;align-items:center}.smwb-toggle__wrapper_label-right{flex-direction:row-reverse;align-items:center}.smwb-toggle.smwb-disabled{opacity:.35;pointer-events:none}.smwb-toggle__track{width:100%;height:100%;position:absolute;top:0;left:0;background-color:var(--smui-toggleTrackColor);border-radius:999px;transition:all .2s ease-in-out;border:2px solid var(--smui-toggleBorderColor)}.smwb-toggle__thumb{position:absolute;z-index:1;width:15px;height:15px;border-radius:50%;background-color:#79747e;left:5px;transform:translateY(-50%);top:50%;transition:all .2s ease-in-out;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.smwb-toggle__thumb:before{width:40px;height:40px;border-radius:50%;content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);background-color:none;opacity:0;transition:all .2s ease-in-out}.smwb-toggle__thumb:hover:before{transform:translate(-50%,-50%) scale(1);background-color:var(--smui-onSurfaceHover);opacity:1}.smwb-toggle__checkbox{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;opacity:0}.smwb-toggle__checkbox:focus-visible~.smwb-toggle__track{outline:2px solid var(--smui-primaryColor);outline-offset:2px}.smwb-toggle__checkbox:checked~.smwb-toggle__track{background-color:var(--smui-toggleTrackActiveColor);border:2px solid transparent}.smwb-toggle__checkbox:checked~.smwb-toggle__thumb{left:25px;background-color:var(--smui-toggleThumbActiveColor);width:20px;height:20px}.smwb-toggle__checkbox:checked~.smwb-toggle__thumb:hover:before{transform:translate(-50%,-50%) scale(1);background-color:var(--smui-primaryColorHover);opacity:1}.smwb-toggle__checkbox:checked:active~.smwb-toggle__thumb:before{transform:translate(-50%,-50%) scale(1);background-color:var(--smui-primaryColorActive);opacity:1}.smwb-toggle__checkbox:active~.smwb-toggle__thumb:before{transform:translate(-50%,-50%) scale(1);background-color:var(--smui-onSurfaceActive);opacity:1}

package/dist/assets/styles/less/components/tooltip/tooltip.entry.css

@@ -1 +1 @@
-.smwb-tooltip{border-radius:4px;background-color:var(--smui-tooltipBg);color:var(--smui-tooltipTextColor);z-index:5;font-size:12px;padding:0 8px;height:24px;display:inline-flex;align-items:center;justify-content:center;transition:all .2s ease-in-out;overflow:hidden;opacity:0;visibility:hidden;white-space:nowrap;min-width:50px}.smwb-tooltip__ref{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.smwb-tooltip__ref:hover+.smwb-tooltip{visibility:visible;opacity:1}.smwb-tooltip__wrapper{position:relative;display:inline-flex;align-items:center;justify-content:center}
+.smwb-tooltip{border-radius:4px;background-color:var(--smui-tooltipBg);color:var(--smui-tooltipTextColor);z-index:5;font-size:12px;padding:0 8px;height:24px;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;min-width:50px;animation:smwb-tooltip-in .15s ease-out}.smwb-tooltip__ref{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.smwb-tooltip__wrapper{position:relative;display:inline-flex;align-items:center;justify-content:center}@keyframes smwb-tooltip-in{0%{opacity:0}}

package/dist/assets/styles/less/components/typography/typography.entry.css

@@ -1 +1 @@
-.smwb-typography{margin:0;font-family:var(--smui-fontFamily, inherit);color:var(--smui-onSurfaceColor)}.smwb-typography_h1{font-size:48px;font-weight:300;line-height:1.2}.smwb-typography_h2{font-size:40px;font-weight:300;line-height:1.2}.smwb-typography_h3{font-size:32px;font-weight:400;line-height:1.25}.smwb-typography_h4{font-size:28px;font-weight:400;line-height:1.3}.smwb-typography_h5{font-size:24px;font-weight:500;line-height:1.3}.smwb-typography_h6{font-size:20px;font-weight:500;line-height:1.4}.smwb-typography_subtitle1{font-size:16px;font-weight:500;line-height:1.5}.smwb-typography_subtitle2{font-size:14px;font-weight:500;line-height:1.5}.smwb-typography_body1{font-size:16px;font-weight:400;line-height:1.5}.smwb-typography_body2{font-size:14px;font-weight:400;line-height:1.5}.smwb-typography_caption{font-size:12px;font-weight:400;line-height:1.4}.smwb-typography_overline{font-size:12px;font-weight:600;line-height:1.4}.smwb-typography_button{font-size:14px;font-weight:500;line-height:1.75}.smwb-typography_overline,.smwb-typography_button{text-transform:uppercase;letter-spacing:.06em}.smwb-typography_color-primary{color:var(--smui-primaryColor)}.smwb-typography_color-secondary{color:var(--smui-secondaryColor)}.smwb-typography_color-error{color:var(--smui-errorColor)}.smwb-typography_color-success{color:var(--smui-successColor)}.smwb-typography_color-warning{color:var(--smui-warningColor)}.smwb-typography_color-info{color:var(--smui-infoColor)}.smwb-typography_color-textPrimary{color:var(--smui-primaryTextColor)}.smwb-typography_color-textSecondary{color:var(--smui-onSurfaceVariant)}.smwb-typography_color-disabled{color:var(--smui-disabledTextColor)}.smwb-typography_align-left{text-align:left}.smwb-typography_align-center{text-align:center}.smwb-typography_align-right{text-align:right}.smwb-typography_align-justify{text-align:justify}.smwb-typography_gutter{margin-bottom:.35em}.smwb-typography_nowrap{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.smwb-typography{margin:0;font-family:var(--smui-fontFamily, inherit);color:var(--smui-onSurfaceColor)}.smwb-typography_h1{font-size:clamp(2rem,1.5714rem + 1.9048vw,3rem);font-weight:300;line-height:1.2}.smwb-typography_h2{font-size:clamp(1.75rem,1.4286rem + 1.4286vw,2.5rem);font-weight:300;line-height:1.2}.smwb-typography_h3{font-size:clamp(1.5rem,1.2857rem + .9524vw,2rem);font-weight:400;line-height:1.25}.smwb-typography_h4{font-size:clamp(1.375rem,1.2143rem + .7143vw,1.75rem);font-weight:400;line-height:1.3}.smwb-typography_h5{font-size:clamp(1.25rem,1.1429rem + .4762vw,1.5rem);font-weight:500;line-height:1.3}.smwb-typography_h6{font-size:20px;font-weight:500;line-height:1.4}.smwb-typography_subtitle1{font-size:16px;font-weight:500;line-height:1.5}.smwb-typography_subtitle2{font-size:14px;font-weight:500;line-height:1.5}.smwb-typography_body1{font-size:16px;font-weight:400;line-height:1.5}.smwb-typography_body2{font-size:14px;font-weight:400;line-height:1.5}.smwb-typography_caption{font-size:12px;font-weight:400;line-height:1.4}.smwb-typography_overline{font-size:12px;font-weight:600;line-height:1.4;text-transform:var(--smui-font-overline-transform, uppercase);letter-spacing:var(--smui-font-overline-letter-spacing, .06em)}.smwb-typography_button{font-size:14px;font-weight:500;line-height:1.75;text-transform:var(--smui-font-button-transform, uppercase);letter-spacing:var(--smui-font-button-letter-spacing, .06em)}.smwb-typography_color-primary{color:var(--smui-primaryColor)}.smwb-typography_color-secondary{color:var(--smui-secondaryColor)}.smwb-typography_color-error{color:var(--smui-errorColor)}.smwb-typography_color-success{color:var(--smui-successColor)}.smwb-typography_color-warning{color:var(--smui-warningColor)}.smwb-typography_color-info{color:var(--smui-infoColor)}.smwb-typography_color-textPrimary{color:var(--smui-primaryTextColor)}.smwb-typography_color-textSecondary{color:var(--smui-onSurfaceVariant)}.smwb-typography_color-disabled{color:var(--smui-disabledTextColor)}.smwb-typography_align-left{text-align:left}.smwb-typography_align-center{text-align:center}.smwb-typography_align-right{text-align:right}.smwb-typography_align-justify{text-align:justify}.smwb-typography_gutter{margin-bottom:.35em}.smwb-typography_nowrap{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.smwb-typography_clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--smwb-typography-lines);line-clamp:var(--smwb-typography-lines);overflow:hidden;overflow-wrap:break-word}.smwb-typography_tabular-nums{font-variant-numeric:tabular-nums}

package/dist/assets/styles/less/connects/rt/table.entry.css

@@ -0,0 +1 @@
+.smwb-rt-table--resizer{position:absolute;right:0;top:0;height:100%;width:5px;background:#00000080;cursor:col-resize;user-select:none;touch-action:none}.smwb-rt-table--resizer.smwb-rt-table--isResizing{background:#00f;opacity:1}.smwb-head-cell .smwb-head-cell__actions:has(>.smwb-rt-table--resizer:only-child){margin-inline-start:0}@media(hover:hover){.smwb-rt-table--resizer{opacity:.5}.smwb-head-cell:hover .smwb-rt-table--resizer,*:hover>.smwb-rt-table--resizer{opacity:1}}

package/dist/assets/styles/less/tokens.entry.css

@@ -0,0 +1 @@
+:where(:root){--smui-onSurfaceVariant: #49454e;--smui-onSurfaceColor: #1c1b1f;--smui-primaryColor: #6750a4;--smui-fontFamily: "Roboto", sans-serif;--smui-pageBackground: #fff;--smui-scrollThumbColor: color-mix(in srgb, #1c1b1f 38%, transparent);--smui-surfaceBackground: #fffbfe;--smui-primaryTextColor: #000;--smui-onPrimaryColor: #fff;--smui-disabledTextColor: color-mix(in srgb, #1c1b1f 38%, transparent);--smui-outlineColor: #79747e;--smui-onSurfaceHover: color-mix(in srgb, #1c1b1f 8%, transparent);--smui-onSurfaceActive: color-mix(in srgb, #1c1b1f 12%, transparent);--smui-onSurfaceFocus: color-mix(in srgb, #1c1b1f 12%, transparent);--smui-surfaceVariant: #e7e0ec;--smui-disabledBgColor: color-mix(in srgb, #1c1b1f 12%, transparent);--smui-primaryContainer: #eaddff;--smui-onPrimaryContainer: #21005e;--smui-onPrimaryContainerHover: color-mix(in srgb, #000 2%, #eaddff);--smui-onPrimaryContainerActive: color-mix(in srgb, #000 4%, #eaddff);--smui-primaryColorHover: color-mix(in srgb, #6750a4 8%, transparent);--smui-primaryColorActive: color-mix(in srgb, #6750a4 14%, transparent);--smui-primaryColorFocus: color-mix(in srgb, #6750a4 12%, transparent);--smui-secondaryColor: #625b71;--smui-errorColor: red;--smui-successColor: #36913b;--smui-warningColor: #ed6c02;--smui-infoColor: #0288d1;--smui-onSecondaryColor: #fff;--smui-onErrorColor: #fff;--smui-onSuccessColor: #fff;--smui-onWarningColor: #fff;--smui-onInfoColor: #fff;--smui-secondaryColorHover: color-mix(in srgb, #625b71 8%, transparent);--smui-secondaryColorActive: color-mix(in srgb, #625b71 14%, transparent);--smui-secondaryColorFocus: color-mix(in srgb, #625b71 12%, transparent);--smui-errorColorHover: color-mix(in srgb, red 8%, transparent);--smui-errorColorActive: color-mix(in srgb, red 14%, transparent);--smui-errorColorFocus: color-mix(in srgb, red 12%, transparent);--smui-successColorHover: color-mix(in srgb, #36913b 8%, transparent);--smui-successColorActive: color-mix(in srgb, #36913b 14%, transparent);--smui-successColorFocus: color-mix(in srgb, #36913b 12%, transparent);--smui-warningColorHover: color-mix(in srgb, #ed6c02 8%, transparent);--smui-warningColorActive: color-mix(in srgb, #ed6c02 14%, transparent);--smui-warningColorFocus: color-mix(in srgb, #ed6c02 12%, transparent);--smui-infoColorHover: color-mix(in srgb, #0288d1 8%, transparent);--smui-infoColorActive: color-mix(in srgb, #0288d1 14%, transparent);--smui-infoColorFocus: color-mix(in srgb, #0288d1 12%, transparent);--smui-dividerColor: rgba(0, 0, 0, .12);--smui-buttonOutlinedHoverBg: color-mix(in srgb, #6750a4 8%, transparent);--smui-buttonOutlinedActiveBg: color-mix(in srgb, #6750a4 12%, transparent);--smui-buttonOutlinedFocusBg: color-mix(in srgb, #6750a4 12%, transparent);--smui-buttonContainedHoverBg: color-mix(in srgb, #fff 4%, #6750a4);--smui-buttonContainedActiveBg: color-mix(in srgb, #fff 10%, #6750a4);--smui-buttonContainedFocusBg: color-mix(in srgb, #fff 10%, #6750a4);--smui-buttonDisabledBg: color-mix(in srgb, #1c1b1f 12%, transparent);--smui-checkboxBorderColor: #1c1b1f;--smui-checkboxDisabledColor: color-mix(in srgb, #1c1b1f 38%, transparent);--smui-checkboxCheckedBg: #6750a4;--smui-toggleTrackColor: #e7e0ec;--smui-toggleThumbActiveColor: #fffbfe;--smui-toggleTrackActiveColor: #6750a4;--smui-toggleBorderColor: #79747e;--smui-chipsBg: #fffbfe;--smui-chipsIconColorHover: #6750a4;--smui-chipsIconColor: #6750a4;--smui-chipsOutlinedBorder: #79747e;--smui-chipsHoverBg: color-mix(in srgb, #1c1b1f 8%, transparent);--smui-chipsActiveBg: color-mix(in srgb, #1c1b1f 12%, transparent);--smui-chipsSelectedBg: #e8def8;--smui-menuTextColor: #1c1b1f;--smui-menuDividerColor: rgba(0, 0, 0, .12);--smui-menuDisabledTextColor: color-mix(in srgb, #1c1b1f 38%, transparent);--smui-tabIconColor: #49454e;--smui-tabColorDefault: #49454e;--smui-sliderColor: #6750a4;--smui-sliderDisabledColor: #9e9e9e;--smui-fabFocusBg: color-mix(in srgb, #000 4%, #eaddff);--smui-fabActiveBg: color-mix(in srgb, #000 4%, #eaddff);--smui-fabHoverBg: color-mix(in srgb, #000 2%, #eaddff);--smui-indicatorTrackBg: #e7e0ec;--smui-appBarBg: #fffbfe;--smui-appBarContentColor: #49454e;--smui-navItemActiveBg: color-mix(in srgb, #6750a4 8%, transparent);--smui-tableBorderColor: color-mix(in srgb, #000 12%, transparent);--smui-tooltipBg: #6d6d6d;--smui-tooltipTextColor: #fff;--smui-textFieldLabelColor: rgba(0, 0, 0, .6);--smui-textFieldLabelDisabledColor: color-mix(in srgb, #1c1b1f 38%, transparent);--smui-textFieldInputColor: rgba(0, 0, 0, .87);--smui-textFieldInputDisabledColor: color-mix(in srgb, #1c1b1f 38%, transparent);--smui-textFieldNotchedColor: rgba(0, 0, 0, .38);--smui-textFieldNotchedHoverColor: #000;--smui-textFieldNotchedDisabledColor: rgba(0, 0, 0, .26);--smui-textFieldHelperTextColor: rgba(0, 0, 0, .6);--smui-textFieldHelperTextDisabledColor: color-mix(in srgb, #1c1b1f 38%, transparent);--smui-textFieldFilledBorderColor: rgba(0, 0, 0, .42);--smui-textFieldFilledHoverBorderColor: #000;--smui-textFieldFilledDisabledBorderColor: rgba(0, 0, 0, .26);--smui-textFieldFilledBgColor: rgba(0, 0, 0, .05);--smui-textFieldFilledHoverBgColor: rgba(0, 0, 0, .07);--smui-textFieldFilledFocusedBgColor: rgba(0, 0, 0, .12);--smui-textFieldFilledDisabledBgColor: rgba(0, 0, 0, .045);--smui-selectFieldSearchMenuColor: rgba(0, 0, 0, .87);--smui-dataPickerIconDisabledColor: rgba(0, 0, 0, .26);--smui-dataPickerWeekDayColor: rgba(0, 0, 0, .6);--smui-messageBackground: color-mix(in srgb, #6750a4 10%, transparent);--smui-spacing-unit: 4px;--smui-space-xxs: 2px;--smui-space-xs: 4px;--smui-space-sm: 8px;--smui-space-md: 12px;--smui-space-lg: 16px;--smui-space-xl: 20px;--smui-space-xxl: 24px;--smui-space-xxxl: 32px;--smui-radius-xs: 2px;--smui-radius-sm: 4px;--smui-radius-md: 8px;--smui-radius-lg: 12px;--smui-radius-xl: 16px;--smui-radius-xxl: 28px;--smui-elevation-1: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12);--smui-elevation-2: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);--smui-elevation-4: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12);--smui-elevation-6: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12);--smui-elevation-8: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);--smui-elevation-12: 0 7px 8px -4px rgba(0, 0, 0, .2), 0 12px 17px 2px rgba(0, 0, 0, .14), 0 5px 22px 4px rgba(0, 0, 0, .12);--smui-elevation-24: 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12);--smui-bp-sm: 420px;--smui-bp-md: 768px;--smui-bp-lg: 1024px;--smui-bp-xl: 1200px}:where(:root[data-theme=dark]){--smui-onSurfaceVariant: #cac4d0;--smui-onSurfaceColor: #e6e1e5;--smui-primaryColor: #d0bcff;--smui-fontFamily: "Roboto", sans-serif;--smui-pageBackground: #1f1f1f;--smui-scrollThumbColor: rgba(255, 255, 255, .3);--smui-surfaceBackground: #1c1b1f;--smui-primaryTextColor: #fff;--smui-onPrimaryColor: #371e73;--smui-disabledTextColor: color-mix(in srgb, #e6e1e5 38%, transparent);--smui-outlineColor: #938f99;--smui-onSurfaceHover: color-mix(in srgb, #e6e1e5 8%, transparent);--smui-onSurfaceActive: color-mix(in srgb, #e6e1e5 12%, transparent);--smui-onSurfaceFocus: color-mix(in srgb, #e6e1e5 12%, transparent);--smui-surfaceVariant: #49454f;--smui-disabledBgColor: color-mix(in srgb, #e6e1e5 12%, transparent);--smui-primaryContainer: #4f378b;--smui-onPrimaryContainer: #eaddff;--smui-onPrimaryContainerHover: color-mix(in srgb, #fff 6%, #4f378b);--smui-onPrimaryContainerActive: color-mix(in srgb, #fff 10%, #4f378b);--smui-primaryColorHover: color-mix(in srgb, #d0bcff 8%, transparent);--smui-primaryColorActive: color-mix(in srgb, #d0bcff 14%, transparent);--smui-primaryColorFocus: color-mix(in srgb, #d0bcff 12%, transparent);--smui-dividerColor: rgba(255, 255, 255, .12);--smui-buttonOutlinedHoverBg: color-mix(in srgb, #d0bcff 8%, transparent);--smui-buttonOutlinedActiveBg: color-mix(in srgb, #d0bcff 12%, transparent);--smui-buttonOutlinedFocusBg: color-mix(in srgb, #d0bcff 12%, transparent);--smui-buttonContainedHoverBg: color-mix(in srgb, #fff 4%, #d0bcff);--smui-buttonContainedActiveBg: color-mix(in srgb, #fff 8%, #d0bcff);--smui-buttonContainedFocusBg: color-mix(in srgb, #fff 8%, #d0bcff);--smui-buttonDisabledBg: color-mix(in srgb, #e6e1e5 12%, transparent);--smui-checkboxBorderColor: #e6e1e5;--smui-checkboxDisabledColor: rgba(255, 255, 255, .3);--smui-checkboxCheckedBg: #d0bcff;--smui-toggleTrackColor: #49454f;--smui-toggleThumbActiveColor: #6750a4;--smui-toggleTrackActiveColor: #eaddff;--smui-toggleBorderColor: #938f99;--smui-chipsBg: color-mix(in srgb, #e6e1e5 8%, transparent);--smui-chipsIconColorHover: #e6e1e5;--smui-chipsIconColor: color-mix(in srgb, #e6e1e5 60%, transparent);--smui-chipsOutlinedBorder: #938f99;--smui-chipsHoverBg: color-mix(in srgb, #e6e1e5 12%, transparent);--smui-chipsActiveBg: color-mix(in srgb, #e6e1e5 16%, transparent);--smui-chipsSelectedBg: color-mix(in srgb, #e6e1e5 16%, transparent);--smui-menuTextColor: #e6e1e5;--smui-menuDividerColor: rgba(255, 255, 255, .12);--smui-menuDisabledTextColor: rgba(255, 255, 255, .3);--smui-tabIconColor: color-mix(in srgb, #fff 70%, transparent);--smui-tabColorDefault: color-mix(in srgb, #fff 70%, transparent);--smui-tableBorderColor: color-mix(in srgb, #fff 12%, transparent);--smui-sliderColor: #6750a4;--smui-sliderDisabledColor: #9e9e9e;--smui-fabFocusBg: color-mix(in srgb, #fff 10%, #4f378b);--smui-fabActiveBg: color-mix(in srgb, #fff 10%, #4f378b);--smui-fabHoverBg: color-mix(in srgb, #fff 6%, #4f378b);--smui-indicatorTrackBg: #49454f;--smui-appBarBg: #1c1b1f;--smui-appBarContentColor: #cac4d0;--smui-navItemActiveBg: transparent;--smui-tooltipBg: #fff;--smui-tooltipTextColor: #000;--smui-textFieldLabelColor: rgba(255, 255, 255, .7);--smui-textFieldLabelDisabledColor: rgba(255, 255, 255, .5);--smui-textFieldInputColor: #fff;--smui-textFieldInputDisabledColor: rgba(255, 255, 255, .5);--smui-textFieldNotchedColor: rgba(255, 255, 255, .3);--smui-textFieldNotchedHoverColor: #fff;--smui-textFieldNotchedDisabledColor: rgba(255, 255, 255, .3);--smui-textFieldHelperTextColor: rgba(255, 255, 255, .7);--smui-textFieldHelperTextDisabledColor: rgba(255, 255, 255, .5);--smui-textFieldFilledBorderColor: rgba(255, 255, 255, .7);--smui-textFieldFilledHoverBorderColor: #fff;--smui-textFieldFilledDisabledBorderColor: rgba(255, 255, 255, .5);--smui-textFieldFilledBgColor: rgba(255, 255, 255, .09);--smui-textFieldFilledHoverBgColor: rgba(255, 255, 255, .13);--smui-textFieldFilledFocusedBgColor: rgba(255, 255, 255, .13);--smui-textFieldFilledDisabledBgColor: rgba(255, 255, 255, .045);--smui-selectFieldSearchMenuColor: #fff;--smui-dataPickerIconDisabledColor: rgba(255, 255, 255, .5);--smui-dataPickerWeekDayColor: rgba(255, 255, 255, .6);--smui-messageBackground: #323232}

package/dist/chart.d.ts

@@ -0,0 +1,2 @@
+export { Chart, chartTheme, readChartPalette } from "./components/dataDisplay/chart";
+export type { ChartProps, ChartEventParams, ChartInstance, ChartModule, ChartOption, ChartPalette, } from "./components/dataDisplay/chart";

package/dist/chart.js

@@ -0,0 +1,8 @@
+import { Chart as t } from "./components/dataDisplay/chart/chart.js";
+import { chartTheme as h, readChartPalette as o } from "./components/dataDisplay/chart/chartTheme.js";
+export {
+  t as Chart,
+  h as chartTheme,
+  o as readChartPalette
+};
+//# sourceMappingURL=chart.js.map

package/dist/chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/components/base/icon/icon.d.ts

@@ -35,12 +35,16 @@ export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
      */
     color?: IconColor | (string & {});
     /**
-     * Accessible name. When provided the icon is exposed as
-     * `role="img"`; otherwise it is `aria-hidden` (decorative).
+     * Accessible name, also shown as a tooltip. A non-empty `title`,
+     * `aria-label` or `aria-labelledby` names the icon: it is exposed as
+     * `role="img"`, or with the `role` you pass. Without any of them the icon is
+     * decorative and `aria-hidden`.
      */
     title?: string;
     /** Overrides the icon source for this icon only. See {@link IconSource}. */
     source?: IconSource;
+    /** Test id of the root `<span>`; `icon` unless given. */
+    "data-testid"?: string;
 }
 export declare const Icon: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<HTMLSpanElement>>;
 export default Icon;

package/dist/components/base/icon/icon.js

@@ -1,61 +1,74 @@
-import { jsx as l } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/icon/icon.entry.css';/* empty css                                                   */
-import { forwardRef as L, useSyncExternalStore as C } from "react";
-import N from "clsx";
-import { getIcon as O } from "../../../icons/registry.js";
-import { getIconConfig as R } from "../../../icons/config.js";
-import { subscribeIcons as j } from "../../../icons/store.js";
-import { useIconSource as B } from "./iconProvider.js";
-const E = ["primary", "secondary", "error", "success", "warning", "info", "disabled"], y = /* @__PURE__ */ new Set();
-function T(r) {
-  !R().warnOnMissing || y.has(r) || (y.add(r), console.warn(
+import { jsx as c } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/icon/icon.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                   */
+import { forwardRef as N, useSyncExternalStore as O } from "react";
+import R from "clsx";
+import { getIcon as j } from "../../../icons/registry.js";
+import { getIconConfig as B } from "../../../icons/config.js";
+import { subscribeIcons as E } from "../../../icons/store.js";
+import { useIconSource as T } from "./iconProvider.js";
+const z = ["primary", "secondary", "error", "success", "warning", "info", "disabled"], S = /* @__PURE__ */ new Set();
+function A(r) {
+  !B().warnOnMissing || S.has(r) || (S.add(r), console.warn(
     `[smwb] Icon "${r}" is not registered. Register it (import { ${r} } from "@smwb/ui-react/icons") or use source="auto" to fall back to Material Symbols.`
   ));
 }
-const W = L(function({ className: S, weight: a = 400, fill: v = 0, size: n = 20, grade: I = 100, name: o, color: e = "inherit", title: i, source: _, ...u }, x) {
-  var w, b;
-  const d = B(_), g = typeof o == "string" ? o : null, m = () => {
-    var h;
-    return g === null ? null : (h = O(g)) != null ? h : null;
-  }, M = C(j, m, m), s = typeof o == "object" ? o : M, p = typeof o == "string" ? o : o.name, t = d === "google" ? "google" : s ? "smwb" : d === "smwb" ? "missing" : "google";
-  t === "missing" && T(p);
-  const f = i === void 0, $ = e && E.includes(e) ? `smwb-icon_color-${e}` : null, c = typeof n == "number" ? `${n}px` : n, k = Math.round(Math.min(3, Math.max(1, a / 200)) * 100) / 100;
-  return /* @__PURE__ */ l(
+const P = N(function({
+  className: I,
+  weight: d = 400,
+  fill: _ = 0,
+  size: n = 20,
+  grade: v = 100,
+  name: o,
+  color: i = "inherit",
+  title: a,
+  source: x,
+  "data-testid": M = "icon",
+  ...t
+}, $) {
+  var w, h, y;
+  const u = T(x), m = typeof o == "string" ? o : null, g = () => {
+    var p;
+    return m === null ? null : (p = j(m)) != null ? p : null;
+  }, k = O(E, g, g), e = typeof o == "object" ? o : k, f = typeof o == "string" ? o : o.name, s = u === "google" ? "google" : e ? "smwb" : u === "smwb" ? "missing" : "google";
+  s === "missing" && A(f);
+  const b = !(a || t["aria-label"] || t["aria-labelledby"]), L = i && z.includes(i) ? `smwb-icon_color-${i}` : null, l = typeof n == "number" ? `${n}px` : n, C = Math.round(Math.min(3, Math.max(1, d / 200)) * 100) / 100;
+  return /* @__PURE__ */ c(
     "span",
     {
-      ...u,
-      ref: x,
-      "data-testid": "icon",
-      "data-icon-source": t,
-      role: f ? void 0 : "img",
-      "aria-hidden": f ? !0 : void 0,
-      "aria-label": i,
-      title: i,
+      ...t,
+      ref: $,
+      "data-testid": M,
+      "data-icon-source": s,
+      role: (w = t.role) != null ? w : b ? void 0 : "img",
+      "aria-hidden": b ? !0 : t["aria-hidden"],
+      "aria-label": a || t["aria-label"],
+      title: a,
       style: {
-        ...u.style,
-        ...t === "google" ? { fontVariationSettings: `'FILL' ${v}, 'wght' ${a}, 'GRAD' ${I}, 'opsz' 48` } : null
+        ...t.style,
+        ...s === "google" ? { fontVariationSettings: `'FILL' ${_}, 'wght' ${d}, 'GRAD' ${v}, 'opsz' 48` } : null
       },
-      className: N("smwb-icon__wrapper", $, S),
-      children: t === "google" ? /* @__PURE__ */ l("span", { className: "material-symbols-outlined", style: { fontSize: c }, children: p }) : /* @__PURE__ */ l(
+      className: R("smwb-icon__wrapper", L, I),
+      children: s === "google" ? /* @__PURE__ */ c("span", { className: "material-symbols-outlined", style: { fontSize: l }, children: f }) : /* @__PURE__ */ c(
         "svg",
         {
           className: "smwb-icon__svg",
-          viewBox: (w = s == null ? void 0 : s.viewBox) != null ? w : "0 0 24 24",
-          style: { width: c, height: c },
+          viewBox: (h = e == null ? void 0 : e.viewBox) != null ? h : "0 0 24 24",
+          style: { width: l, height: l },
           fill: "none",
           stroke: "currentColor",
-          strokeWidth: k,
+          strokeWidth: C,
           strokeLinecap: "round",
           strokeLinejoin: "round",
           "aria-hidden": "true",
-          dangerouslySetInnerHTML: { __html: (b = s == null ? void 0 : s.body) != null ? b : "" }
+          dangerouslySetInnerHTML: { __html: (y = e == null ? void 0 : e.body) != null ? y : "" }
         }
       )
     }
   );
 });
 export {
-  W as Icon,
-  W as default
+  P as Icon,
+  P as default
 };
 //# sourceMappingURL=icon.js.map

package/dist/components/base/icon/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sources":["../../../../src/components/base/icon/icon.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, useSyncExternalStore } from \"react\";\nimport cn from \"clsx\";\nimport { getIcon } from \"../../../icons/registry\";\nimport { getIconConfig } from \"../../../icons/config\";\nimport { subscribeIcons } from \"../../../icons/store\";\nimport type { IconDefinition, IconSource } from \"../../../icons/types\";\nimport { useIconSource } from \"./iconProvider\";\n\nexport type IconColor = \"inherit\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\" | \"disabled\";\n\nconst COLOR_TOKENS = [\"primary\", \"secondary\", \"error\", \"success\", \"warning\", \"info\", \"disabled\"];\n\nconst warned = new Set<string>();\n\nfunction warnMissing(name: string): void {\n  if (!getIconConfig().warnOnMissing || warned.has(name)) return;\n  warned.add(name);\n  // eslint-disable-next-line no-console -- a missing icon is silent otherwise\n  console.warn(\n    `[smwb] Icon \"${name}\" is not registered. Register it (import { ${name} } from \"@smwb/ui-react/icons\") ` +\n      `or use source=\"auto\" to fall back to Material Symbols.`\n  );\n}\n\nexport interface IconProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Icon name — the Google Material Symbols name, e.g. `\"arrow_right_alt\"`.\n   * Lookup is forgiving: `arrowRightAlt` and `arrow-right-alt` resolve too, as\n   * do an icon's aliases.\n   *\n   * An {@link IconDefinition} may be passed instead, which skips the registry\n   * entirely and is the most bundle-friendly form:\n   *\n   * ```tsx\n   * import { arrowRightAlt } from \"@smwb/ui-react/icons\";\n   * <Icon name={arrowRightAlt} />\n   * ```\n   */\n  name: string | IconDefinition;\n  className?: string;\n  /**\n   * Material Symbols weight axis (100-700). For the smwb SVG set it maps to the\n   * stroke width: 400 → 2px, 700 → 3px, 100 → 1px.\n   */\n  weight?: number;\n  /** Material Symbols FILL axis. Not used by the smwb SVG set (it is a contour set). */\n  fill?: 0 | 1;\n  /** Pixel number or any CSS length (e.g. \"1.5rem\"). */\n  size?: number | string;\n  /** Material Symbols GRAD axis. Not used by the smwb SVG set. */\n  grade?: number;\n  /**\n   * Semantic color token; `inherit` (default) keeps the text color.\n   * Any string is accepted for backward compatibility, but only known\n   * {@link IconColor} tokens emit a color class.\n   */\n  color?: IconColor | (string & {});\n  /**\n   * Accessible name. When provided the icon is exposed as\n   * `role=\"img\"`; otherwise it is `aria-hidden` (decorative).\n   */\n  title?: string;\n  /** Overrides the icon source for this icon only. See {@link IconSource}. */\n  source?: IconSource;\n}\n\nexport const Icon = forwardRef<HTMLSpanElement, IconProps>(function Icon(\n  { className, weight = 400, fill = 0, size = 20, grade = 100, name, color = \"inherit\", title, source, ...props },\n  ref\n) {\n  const resolvedSource = useIconSource(source);\n  const lookup = typeof name === \"string\" ? name : null;\n  // Subscribing keeps late registrations (lazy chunks, Storybook HMR) from\n  // leaving a mounted icon blank. getIcon returns the same object for the same\n  // registration, so the snapshot is stable.\n  const getSnapshot = () => (lookup === null ? null : (getIcon(lookup) ?? null));\n  const registered = useSyncExternalStore(subscribeIcons, getSnapshot, getSnapshot);\n  const definition = typeof name === \"object\" ? name : registered;\n  const glyph = typeof name === \"string\" ? name : name.name;\n\n  const mode =\n    resolvedSource === \"google\" ? \"google\" : definition ? \"smwb\" : resolvedSource === \"smwb\" ? \"missing\" : \"google\";\n  if (mode === \"missing\") warnMissing(glyph);\n\n  const decorative = title === undefined;\n  const colorClass = color && COLOR_TOKENS.includes(color) ? `smwb-icon_color-${color}` : null;\n  const cssSize = typeof size === \"number\" ? `${size}px` : size;\n  const strokeWidth = Math.round(Math.min(3, Math.max(1, weight / 200)) * 100) / 100;\n\n  return (\n    <span\n      {...props}\n      ref={ref}\n      data-testid=\"icon\"\n      data-icon-source={mode}\n      role={decorative ? undefined : \"img\"}\n      aria-hidden={decorative ? true : undefined}\n      aria-label={title}\n      title={title}\n      style={{\n        ...props.style,\n        ...(mode === \"google\"\n          ? { fontVariationSettings: `'FILL' ${fill}, 'wght' ${weight}, 'GRAD' ${grade}, 'opsz' 48` }\n          : null),\n      }}\n      className={cn(\"smwb-icon__wrapper\", colorClass, className)}\n    >\n      {mode === \"google\" ? (\n        <span className=\"material-symbols-outlined\" style={{ fontSize: cssSize }}>\n          {glyph}\n        </span>\n      ) : (\n        <svg\n          className=\"smwb-icon__svg\"\n          viewBox={definition?.viewBox ?? \"0 0 24 24\"}\n          style={{ width: cssSize, height: cssSize }}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth={strokeWidth}\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          aria-hidden=\"true\"\n          dangerouslySetInnerHTML={{ __html: definition?.body ?? \"\" }}\n        />\n      )}\n    </span>\n  );\n});\n\nexport default Icon;\n"],"names":["COLOR_TOKENS","warned","warnMissing","name","getIconConfig","Icon","forwardRef","className","weight","fill","size","grade","color","title","source","props","ref","resolvedSource","useIconSource","lookup","getSnapshot","_a","getIcon","registered","useSyncExternalStore","subscribeIcons","definition","glyph","mode","decorative","colorClass","cssSize","strokeWidth","jsx","cn","_b"],"mappings":";;;;;;;;AAWA,MAAMA,IAAe,CAAC,WAAW,aAAa,SAAS,WAAW,WAAW,QAAQ,UAAU,GAEzFC,wBAAa,IAAA;AAEnB,SAASC,EAAYC,GAAoB;AACvC,EAAI,CAACC,EAAA,EAAgB,iBAAiBH,EAAO,IAAIE,CAAI,MACrDF,EAAO,IAAIE,CAAI,GAEf,QAAQ;AAAA,IACN,gBAAgBA,CAAI,8CAA8CA,CAAI;AAAA,EAAA;AAG1E;AA4CO,MAAME,IAAOC,EAAuC,SACzD,EAAE,WAAAC,GAAW,QAAAC,IAAS,KAAK,MAAAC,IAAO,GAAG,MAAAC,IAAO,IAAI,OAAAC,IAAQ,KAAK,MAAAR,GAAM,OAAAS,IAAQ,WAAW,OAAAC,GAAO,QAAAC,GAAQ,GAAGC,EAAA,GACxGC,GACA;;AACA,QAAMC,IAAiBC,EAAcJ,CAAM,GACrCK,IAAS,OAAOhB,KAAS,WAAWA,IAAO,MAI3CiB,IAAc,MAAA;;AAAO,WAAAD,MAAW,OAAO,QAAQE,IAAAC,EAAQH,CAAM,MAAd,OAAAE,IAAmB;AAAA,KAClEE,IAAaC,EAAqBC,GAAgBL,GAAaA,CAAW,GAC1EM,IAAa,OAAOvB,KAAS,WAAWA,IAAOoB,GAC/CI,IAAQ,OAAOxB,KAAS,WAAWA,IAAOA,EAAK,MAE/CyB,IACJX,MAAmB,WAAW,WAAWS,IAAa,SAAST,MAAmB,SAAS,YAAY;AACzG,EAAIW,MAAS,aAAW1B,EAAYyB,CAAK;AAEzC,QAAME,IAAahB,MAAU,QACvBiB,IAAalB,KAASZ,EAAa,SAASY,CAAK,IAAI,mBAAmBA,CAAK,KAAK,MAClFmB,IAAU,OAAOrB,KAAS,WAAW,GAAGA,CAAI,OAAOA,GACnDsB,IAAc,KAAK,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,GAAGxB,IAAS,GAAG,CAAC,IAAI,GAAG,IAAI;AAE/E,SACE,gBAAAyB;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGlB;AAAA,MACJ,KAAAC;AAAA,MACA,eAAY;AAAA,MACZ,oBAAkBY;AAAA,MAClB,MAAMC,IAAa,SAAY;AAAA,MAC/B,eAAaA,IAAa,KAAO;AAAA,MACjC,cAAYhB;AAAA,MACZ,OAAAA;AAAA,MACA,OAAO;AAAA,QACL,GAAGE,EAAM;AAAA,QACT,GAAIa,MAAS,WACT,EAAE,uBAAuB,UAAUnB,CAAI,YAAYD,CAAM,YAAYG,CAAK,cAAA,IAC1E;AAAA,MAAA;AAAA,MAEN,WAAWuB,EAAG,sBAAsBJ,GAAYvB,CAAS;AAAA,MAExD,UAAAqB,MAAS,WACR,gBAAAK,EAAC,QAAA,EAAK,WAAU,6BAA4B,OAAO,EAAE,UAAUF,EAAA,GAC5D,UAAAJ,EAAA,CACH,IAEA,gBAAAM;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,UAASZ,IAAAK,KAAA,gBAAAA,EAAY,YAAZ,OAAAL,IAAuB;AAAA,UAChC,OAAO,EAAE,OAAOU,GAAS,QAAQA,EAAA;AAAA,UACjC,MAAK;AAAA,UACL,QAAO;AAAA,UACP,aAAAC;AAAA,UACA,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,eAAY;AAAA,UACZ,yBAAyB,EAAE,SAAQG,IAAAT,KAAA,gBAAAA,EAAY,SAAZ,OAAAS,IAAoB,GAAA;AAAA,QAAG;AAAA,MAAA;AAAA,IAC5D;AAAA,EAAA;AAIR,CAAC;"}
+{"version":3,"file":"icon.js","sources":["../../../../src/components/base/icon/icon.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, useSyncExternalStore } from \"react\";\nimport cn from \"clsx\";\nimport { getIcon } from \"../../../icons/registry\";\nimport { getIconConfig } from \"../../../icons/config\";\nimport { subscribeIcons } from \"../../../icons/store\";\nimport type { IconDefinition, IconSource } from \"../../../icons/types\";\nimport { useIconSource } from \"./iconProvider\";\n\nexport type IconColor = \"inherit\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\" | \"disabled\";\n\nconst COLOR_TOKENS = [\"primary\", \"secondary\", \"error\", \"success\", \"warning\", \"info\", \"disabled\"];\n\nconst warned = new Set<string>();\n\nfunction warnMissing(name: string): void {\n  if (!getIconConfig().warnOnMissing || warned.has(name)) return;\n  warned.add(name);\n  // eslint-disable-next-line no-console -- a missing icon is silent otherwise\n  console.warn(\n    `[smwb] Icon \"${name}\" is not registered. Register it (import { ${name} } from \"@smwb/ui-react/icons\") ` +\n      `or use source=\"auto\" to fall back to Material Symbols.`\n  );\n}\n\nexport interface IconProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Icon name — the Google Material Symbols name, e.g. `\"arrow_right_alt\"`.\n   * Lookup is forgiving: `arrowRightAlt` and `arrow-right-alt` resolve too, as\n   * do an icon's aliases.\n   *\n   * An {@link IconDefinition} may be passed instead, which skips the registry\n   * entirely and is the most bundle-friendly form:\n   *\n   * ```tsx\n   * import { arrowRightAlt } from \"@smwb/ui-react/icons\";\n   * <Icon name={arrowRightAlt} />\n   * ```\n   */\n  name: string | IconDefinition;\n  className?: string;\n  /**\n   * Material Symbols weight axis (100-700). For the smwb SVG set it maps to the\n   * stroke width: 400 → 2px, 700 → 3px, 100 → 1px.\n   */\n  weight?: number;\n  /** Material Symbols FILL axis. Not used by the smwb SVG set (it is a contour set). */\n  fill?: 0 | 1;\n  /** Pixel number or any CSS length (e.g. \"1.5rem\"). */\n  size?: number | string;\n  /** Material Symbols GRAD axis. Not used by the smwb SVG set. */\n  grade?: number;\n  /**\n   * Semantic color token; `inherit` (default) keeps the text color.\n   * Any string is accepted for backward compatibility, but only known\n   * {@link IconColor} tokens emit a color class.\n   */\n  color?: IconColor | (string & {});\n  /**\n   * Accessible name, also shown as a tooltip. A non-empty `title`,\n   * `aria-label` or `aria-labelledby` names the icon: it is exposed as\n   * `role=\"img\"`, or with the `role` you pass. Without any of them the icon is\n   * decorative and `aria-hidden`.\n   */\n  title?: string;\n  /** Overrides the icon source for this icon only. See {@link IconSource}. */\n  source?: IconSource;\n  /** Test id of the root `<span>`; `icon` unless given. */\n  \"data-testid\"?: string;\n}\n\nexport const Icon = forwardRef<HTMLSpanElement, IconProps>(function Icon(\n  {\n    className,\n    weight = 400,\n    fill = 0,\n    size = 20,\n    grade = 100,\n    name,\n    color = \"inherit\",\n    title,\n    source,\n    \"data-testid\": dataTestId = \"icon\",\n    ...props\n  },\n  ref\n) {\n  const resolvedSource = useIconSource(source);\n  const lookup = typeof name === \"string\" ? name : null;\n  // Subscribing keeps late registrations (lazy chunks, Storybook HMR) from\n  // leaving a mounted icon blank. getIcon returns the same object for the same\n  // registration, so the snapshot is stable.\n  const getSnapshot = () => (lookup === null ? null : (getIcon(lookup) ?? null));\n  const registered = useSyncExternalStore(subscribeIcons, getSnapshot, getSnapshot);\n  const definition = typeof name === \"object\" ? name : registered;\n  const glyph = typeof name === \"string\" ? name : name.name;\n\n  const mode =\n    resolvedSource === \"google\" ? \"google\" : definition ? \"smwb\" : resolvedSource === \"smwb\" ? \"missing\" : \"google\";\n  if (mode === \"missing\") warnMissing(glyph);\n\n  const decorative = !(title || props[\"aria-label\"] || props[\"aria-labelledby\"]);\n  const colorClass = color && COLOR_TOKENS.includes(color) ? `smwb-icon_color-${color}` : null;\n  const cssSize = typeof size === \"number\" ? `${size}px` : size;\n  const strokeWidth = Math.round(Math.min(3, Math.max(1, weight / 200)) * 100) / 100;\n\n  return (\n    <span\n      {...props}\n      ref={ref}\n      data-testid={dataTestId}\n      data-icon-source={mode}\n      // An unnamed icon is hidden over the caller's aria-hidden. A named one is\n      // an image unless the caller gives it a role, and a title names it over\n      // the caller's aria-label.\n      role={props.role ?? (decorative ? undefined : \"img\")}\n      aria-hidden={decorative ? true : props[\"aria-hidden\"]}\n      aria-label={title || props[\"aria-label\"]}\n      title={title}\n      style={{\n        ...props.style,\n        ...(mode === \"google\"\n          ? { fontVariationSettings: `'FILL' ${fill}, 'wght' ${weight}, 'GRAD' ${grade}, 'opsz' 48` }\n          : null),\n      }}\n      className={cn(\"smwb-icon__wrapper\", colorClass, className)}\n    >\n      {mode === \"google\" ? (\n        <span className=\"material-symbols-outlined\" style={{ fontSize: cssSize }}>\n          {glyph}\n        </span>\n      ) : (\n        <svg\n          className=\"smwb-icon__svg\"\n          viewBox={definition?.viewBox ?? \"0 0 24 24\"}\n          style={{ width: cssSize, height: cssSize }}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth={strokeWidth}\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          aria-hidden=\"true\"\n          dangerouslySetInnerHTML={{ __html: definition?.body ?? \"\" }}\n        />\n      )}\n    </span>\n  );\n});\n\nexport default Icon;\n"],"names":["COLOR_TOKENS","warned","warnMissing","name","getIconConfig","Icon","forwardRef","className","weight","fill","size","grade","color","title","source","dataTestId","props","ref","resolvedSource","useIconSource","lookup","getSnapshot","_a","getIcon","registered","useSyncExternalStore","subscribeIcons","definition","glyph","mode","decorative","colorClass","cssSize","strokeWidth","jsx","cn","_b","_c"],"mappings":";;;;;;;;;AAYA,MAAMA,IAAe,CAAC,WAAW,aAAa,SAAS,WAAW,WAAW,QAAQ,UAAU,GAEzFC,wBAAa,IAAA;AAEnB,SAASC,EAAYC,GAAoB;AACvC,EAAI,CAACC,EAAA,EAAgB,iBAAiBH,EAAO,IAAIE,CAAI,MACrDF,EAAO,IAAIE,CAAI,GAEf,QAAQ;AAAA,IACN,gBAAgBA,CAAI,8CAA8CA,CAAI;AAAA,EAAA;AAG1E;AAgDO,MAAME,IAAOC,EAAuC,SACzD;AAAA,EACE,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,MAAAR;AAAA,EACA,OAAAS,IAAQ;AAAA,EACR,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,eAAeC,IAAa;AAAA,EAC5B,GAAGC;AACL,GACAC,GACA;;AACA,QAAMC,IAAiBC,EAAcL,CAAM,GACrCM,IAAS,OAAOjB,KAAS,WAAWA,IAAO,MAI3CkB,IAAc,MAAA;;AAAO,WAAAD,MAAW,OAAO,QAAQE,IAAAC,EAAQH,CAAM,MAAd,OAAAE,IAAmB;AAAA,KAClEE,IAAaC,EAAqBC,GAAgBL,GAAaA,CAAW,GAC1EM,IAAa,OAAOxB,KAAS,WAAWA,IAAOqB,GAC/CI,IAAQ,OAAOzB,KAAS,WAAWA,IAAOA,EAAK,MAE/C0B,IACJX,MAAmB,WAAW,WAAWS,IAAa,SAAST,MAAmB,SAAS,YAAY;AACzG,EAAIW,MAAS,aAAW3B,EAAY0B,CAAK;AAEzC,QAAME,IAAa,EAAEjB,KAASG,EAAM,YAAY,KAAKA,EAAM,iBAAiB,IACtEe,IAAanB,KAASZ,EAAa,SAASY,CAAK,IAAI,mBAAmBA,CAAK,KAAK,MAClFoB,IAAU,OAAOtB,KAAS,WAAW,GAAGA,CAAI,OAAOA,GACnDuB,IAAc,KAAK,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,GAAGzB,IAAS,GAAG,CAAC,IAAI,GAAG,IAAI;AAE/E,SACE,gBAAA0B;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGlB;AAAA,MACJ,KAAAC;AAAA,MACA,eAAaF;AAAA,MACb,oBAAkBc;AAAA,MAIlB,OAAMP,IAAAN,EAAM,SAAN,OAAAM,IAAeQ,IAAa,SAAY;AAAA,MAC9C,eAAaA,IAAa,KAAOd,EAAM,aAAa;AAAA,MACpD,cAAYH,KAASG,EAAM,YAAY;AAAA,MACvC,OAAAH;AAAA,MACA,OAAO;AAAA,QACL,GAAGG,EAAM;AAAA,QACT,GAAIa,MAAS,WACT,EAAE,uBAAuB,UAAUpB,CAAI,YAAYD,CAAM,YAAYG,CAAK,cAAA,IAC1E;AAAA,MAAA;AAAA,MAEN,WAAWwB,EAAG,sBAAsBJ,GAAYxB,CAAS;AAAA,MAExD,UAAAsB,MAAS,WACR,gBAAAK,EAAC,QAAA,EAAK,WAAU,6BAA4B,OAAO,EAAE,UAAUF,EAAA,GAC5D,UAAAJ,EAAA,CACH,IAEA,gBAAAM;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,UAASE,IAAAT,KAAA,gBAAAA,EAAY,YAAZ,OAAAS,IAAuB;AAAA,UAChC,OAAO,EAAE,OAAOJ,GAAS,QAAQA,EAAA;AAAA,UACjC,MAAK;AAAA,UACL,QAAO;AAAA,UACP,aAAAC;AAAA,UACA,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,eAAY;AAAA,UACZ,yBAAyB,EAAE,SAAQI,IAAAV,KAAA,gBAAAA,EAAY,SAAZ,OAAAU,IAAoB,GAAA;AAAA,QAAG;AAAA,MAAA;AAAA,IAC5D;AAAA,EAAA;AAIR,CAAC;"}

package/dist/components/base/ripple/ripple.d.ts

@@ -8,12 +8,15 @@ export interface RippleClasses {
 }
 export interface RippleProps extends React.HTMLAttributes<HTMLSpanElement> {
     actionRef: React.Ref<RippleActionsRef>;
+    /** Extra classes: `ripple` for the root, `child` for each ripple. */
     classes?: RippleClasses;
     center?: boolean;
     /** Ripple lifetime in ms. */
     duration?: number;
     /** Ripple color (any CSS color). Defaults to inherited currentColor. */
     color?: string;
+    /** Test id of the root `<span>`; `ripple` unless given. */
+    "data-testid"?: string;
 }
 /**
  * ⚠️ Для правильной работы этого эффекта, установите у компонента родителя CSS: **position: relative;**

package/dist/components/base/ripple/ripple.js

@@ -1,40 +1,56 @@
 import { jsx as R } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/ripple/ripple.entry.css';/* empty css                                                       */
-import u, { forwardRef as N } from "react";
-import b from "clsx";
-const H = N(function({ actionRef: x, className: l, classes: i, center: g, style: e, duration: f = 600, color: r, ...a }, C) {
-  const [n, c] = u.useState([]), w = u.useRef(0);
-  return u.useImperativeHandle(
-    x,
+import '../../../assets/styles/less/components/ripple/ripple.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                       */
+import r, { forwardRef as S } from "react";
+import x from "clsx";
+const H = S(function({ actionRef: b, className: T, classes: e, center: u, duration: m = 600, color: l, "data-testid": y = "ripple", ...C }, E) {
+  const [n, a] = r.useState([]), f = r.useRef(0), p = r.useRef(/* @__PURE__ */ new Set());
+  return r.useEffect(() => {
+    const i = p.current;
+    return () => {
+      i.forEach((g) => clearTimeout(g)), i.clear();
+    };
+  }, []), r.useImperativeHandle(
+    b,
     () => ({
-      onRipple(d) {
-        const t = d.currentTarget.getBoundingClientRect(), h = Math.max(t.width, t.height), p = h / 2;
-        let o, m;
-        g ? (o = t.width > t.height ? 0 : t.width / 2 - p, m = t.height > t.width ? 0 : t.height / 2 - p) : (o = d.clientX - t.left - p, m = d.clientY - t.top - p), c([
+      onRipple(i) {
+        const t = i.currentTarget.getBoundingClientRect(), d = Math.max(t.width, t.height), o = d / 2;
+        let h, c;
+        u ? (h = t.width > t.height ? 0 : t.width / 2 - o, c = t.height > t.width ? 0 : t.height / 2 - o) : (h = i.clientX - t.left - o, c = i.clientY - t.top - o), a([
           ...n,
           /* @__PURE__ */ R(
             "span",
             {
-              className: b("smwb-ripple__child", i == null ? void 0 : i.child),
+              className: x("smwb-ripple__child", e == null ? void 0 : e.child),
               style: {
-                ...e,
-                left: o,
-                top: m,
-                width: h,
-                height: h,
-                backgroundColor: r != null ? r : e == null ? void 0 : e.backgroundColor
-              },
-              ...a
+                left: h,
+                top: c,
+                width: d,
+                height: d,
+                backgroundColor: l
+              }
             },
-            w.current
+            f.current
           )
-        ]), w.current += 1, setTimeout(() => {
-          c((k) => k.slice(1));
-        }, f);
+        ]), f.current += 1;
+        const w = setTimeout(() => {
+          p.current.delete(w), a((N) => N.slice(1));
+        }, m);
+        p.current.add(w);
       }
     }),
-    [a, g, n, i == null ? void 0 : i.child, e, f, r]
-  ), /* @__PURE__ */ R("span", { ref: C, className: b("smwb-ripple", l, i == null ? void 0 : i.ripple), "data-testid": "ripple", "aria-hidden": "true", children: n });
+    [u, n, e == null ? void 0 : e.child, m, l]
+  ), /* @__PURE__ */ R(
+    "span",
+    {
+      ...C,
+      ref: E,
+      className: x("smwb-ripple", T, e == null ? void 0 : e.ripple),
+      "data-testid": y,
+      "aria-hidden": "true",
+      children: n
+    }
+  );
 });
 export {
   H as Ripple

package/dist/components/base/ripple/ripple.js.map

@@ -1 +1 @@
-{"version":3,"file":"ripple.js","sources":["../../../../src/components/base/ripple/ripple.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport cn from \"clsx\";\n\nexport interface RippleActionsRef {\n  onRipple: (event: React.MouseEvent) => void;\n}\n\nexport interface RippleClasses {\n  ripple?: string;\n  child?: string;\n}\n\nexport interface RippleProps extends React.HTMLAttributes<HTMLSpanElement> {\n  actionRef: React.Ref<RippleActionsRef>;\n  classes?: RippleClasses;\n  center?: boolean;\n  /** Ripple lifetime in ms. */\n  duration?: number;\n  /** Ripple color (any CSS color). Defaults to inherited currentColor. */\n  color?: string;\n}\n\n/**\n * ⚠️ Для правильной работы этого эффекта, установите у компонента родителя CSS: **position: relative;**\n */\n\nexport const Ripple = forwardRef<HTMLSpanElement, RippleProps>(function Ripple(\n  { actionRef, className, classes, center, style, duration = 600, color, ...rest },\n  ref\n) {\n  const [ripples, setRipples] = React.useState<React.ReactNode[]>([]);\n  const nextKey = React.useRef<number>(0);\n\n  React.useImperativeHandle(\n    actionRef,\n    () => ({\n      onRipple(event: React.MouseEvent) {\n        const target = event.currentTarget as HTMLElement;\n        const rect = target.getBoundingClientRect();\n        const diameter = Math.max(rect.width, rect.height);\n        const radius = diameter / 2;\n\n        let coordX;\n        let coordY;\n\n        if (center) {\n          coordX = rect.width > rect.height ? 0 : rect.width / 2 - radius;\n          coordY = rect.height > rect.width ? 0 : rect.height / 2 - radius;\n        } else {\n          coordX = event.clientX - rect.left - radius;\n          coordY = event.clientY - rect.top - radius;\n        }\n\n        setRipples([\n          ...ripples,\n          <span\n            key={nextKey.current}\n            className={cn(\"smwb-ripple__child\", classes?.child)}\n            style={{\n              ...style,\n              left: coordX,\n              top: coordY,\n              width: diameter,\n              height: diameter,\n              backgroundColor: color ?? style?.backgroundColor,\n            }}\n            {...rest}\n          />,\n        ]);\n\n        nextKey.current += 1;\n\n        setTimeout(() => {\n          setRipples((prevRipples) => prevRipples.slice(1));\n        }, duration);\n      },\n    }),\n    [rest, center, ripples, classes?.child, style, duration, color]\n  );\n\n  return (\n    <span ref={ref} className={cn(\"smwb-ripple\", className, classes?.ripple)} data-testid=\"ripple\" aria-hidden=\"true\">\n      {ripples}\n    </span>\n  );\n});\n"],"names":["Ripple","forwardRef","actionRef","className","classes","center","style","duration","color","rest","ref","ripples","setRipples","React","nextKey","event","rect","diameter","radius","coordX","coordY","jsx","cn","prevRipples"],"mappings":";;;;AA2BO,MAAMA,IAASC,EAAyC,SAC7D,EAAE,WAAAC,GAAW,WAAAC,GAAW,SAAAC,GAAS,QAAAC,GAAQ,OAAAC,GAAO,UAAAC,IAAW,KAAK,OAAAC,GAAO,GAAGC,EAAA,GAC1EC,GACA;AACA,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAM,SAA4B,CAAA,CAAE,GAC5DC,IAAUD,EAAM,OAAe,CAAC;AAEtC,SAAAA,EAAM;AAAA,IACJX;AAAA,IACA,OAAO;AAAA,MACL,SAASa,GAAyB;AAEhC,cAAMC,IADSD,EAAM,cACD,sBAAA,GACdE,IAAW,KAAK,IAAID,EAAK,OAAOA,EAAK,MAAM,GAC3CE,IAASD,IAAW;AAE1B,YAAIE,GACAC;AAEJ,QAAIf,KACFc,IAASH,EAAK,QAAQA,EAAK,SAAS,IAAIA,EAAK,QAAQ,IAAIE,GACzDE,IAASJ,EAAK,SAASA,EAAK,QAAQ,IAAIA,EAAK,SAAS,IAAIE,MAE1DC,IAASJ,EAAM,UAAUC,EAAK,OAAOE,GACrCE,IAASL,EAAM,UAAUC,EAAK,MAAME,IAGtCN,EAAW;AAAA,UACT,GAAGD;AAAA,UACH,gBAAAU;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAWC,EAAG,sBAAsBlB,KAAA,gBAAAA,EAAS,KAAK;AAAA,cAClD,OAAO;AAAA,gBACL,GAAGE;AAAA,gBACH,MAAMa;AAAA,gBACN,KAAKC;AAAA,gBACL,OAAOH;AAAA,gBACP,QAAQA;AAAA,gBACR,iBAAiBT,KAAA,OAAAA,IAASF,KAAA,gBAAAA,EAAO;AAAA,cAAA;AAAA,cAElC,GAAGG;AAAA,YAAA;AAAA,YAVCK,EAAQ;AAAA,UAAA;AAAA,QAWf,CACD,GAEDA,EAAQ,WAAW,GAEnB,WAAW,MAAM;AACf,UAAAF,EAAW,CAACW,MAAgBA,EAAY,MAAM,CAAC,CAAC;AAAA,QAClD,GAAGhB,CAAQ;AAAA,MACb;AAAA,IAAA;AAAA,IAEF,CAACE,GAAMJ,GAAQM,GAASP,KAAA,gBAAAA,EAAS,OAAOE,GAAOC,GAAUC,CAAK;AAAA,EAAA,GAI9D,gBAAAa,EAAC,QAAA,EAAK,KAAAX,GAAU,WAAWY,EAAG,eAAenB,GAAWC,KAAA,gBAAAA,EAAS,MAAM,GAAG,eAAY,UAAS,eAAY,QACxG,UAAAO,GACH;AAEJ,CAAC;"}
+{"version":3,"file":"ripple.js","sources":["../../../../src/components/base/ripple/ripple.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport cn from \"clsx\";\n\nexport interface RippleActionsRef {\n  onRipple: (event: React.MouseEvent) => void;\n}\n\nexport interface RippleClasses {\n  ripple?: string;\n  child?: string;\n}\n\nexport interface RippleProps extends React.HTMLAttributes<HTMLSpanElement> {\n  actionRef: React.Ref<RippleActionsRef>;\n  /** Extra classes: `ripple` for the root, `child` for each ripple. */\n  classes?: RippleClasses;\n  center?: boolean;\n  /** Ripple lifetime in ms. */\n  duration?: number;\n  /** Ripple color (any CSS color). Defaults to inherited currentColor. */\n  color?: string;\n  /** Test id of the root `<span>`; `ripple` unless given. */\n  \"data-testid\"?: string;\n}\n\n/**\n * ⚠️ Для правильной работы этого эффекта, установите у компонента родителя CSS: **position: relative;**\n */\n\nexport const Ripple = forwardRef<HTMLSpanElement, RippleProps>(function Ripple(\n  { actionRef, className, classes, center, duration = 600, color, \"data-testid\": dataTestId = \"ripple\", ...rest },\n  ref\n) {\n  const [ripples, setRipples] = React.useState<React.ReactNode[]>([]);\n  const nextKey = React.useRef<number>(0);\n  // Removal timers still pending. Unmounting clears them: one left running would\n  // set state on the unmounted Ripple, and in a test that ends first it fires\n  // after jsdom's teardown, where React's setState throws \"window is not defined\".\n  const timeouts = React.useRef(new Set<ReturnType<typeof setTimeout>>());\n\n  React.useEffect(() => {\n    const pending = timeouts.current;\n    return () => {\n      pending.forEach((timeout) => clearTimeout(timeout));\n      pending.clear();\n    };\n  }, []);\n\n  React.useImperativeHandle(\n    actionRef,\n    () => ({\n      onRipple(event: React.MouseEvent) {\n        const target = event.currentTarget as HTMLElement;\n        const rect = target.getBoundingClientRect();\n        const diameter = Math.max(rect.width, rect.height);\n        const radius = diameter / 2;\n\n        let coordX;\n        let coordY;\n\n        if (center) {\n          coordX = rect.width > rect.height ? 0 : rect.width / 2 - radius;\n          coordY = rect.height > rect.width ? 0 : rect.height / 2 - radius;\n        } else {\n          coordX = event.clientX - rect.left - radius;\n          coordY = event.clientY - rect.top - radius;\n        }\n\n        setRipples([\n          ...ripples,\n          <span\n            key={nextKey.current}\n            className={cn(\"smwb-ripple__child\", classes?.child)}\n            style={{\n              left: coordX,\n              top: coordY,\n              width: diameter,\n              height: diameter,\n              backgroundColor: color,\n            }}\n          />,\n        ]);\n\n        nextKey.current += 1;\n\n        const timeout = setTimeout(() => {\n          timeouts.current.delete(timeout);\n          setRipples((prevRipples) => prevRipples.slice(1));\n        }, duration);\n        timeouts.current.add(timeout);\n      },\n    }),\n    [center, ripples, classes?.child, duration, color]\n  );\n\n  return (\n    <span\n      {...rest}\n      ref={ref}\n      className={cn(\"smwb-ripple\", className, classes?.ripple)}\n      data-testid={dataTestId}\n      aria-hidden=\"true\"\n    >\n      {ripples}\n    </span>\n  );\n});\n"],"names":["Ripple","forwardRef","actionRef","className","classes","center","duration","color","dataTestId","rest","ref","ripples","setRipples","React","nextKey","timeouts","pending","timeout","event","rect","diameter","radius","coordX","coordY","jsx","cn","prevRipples"],"mappings":";;;;;AA+BO,MAAMA,IAASC,EAAyC,SAC7D,EAAE,WAAAC,GAAW,WAAAC,GAAW,SAAAC,GAAS,QAAAC,GAAQ,UAAAC,IAAW,KAAK,OAAAC,GAAO,eAAeC,IAAa,UAAU,GAAGC,EAAA,GACzGC,GACA;AACA,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAM,SAA4B,CAAA,CAAE,GAC5DC,IAAUD,EAAM,OAAe,CAAC,GAIhCE,IAAWF,EAAM,OAAO,oBAAI,KAAoC;AAEtE,SAAAA,EAAM,UAAU,MAAM;AACpB,UAAMG,IAAUD,EAAS;AACzB,WAAO,MAAM;AACX,MAAAC,EAAQ,QAAQ,CAACC,MAAY,aAAaA,CAAO,CAAC,GAClDD,EAAQ,MAAA;AAAA,IACV;AAAA,EACF,GAAG,CAAA,CAAE,GAELH,EAAM;AAAA,IACJX;AAAA,IACA,OAAO;AAAA,MACL,SAASgB,GAAyB;AAEhC,cAAMC,IADSD,EAAM,cACD,sBAAA,GACdE,IAAW,KAAK,IAAID,EAAK,OAAOA,EAAK,MAAM,GAC3CE,IAASD,IAAW;AAE1B,YAAIE,GACAC;AAEJ,QAAIlB,KACFiB,IAASH,EAAK,QAAQA,EAAK,SAAS,IAAIA,EAAK,QAAQ,IAAIE,GACzDE,IAASJ,EAAK,SAASA,EAAK,QAAQ,IAAIA,EAAK,SAAS,IAAIE,MAE1DC,IAASJ,EAAM,UAAUC,EAAK,OAAOE,GACrCE,IAASL,EAAM,UAAUC,EAAK,MAAME,IAGtCT,EAAW;AAAA,UACT,GAAGD;AAAA,UACH,gBAAAa;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAWC,EAAG,sBAAsBrB,KAAA,gBAAAA,EAAS,KAAK;AAAA,cAClD,OAAO;AAAA,gBACL,MAAMkB;AAAA,gBACN,KAAKC;AAAA,gBACL,OAAOH;AAAA,gBACP,QAAQA;AAAA,gBACR,iBAAiBb;AAAA,cAAA;AAAA,YACnB;AAAA,YARKO,EAAQ;AAAA,UAAA;AAAA,QASf,CACD,GAEDA,EAAQ,WAAW;AAEnB,cAAMG,IAAU,WAAW,MAAM;AAC/B,UAAAF,EAAS,QAAQ,OAAOE,CAAO,GAC/BL,EAAW,CAACc,MAAgBA,EAAY,MAAM,CAAC,CAAC;AAAA,QAClD,GAAGpB,CAAQ;AACX,QAAAS,EAAS,QAAQ,IAAIE,CAAO;AAAA,MAC9B;AAAA,IAAA;AAAA,IAEF,CAACZ,GAAQM,GAASP,KAAA,gBAAAA,EAAS,OAAOE,GAAUC,CAAK;AAAA,EAAA,GAIjD,gBAAAiB;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGf;AAAA,MACJ,KAAAC;AAAA,MACA,WAAWe,EAAG,eAAetB,GAAWC,KAAA,gBAAAA,EAAS,MAAM;AAAA,MACvD,eAAaI;AAAA,MACb,eAAY;AAAA,MAEX,UAAAG;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/components/dataDisplay/accordion/accordion.d.ts

@@ -1,7 +1,18 @@
 import React, { ReactNode } from "react";
+/**
+ * `filled` — the header is an app-bar strip on a raised panel (the original look).
+ * `outlined` — a bordered card with a flat header: for feeds of records.
+ * `plain` — no frame, a divider under each panel: for FAQ-style lists.
+ * The flat variants stretch to the container and wrap long titles.
+ */
+export type AccordionVariant = "filled" | "outlined" | "plain";
 export interface AccordionProps {
     className?: string;
-    title?: string;
+    /** Header text or markup (a date, an author, a badge…). */
+    title?: ReactNode;
+    /** Secondary line under the title. */
+    subtitle?: ReactNode;
+    variant?: AccordionVariant;
     isOpenByDefault?: boolean;
     /** Controlled open state. When set, the component is controlled. */
     open?: boolean;
@@ -12,7 +23,13 @@ export interface AccordionProps {
     id?: string;
     children?: React.ReactNode;
     startAdornment?: (isOpen: boolean) => React.ReactNode;
+    /** Rendered after the title, before the expand icon. */
+    endAdornment?: (isOpen: boolean) => React.ReactNode;
     noIcon?: boolean;
+    /** Create the content on first open instead of up front. */
+    lazy?: boolean;
+    /** Remove the content once the panel has collapsed (created again on open). */
+    unmountOnExit?: boolean;
     onToggleClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     /** Fired with the next open state on toggle. */
     onChange?: (open: boolean) => void;

package/dist/components/dataDisplay/accordion/accordion.js

@@ -1,62 +1,85 @@
-import { jsxs as _, jsx as r } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/accordion/accordion.entry.css';/* empty css                                                             */
-import { forwardRef as z, useState as H } from "react";
-import b from "clsx";
-import R from "../../base/animateHeight/animateHeight.js";
-import { Icon as S } from "../../base/icon/icon.js";
-import { useId as q } from "../../../hooks/useId.js";
-const M = z(function({
-  className: u,
-  title: w,
-  isOpenByDefault: I = !1,
-  open: n,
-  disabled: t,
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/accordion/accordion.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                             */
+import { forwardRef as J, useState as y } from "react";
+import O from "clsx";
+import K from "../../base/animateHeight/animateHeight.js";
+import { Icon as L } from "../../base/icon/icon.js";
+import { useId as M } from "../../../hooks/useId.js";
+const C = J(function({
+  className: $,
+  title: j,
+  subtitle: l,
+  variant: B = "filled",
+  isOpenByDefault: H = !1,
+  open: m,
+  disabled: s,
   icon: a,
-  id: x,
-  children: e,
-  startAdornment: s,
-  noIcon: N,
-  onToggleClick: c,
+  id: z,
+  children: c,
+  startAdornment: n,
+  endAdornment: p,
+  noIcon: P,
+  lazy: R,
+  unmountOnExit: _,
+  onToggleClick: r,
   onChange: i
-}, h) {
-  const d = n !== void 0, [v, O] = H(I), o = d ? !!n : v, m = q(x), p = `${m}-content`, f = `${m}-header`, y = b("smwb-accordion__arrow-icon", { "smwb-accordion__arrow-icon_opened": o }), j = ($) => {
-    if (t)
+}, S) {
+  const f = m !== void 0, [q, D] = y(H), o = f ? !!m : q, b = M(z), w = `${b}-content`, u = `${b}-header`, h = !!(R || _), [N, I] = y(o);
+  o && !N && I(!0);
+  const E = (t) => {
+    t === 0 && _ && !o && I(!1);
+  }, v = h ? c !== void 0 : !!c, F = O("smwb-accordion__arrow-icon", { "smwb-accordion__arrow-icon_opened": o }), G = (t) => {
+    if (s)
       return;
-    const l = !o;
-    d || O(l), i == null || i(l), c == null || c($);
+    const x = !o;
+    f || D(x), i == null || i(x), r == null || r(t);
   };
-  return /* @__PURE__ */ _("div", { ref: h, className: b("smwb-accordion", { "smwb-disabled": t }, u), "data-testid": "accordion", children: [
-    /* @__PURE__ */ _(
-      "button",
-      {
-        id: f,
-        className: "smwb-accordion__header",
-        onClick: j,
-        type: "button",
-        disabled: t,
-        "aria-expanded": o,
-        "aria-controls": e ? p : void 0,
-        children: [
-          s == null ? void 0 : s(o),
-          /* @__PURE__ */ r("span", { className: "smwb-accordion__title", children: w }),
-          !N && (a != null ? a : /* @__PURE__ */ r(S, { className: y, name: "expand_more", size: 24 }))
-        ]
-      }
-    ),
-    e && /* @__PURE__ */ r("div", { id: p, role: "region", "aria-labelledby": f, children: /* @__PURE__ */ r(
-      R,
-      {
-        height: o ? "auto" : 0,
-        animateOpacity: !0,
-        duration: 300,
-        className: "smwb-accordion__content",
-        children: e
-      }
-    ) })
-  ] });
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      ref: S,
+      className: O("smwb-accordion", `smwb-accordion_${B}`, { "smwb-disabled": s }, $),
+      "data-testid": "accordion",
+      children: [
+        /* @__PURE__ */ d(
+          "button",
+          {
+            id: u,
+            className: "smwb-accordion__header",
+            onClick: G,
+            type: "button",
+            disabled: s,
+            "aria-expanded": o,
+            "aria-controls": v ? w : void 0,
+            children: [
+              n == null ? void 0 : n(o),
+              /* @__PURE__ */ d("span", { className: "smwb-accordion__heading", children: [
+                /* @__PURE__ */ e("span", { className: "smwb-accordion__title", children: j }),
+                l ? /* @__PURE__ */ e("span", { className: "smwb-accordion__subtitle", children: l }) : null
+              ] }),
+              p ? /* @__PURE__ */ e("span", { className: "smwb-accordion__end", children: p(o) }) : null,
+              !P && (a != null ? a : /* @__PURE__ */ e(L, { className: F, name: "expand_more", size: 24 }))
+            ]
+          }
+        ),
+        v && /* @__PURE__ */ e("div", { id: w, role: "region", "aria-labelledby": u, children: /* @__PURE__ */ e(
+          K,
+          {
+            height: o ? "auto" : 0,
+            animateOpacity: !0,
+            duration: 300,
+            className: "smwb-accordion__content",
+            onHeightAnimationEnd: E,
+            children: !h || N ? c : null
+          }
+        ) })
+      ]
+    }
+  );
 });
 export {
-  M as Accordion,
-  M as default
+  C as Accordion,
+  C as default
 };
 //# sourceMappingURL=accordion.js.map