@xsolla/xui-core 0.141.1 → 0.147.1

package/index.d.ts

@@ -4098,6 +4098,82 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
             fieldGap: number;
             lineHeight: number;
         };
+        imageUploader: (size: "xl" | "lg" | "md" | "sm" | "xs") => {
+            box: number;
+            wideWidth: number;
+            padding: number;
+            gap: number;
+            iconSize: number;
+            labelFontSize: number;
+            labelLineHeight: number;
+            descriptionFontSize: number;
+            descriptionLineHeight: number;
+            errorFontSize: number;
+            errorLineHeight: number;
+            errorGap: number;
+            radius: number;
+            borderWidth: number;
+        } | {
+            box: number;
+            wideWidth: number;
+            padding: number;
+            gap: number;
+            iconSize: number;
+            labelFontSize: number;
+            labelLineHeight: number;
+            descriptionFontSize: number;
+            descriptionLineHeight: number;
+            errorFontSize: number;
+            errorLineHeight: number;
+            errorGap: number;
+            radius: number;
+            borderWidth: number;
+        } | {
+            box: number;
+            wideWidth: number;
+            padding: number;
+            gap: number;
+            iconSize: number;
+            labelFontSize: number;
+            labelLineHeight: number;
+            descriptionFontSize: number;
+            descriptionLineHeight: number;
+            errorFontSize: number;
+            errorLineHeight: number;
+            errorGap: number;
+            radius: number;
+            borderWidth: number;
+        } | {
+            box: number;
+            wideWidth: number;
+            padding: number;
+            gap: number;
+            iconSize: number;
+            labelFontSize: number;
+            labelLineHeight: number;
+            descriptionFontSize: number;
+            descriptionLineHeight: number;
+            errorFontSize: number;
+            errorLineHeight: number;
+            errorGap: number;
+            radius: number;
+            borderWidth: number;
+        } | {
+            box: number;
+            wideWidth: number;
+            padding: number;
+            gap: number;
+            iconSize: number;
+            labelFontSize: number;
+            labelLineHeight: number;
+            descriptionFontSize: number;
+            descriptionLineHeight: number;
+            errorFontSize: number;
+            errorLineHeight: number;
+            errorGap: number;
+            radius: number;
+            borderWidth: number;
+        };
         inputPin: (size: "xl" | "lg" | "md" | "sm" | "xs") => {
             size: number;
             gap: number;
@@ -4600,7 +4676,22 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
             descriptionFontSize: number;
             descriptionLineHeight: number;
         };
-        progress: (size: "xl" | "lg" | "md" | "sm" | "xs" | "xxs") => {
+        progress: (size: "xl" | "lg" | "md" | "sm" | "xs" | "xxs" | "l" | "m" | "s") => {
+            height: number;
+            labelSize: number;
+            helperSize: number;
+            gap: number;
+        } | {
+            height: number;
+            labelSize: number;
+            helperSize: number;
+            gap: number;
+        } | {
+            height: number;
+            labelSize: number;
+            helperSize: number;
+            gap: number;
+        } | {
             height: number;
             labelSize: number;
             helperSize: number;
@@ -4778,6 +4869,119 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
             portalPadding: number;
             zIndex: number;
         };
+        drawer: () => {
+            widthSm: number;
+            widthMd: number;
+            widthLg: number;
+            headerHeight: number;
+            headerPaddingX: number;
+            headerPaddingY: number;
+            headerGap: number;
+            titleFontSize: number;
+            titleLineHeight: number;
+            contentPaddingX: number;
+            footerPadding: number;
+            outerPadding: number;
+            containerRadius: number;
+            contentRadius: number;
+            stepperPadding: number;
+            stepperRadius: number;
+            stepperContentGap: number;
+            scrimColor: string;
+            animationDuration: number;
+            zIndex: number;
+        };
+        sidebar: () => {
+            widthExpanded: number;
+            widthCollapsed: number;
+            radius: number;
+            itemHeight: number;
+            iconSize: number;
+            padding: number;
+            sectionLabelHeight: number;
+            nestedItemPaddingLeft: number;
+            nestedItemRailLeft: number;
+            chevronSize: number;
+            externalIconSize: number;
+            chatBadgeSize: number;
+            itemBadgeSize: number;
+            focusOutlineWidth: number;
+            scrollbarWidth: number;
+            popoverGap: number;
+            popoverViewportPadding: number;
+            popoverMinWidth: number;
+            popoverMaxWidth: number;
+            popoverShadow: string;
+            popoverZIndex: number;
+            transitionWidth: string;
+            transitionFadeIn: string;
+            transitionFadeOut: string;
+            transitionItem: string;
+            transitionRows: string;
+        };
+        stepperB2b: () => {
+            chipSize: number;
+            chipRadius: number;
+            chipPaddingTop: number;
+            chipPaddingBottom: number;
+            chipPaddingX: number;
+            chipIconSize: number;
+            numberFontSize: number;
+            numberLineHeight: number;
+            titleFontSize: number;
+            titleLineHeight: number;
+            descriptionFontSize: number;
+            descriptionLineHeight: number;
+            captionFontSize: number;
+            captionLineHeight: number;
+            itemGap: number;
+            contentGap: number;
+            contentMinHeight: number;
+            contentWidth: number;
+            activeCardRadiusVertical: number;
+            activeCardRadiusHorizontal: number;
+            activeCardPaddingTop: number;
+            activeCardPaddingX: number;
+            activeCardPaddingYHorizontal: number;
+            activeCardPaddingLeftHorizontal: number;
+            activeCardGapHorizontal: number;
+            innerConnectorLength: number;
+            connectorSegment: number;
+            connectorCellHeight: number;
+            connectorCellWidth: number;
+            surfaceRadius: number;
+            surfacePaddingVertical: number;
+            surfacePaddingHorizontal: number;
+            horizontalItemGap: number;
+            horizontalFirstItemWidth: number;
+            horizontalItemWidth: number;
+            horizontalConnectorSegment: number;
+            horizontalConnectorGap: number;
+            simpleCardPadding: number;
+            simpleCardRadius: number;
+            simpleCardGap: number;
+            simpleItemGap: number;
+            simpleHorizontalCellWidth: number;
+            simpleHorizontalStubLength: number;
+        };
+        collapsibleB2b: () => {
+            triggerPadding: number;
+            triggerGap: number;
+            triggerMinHeight: number;
+            surfaceRadius: number;
+            cellRadius: number;
+            iconSlotSize: number;
+            iconSlotRadius: number;
+            chevronSize: number;
+            trailingGap: number;
+            textGap: number;
+            titleFontSize: number;
+            titleLineHeight: number;
+            captionFontSize: number;
+            captionLineHeight: number;
+            panelPadding: number;
+            accordionItemGap: number;
+        };
         toast: () => {
             minHeight: number;
             paddingHorizontal: number;
@@ -6312,6 +6516,82 @@ declare const useResolvedTheme: (overrides?: ThemeOverrideProps) => {
                 fieldGap: number;
                 lineHeight: number;
             };
+            imageUploader: (size: "xl" | "lg" | "md" | "sm" | "xs") => {
+                box: number;
+                wideWidth: number;
+                padding: number;
+                gap: number;
+                iconSize: number;
+                labelFontSize: number;
+                labelLineHeight: number;
+                descriptionFontSize: number;
+                descriptionLineHeight: number;
+                errorFontSize: number;
+                errorLineHeight: number;
+                errorGap: number;
+                radius: number;
+                borderWidth: number;
+            } | {
+                box: number;
+                wideWidth: number;
+                padding: number;
+                gap: number;
+                iconSize: number;
+                labelFontSize: number;
+                labelLineHeight: number;
+                descriptionFontSize: number;
+                descriptionLineHeight: number;
+                errorFontSize: number;
+                errorLineHeight: number;
+                errorGap: number;
+                radius: number;
+                borderWidth: number;
+            } | {
+                box: number;
+                wideWidth: number;
+                padding: number;
+                gap: number;
+                iconSize: number;
+                labelFontSize: number;
+                labelLineHeight: number;
+                descriptionFontSize: number;
+                descriptionLineHeight: number;
+                errorFontSize: number;
+                errorLineHeight: number;
+                errorGap: number;
+                radius: number;
+                borderWidth: number;
+            } | {
+                box: number;
+                wideWidth: number;
+                padding: number;
+                gap: number;
+                iconSize: number;
+                labelFontSize: number;
+                labelLineHeight: number;
+                descriptionFontSize: number;
+                descriptionLineHeight: number;
+                errorFontSize: number;
+                errorLineHeight: number;
+                errorGap: number;
+                radius: number;
+                borderWidth: number;
+            } | {
+                box: number;
+                wideWidth: number;
+                padding: number;
+                gap: number;
+                iconSize: number;
+                labelFontSize: number;
+                labelLineHeight: number;
+                descriptionFontSize: number;
+                descriptionLineHeight: number;
+                errorFontSize: number;
+                errorLineHeight: number;
+                errorGap: number;
+                radius: number;
+                borderWidth: number;
+            };
             inputPin: (size: "xl" | "lg" | "md" | "sm" | "xs") => {
                 size: number;
                 gap: number;
@@ -6814,7 +7094,22 @@ declare const useResolvedTheme: (overrides?: ThemeOverrideProps) => {
                 descriptionFontSize: number;
                 descriptionLineHeight: number;
             };
-            progress: (size: "xl" | "lg" | "md" | "sm" | "xs" | "xxs") => {
+            progress: (size: "xl" | "lg" | "md" | "sm" | "xs" | "xxs" | "l" | "m" | "s") => {
+                height: number;
+                labelSize: number;
+                helperSize: number;
+                gap: number;
+            } | {
+                height: number;
+                labelSize: number;
+                helperSize: number;
+                gap: number;
+            } | {
+                height: number;
+                labelSize: number;
+                helperSize: number;
+                gap: number;
+            } | {
                 height: number;
                 labelSize: number;
                 helperSize: number;
@@ -6992,6 +7287,119 @@ declare const useResolvedTheme: (overrides?: ThemeOverrideProps) => {
                 portalPadding: number;
                 zIndex: number;
             };
+            drawer: () => {
+                widthSm: number;
+                widthMd: number;
+                widthLg: number;
+                headerHeight: number;
+                headerPaddingX: number;
+                headerPaddingY: number;
+                headerGap: number;
+                titleFontSize: number;
+                titleLineHeight: number;
+                contentPaddingX: number;
+                footerPadding: number;
+                outerPadding: number;
+                containerRadius: number;
+                contentRadius: number;
+                stepperPadding: number;
+                stepperRadius: number;
+                stepperContentGap: number;
+                scrimColor: string;
+                animationDuration: number;
+                zIndex: number;
+            };
+            sidebar: () => {
+                widthExpanded: number;
+                widthCollapsed: number;
+                radius: number;
+                itemHeight: number;
+                iconSize: number;
+                padding: number;
+                sectionLabelHeight: number;
+                nestedItemPaddingLeft: number;
+                nestedItemRailLeft: number;
+                chevronSize: number;
+                externalIconSize: number;
+                chatBadgeSize: number;
+                itemBadgeSize: number;
+                focusOutlineWidth: number;
+                scrollbarWidth: number;
+                popoverGap: number;
+                popoverViewportPadding: number;
+                popoverMinWidth: number;
+                popoverMaxWidth: number;
+                popoverShadow: string;
+                popoverZIndex: number;
+                transitionWidth: string;
+                transitionFadeIn: string;
+                transitionFadeOut: string;
+                transitionItem: string;
+                transitionRows: string;
+            };
+            stepperB2b: () => {
+                chipSize: number;
+                chipRadius: number;
+                chipPaddingTop: number;
+                chipPaddingBottom: number;
+                chipPaddingX: number;
+                chipIconSize: number;
+                numberFontSize: number;
+                numberLineHeight: number;
+                titleFontSize: number;
+                titleLineHeight: number;
+                descriptionFontSize: number;
+                descriptionLineHeight: number;
+                captionFontSize: number;
+                captionLineHeight: number;
+                itemGap: number;
+                contentGap: number;
+                contentMinHeight: number;
+                contentWidth: number;
+                activeCardRadiusVertical: number;
+                activeCardRadiusHorizontal: number;
+                activeCardPaddingTop: number;
+                activeCardPaddingX: number;
+                activeCardPaddingYHorizontal: number;
+                activeCardPaddingLeftHorizontal: number;
+                activeCardGapHorizontal: number;
+                innerConnectorLength: number;
+                connectorSegment: number;
+                connectorCellHeight: number;
+                connectorCellWidth: number;
+                surfaceRadius: number;
+                surfacePaddingVertical: number;
+                surfacePaddingHorizontal: number;
+                horizontalItemGap: number;
+                horizontalFirstItemWidth: number;
+                horizontalItemWidth: number;
+                horizontalConnectorSegment: number;
+                horizontalConnectorGap: number;
+                simpleCardPadding: number;
+                simpleCardRadius: number;
+                simpleCardGap: number;
+                simpleItemGap: number;
+                simpleHorizontalCellWidth: number;
+                simpleHorizontalStubLength: number;
+            };
+            collapsibleB2b: () => {
+                triggerPadding: number;
+                triggerGap: number;
+                triggerMinHeight: number;
+                surfaceRadius: number;
+                cellRadius: number;
+                iconSlotSize: number;
+                iconSlotRadius: number;
+                chevronSize: number;
+                trailingGap: number;
+                textGap: number;
+                titleFontSize: number;
+                titleLineHeight: number;
+                captionFontSize: number;
+                captionLineHeight: number;
+                panelPadding: number;
+                accordionItemGap: number;
+            };
             toast: () => {
                 minHeight: number;
                 paddingHorizontal: number;

package/index.js

@@ -2422,6 +2422,91 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
         };
         return configs[size];
       },
+      imageUploader: (size) => {
+        const configs = {
+          xl: {
+            box: 200,
+            wideWidth: 440,
+            padding: 14,
+            gap: 10,
+            iconSize: 32,
+            labelFontSize: 20,
+            labelLineHeight: 22,
+            descriptionFontSize: 20,
+            descriptionLineHeight: 22,
+            errorFontSize: 16,
+            errorLineHeight: 18,
+            errorGap: 8,
+            radius: 8,
+            borderWidth: 1
+          },
+          lg: {
+            box: 168,
+            wideWidth: 440,
+            padding: 14,
+            gap: 10,
+            iconSize: 24,
+            labelFontSize: 18,
+            labelLineHeight: 24,
+            descriptionFontSize: 18,
+            descriptionLineHeight: 20,
+            errorFontSize: 16,
+            errorLineHeight: 18,
+            errorGap: 8,
+            radius: 8,
+            borderWidth: 1
+          },
+          md: {
+            box: 136,
+            wideWidth: 400,
+            padding: 12,
+            gap: 8,
+            iconSize: 24,
+            labelFontSize: 16,
+            labelLineHeight: 20,
+            descriptionFontSize: 14,
+            descriptionLineHeight: 16,
+            errorFontSize: 14,
+            errorLineHeight: 16,
+            errorGap: 6,
+            radius: 8,
+            borderWidth: 1
+          },
+          sm: {
+            box: 104,
+            wideWidth: 320,
+            padding: 10,
+            gap: 6,
+            iconSize: 18,
+            labelFontSize: 14,
+            labelLineHeight: 18,
+            descriptionFontSize: 14,
+            descriptionLineHeight: 18,
+            errorFontSize: 12,
+            errorLineHeight: 14,
+            errorGap: 6,
+            radius: 8,
+            borderWidth: 1
+          },
+          xs: {
+            box: 72,
+            wideWidth: 240,
+            padding: 8,
+            gap: 4,
+            iconSize: 18,
+            labelFontSize: 12,
+            labelLineHeight: 16,
+            descriptionFontSize: 12,
+            descriptionLineHeight: 16,
+            errorFontSize: 11,
+            errorLineHeight: 13,
+            errorGap: 4,
+            radius: 8,
+            borderWidth: 1
+          }
+        };
+        return configs[size];
+      },
       inputPin: (size) => {
         const configs = {
           xl: {
@@ -2964,7 +3049,10 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
           md: { height: 6, labelSize: 12, helperSize: 12, gap: 6 },
           sm: { height: 4, labelSize: 12, helperSize: 12, gap: 4 },
           xs: { height: 2, labelSize: 10, helperSize: 10, gap: 2 },
-          xxs: { height: 2, labelSize: 10, helperSize: 10, gap: 2 }
+          xxs: { height: 2, labelSize: 10, helperSize: 10, gap: 2 },
+          l: { height: 8, labelSize: 16, helperSize: 14, gap: 10 },
+          m: { height: 6, labelSize: 14, helperSize: 12, gap: 8 },
+          s: { height: 4, labelSize: 12, helperSize: 12, gap: 6 }
         };
         return configs[size];
       },
@@ -3105,6 +3193,126 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
           zIndex: 1e3
         };
       },
+      drawer: () => ({
+        // Sizing values from Figma design: B2B Components Library node-id=8291-103845
+        widthSm: 480,
+        widthMd: 620,
+        widthLg: 1056,
+        headerHeight: 80,
+        headerPaddingX: 32,
+        headerPaddingY: 24,
+        headerGap: 24,
+        titleFontSize: 18,
+        titleLineHeight: 24,
+        contentPaddingX: 32,
+        footerPadding: 16,
+        outerPadding: 8,
+        containerRadius: 4,
+        contentRadius: 8,
+        stepperPadding: 16,
+        stepperRadius: 8,
+        stepperContentGap: 8,
+        scrimColor: "rgba(0, 0, 0, 0.75)",
+        animationDuration: 300,
+        zIndex: 1e3
+      }),
+      sidebar: () => ({
+        // Sizing values from Figma design: B2B Components Library
+        widthExpanded: 280,
+        widthCollapsed: 48,
+        radius: 4,
+        itemHeight: 32,
+        iconSize: 18,
+        padding: 8,
+        sectionLabelHeight: 20,
+        // Aligns nested item text with parent label (padding 8 + icon 18 + gap 8 = 34)
+        // and centers the rail under the parent icon (padding 8 + iconSize/2 = 17).
+        nestedItemPaddingLeft: 34,
+        nestedItemRailLeft: 17,
+        chevronSize: 14,
+        externalIconSize: 18,
+        chatBadgeSize: 6,
+        itemBadgeSize: 4,
+        focusOutlineWidth: 2,
+        scrollbarWidth: 4,
+        popoverGap: 12,
+        popoverViewportPadding: 8,
+        popoverMinWidth: 180,
+        popoverMaxWidth: 240,
+        popoverShadow: "0 2px 25px rgba(7, 7, 8, 0.15)",
+        popoverZIndex: 1e3,
+        transitionWidth: "0.25s ease-in-out",
+        transitionFadeIn: "opacity 0.15s ease-in-out 0.1s",
+        transitionFadeOut: "opacity 0.1s ease-in-out",
+        transitionItem: "background-color 0.15s ease-in-out, color 0.15s ease-in-out",
+        transitionRows: "grid-template-rows 0.25s ease-in-out"
+      }),
+      stepperB2b: () => ({
+        // Sizing values from Figma design: B2B Components Library
+        // variant grid node-id=10999-17988, state grid node-id=10259-5501
+        chipSize: 32,
+        chipRadius: 2,
+        chipPaddingTop: 5,
+        chipPaddingBottom: 4,
+        chipPaddingX: 4,
+        chipIconSize: 16,
+        numberFontSize: 18,
+        numberLineHeight: 24,
+        titleFontSize: 16,
+        titleLineHeight: 20,
+        descriptionFontSize: 14,
+        descriptionLineHeight: 20,
+        captionFontSize: 12,
+        captionLineHeight: 16,
+        itemGap: 12,
+        contentGap: 4,
+        contentMinHeight: 32,
+        contentWidth: 128,
+        activeCardRadiusVertical: 4,
+        activeCardRadiusHorizontal: 6,
+        activeCardPaddingTop: 24,
+        activeCardPaddingX: 24,
+        activeCardPaddingYHorizontal: 12,
+        activeCardPaddingLeftHorizontal: 12,
+        activeCardGapHorizontal: 8,
+        innerConnectorLength: 48,
+        connectorSegment: 24,
+        connectorCellHeight: 24,
+        connectorCellWidth: 80,
+        surfaceRadius: 8,
+        surfacePaddingVertical: 16,
+        surfacePaddingHorizontal: 8,
+        horizontalItemGap: 16,
+        horizontalFirstItemWidth: 220,
+        horizontalItemWidth: 236,
+        horizontalConnectorSegment: 32,
+        horizontalConnectorGap: 12,
+        simpleCardPadding: 12,
+        simpleCardRadius: 4,
+        simpleCardGap: 4,
+        simpleItemGap: 4,
+        simpleHorizontalCellWidth: 56,
+        simpleHorizontalStubLength: 8
+      }),
+      collapsibleB2b: () => ({
+        // Sizing values from Figma design: B2B Components Library node-id=10469-6509
+        triggerPadding: 16,
+        triggerGap: 12,
+        triggerMinHeight: 56,
+        surfaceRadius: 8,
+        cellRadius: 4,
+        iconSlotSize: 32,
+        iconSlotRadius: 4,
+        chevronSize: 24,
+        trailingGap: 8,
+        textGap: 2,
+        titleFontSize: 16,
+        titleLineHeight: 20,
+        captionFontSize: 12,
+        captionLineHeight: 18,
+        panelPadding: 16,
+        accordionItemGap: 8
+      }),
       toast: () => {
         return {
           minHeight: 64,