@sybilion/uilib 1.3.92 → 1.3.93

package/dist/esm/components/ui/Page/PageTabs/PageTabs.js

@@ -15,8 +15,8 @@ function hasTabPanelContent(content) {
         return false;
     return true;
 }
-function PageTabs({ className, contentClassName, innerClassName, scrollbarClassName, items, tabsListProps, variant = 'link', ...props }) {
-    return (jsxs(Tabs, { className: cn(S.root, S[`variant-${variant}`], className), variant: variant, ...props, children: [jsx(TabsList, { ...tabsListProps, className: cn(S.list, tabsListProps?.withPaddings && S.withPaddings), children: jsx(PageXScroll, { size: "sm", scrollbarClassName: cn(S.scrollbar, scrollbarClassName), innerClassName: cn(innerClassName, S.listInner), children: items.map((item, index) => (jsx(TabsTrigger, { value: item.value, children: item.label }, item.key ?? `${item.value}-${index}`))) }) }), items.map(item => hasTabPanelContent(item.content) ? (jsx(TabsContent, { value: item.value, className: cn(S.content, contentClassName), children: item.content }, item.value)) : null)] }));
+function PageTabs({ className, contentClassName, innerClassName, scrollbarClassName, items, tabsListProps, variant = 'link', scrollProps, ...props }) {
+    return (jsxs(Tabs, { className: cn(S.root, S[`variant-${variant}`], className), variant: variant, ...props, children: [jsx(TabsList, { ...tabsListProps, className: cn(S.list, tabsListProps?.withPaddings && S.withPaddings), children: jsx(PageXScroll, { size: "sm", ...scrollProps, scrollbarClassName: cn(S.scrollbar, scrollbarClassName), innerClassName: cn(S.listInner, innerClassName), children: items.map((item, index) => (jsx(TabsTrigger, { value: item.value, children: item.label }, item.key ?? `${item.value}-${index}`))) }) }), items.map(item => hasTabPanelContent(item.content) ? (jsx(TabsContent, { value: item.value, className: cn(S.content, contentClassName), children: item.content }, item.value)) : null)] }));
 }
 
 export { PageTabs };

package/dist/esm/components/ui/Page/PageXScroll/PageXScroll.js

@@ -1,15 +1,15 @@
 import { jsx } from 'react/jsx-runtime';
-import cn from 'classnames';
 import { useState, useEffect } from 'react';
-import { Scroll } from '@homecode/ui';
 import S from './PageXScroll.styl.js';
+import { Scroll } from '@homecode/ui';
+import cn from 'classnames';
 
 const scrollSizeMap = {
     sm: 's',
     md: 'm',
     lg: 'l',
 };
-function PageXScroll({ children, className, innerClassName, scrollbarClassName, fullWidth = false, size = 'md', ...props }) {
+function PageXScroll({ children, className, innerClassName, scrollbarClassName, fullWidth = false, size = 'md', scrollbarOffset, ...props }) {
     const [pageXPadding, setPageXPadding] = useState(24); // Default fallback
     useEffect(() => {
         if (typeof window !== 'undefined') {
@@ -25,8 +25,8 @@ function PageXScroll({ children, className, innerClassName, scrollbarClassName,
     }, []);
     return (jsx(Scroll, { x: true, size: scrollSizeMap[size], fadeSize: "xl", className: cn(className, S.root, fullWidth && S.fullWidth), innerClassName: cn(innerClassName, S.inner), xScrollbarClassName: scrollbarClassName, offset: {
             x: {
-                before: pageXPadding,
-                after: pageXPadding,
+                before: pageXPadding + (scrollbarOffset?.x?.before ?? 0),
+                after: pageXPadding + (scrollbarOffset?.x?.after ?? 0),
             },
         }, autoHide: true, ...props, children: children }));
 }

package/dist/esm/types/src/components/ui/Page/PageTabs/PageTabs.d.ts

@@ -1,3 +1,4 @@
+import { PageXScrollProps } from '#uilib/components/ui/Page/PageXScroll/PageXScroll';
 import { TabsListProps, TabsProps, type TabsVariant } from '#uilib/components/ui/Tabs';
 export type PageTabsItem = {
     value: string;
@@ -6,13 +7,14 @@ export type PageTabsItem = {
     /** React list key when multiple items may share `value`. */
     key?: string;
 };
-export declare function PageTabs({ className, contentClassName, innerClassName, scrollbarClassName, items, tabsListProps, variant, ...props }: {
+export declare function PageTabs({ className, contentClassName, innerClassName, scrollbarClassName, items, tabsListProps, variant, scrollProps, ...props }: {
     items: PageTabsItem[];
     tabsListProps?: TabsListProps & {
         fullWidth?: boolean;
         withPaddings?: boolean;
     };
     variant?: TabsVariant;
+    scrollProps?: Partial<PageXScrollProps>;
 } & TabsProps & {
     contentClassName?: string;
     innerClassName?: string;

package/dist/esm/types/src/components/ui/Page/PageXScroll/PageXScroll.d.ts

@@ -1,11 +1,16 @@
 import { Scroll } from '@homecode/ui';
-interface PageXScrollProps extends Omit<React.ComponentProps<typeof Scroll>, 'size'> {
+export interface PageXScrollProps extends Omit<React.ComponentProps<typeof Scroll>, 'size'> {
     size?: 'sm' | 'md' | 'lg';
     children: React.ReactNode;
     className?: string;
     innerClassName?: string;
     scrollbarClassName?: string;
     fullWidth?: boolean;
+    scrollbarOffset?: {
+        x?: {
+            before?: number;
+            after?: number;
+        };
+    };
 }
-export declare function PageXScroll({ children, className, innerClassName, scrollbarClassName, fullWidth, size, ...props }: PageXScrollProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function PageXScroll({ children, className, innerClassName, scrollbarClassName, fullWidth, size, scrollbarOffset, ...props }: PageXScrollProps): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.3.92",
+  "version": "1.3.93",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",

package/src/components/ui/Page/PageTabs/PageTabs.tsx

@@ -1,6 +1,9 @@
 import cn from 'classnames';
 
-import { PageXScroll } from '#uilib/components/ui/Page/PageXScroll/PageXScroll';
+import {
+  PageXScroll,
+  PageXScrollProps,
+} from '#uilib/components/ui/Page/PageXScroll/PageXScroll';
 import {
   Tabs,
   TabsContent,
@@ -37,6 +40,7 @@ export function PageTabs({
   items,
   tabsListProps,
   variant = 'link',
+  scrollProps,
   ...props
 }: {
   items: PageTabsItem[];
@@ -45,6 +49,7 @@ export function PageTabs({
     withPaddings?: boolean;
   };
   variant?: TabsVariant;
+  scrollProps?: Partial<PageXScrollProps>;
 } & TabsProps & {
     contentClassName?: string;
     innerClassName?: string;
@@ -62,8 +67,9 @@ export function PageTabs({
       >
         <PageXScroll
           size="sm"
+          {...scrollProps}
           scrollbarClassName={cn(S.scrollbar, scrollbarClassName)}
-          innerClassName={cn(innerClassName, S.listInner)}
+          innerClassName={cn(S.listInner, innerClassName)}
         >
           {items.map((item, index) => (
             <TabsTrigger

package/src/components/ui/Page/PageXScroll/PageXScroll.tsx

@@ -1,9 +1,8 @@
-import cn from 'classnames';
 import { useEffect, useState } from 'react';
 
-import { Scroll } from '@homecode/ui';
-
 import S from './PageXScroll.styl';
+import { Scroll } from '@homecode/ui';
+import cn from 'classnames';
 
 const scrollSizeMap = {
   sm: 's',
@@ -11,7 +10,7 @@ const scrollSizeMap = {
   lg: 'l',
 } as const;
 
-interface PageXScrollProps extends Omit<
+export interface PageXScrollProps extends Omit<
   React.ComponentProps<typeof Scroll>,
   'size'
 > {
@@ -21,6 +20,12 @@ interface PageXScrollProps extends Omit<
   innerClassName?: string;
   scrollbarClassName?: string;
   fullWidth?: boolean;
+  scrollbarOffset?: {
+    x?: {
+      before?: number;
+      after?: number;
+    };
+  };
 }
 
 export function PageXScroll({
@@ -30,6 +35,7 @@ export function PageXScroll({
   scrollbarClassName,
   fullWidth = false,
   size = 'md',
+  scrollbarOffset,
   ...props
 }: PageXScrollProps) {
   const [pageXPadding, setPageXPadding] = useState(24); // Default fallback
@@ -57,8 +63,8 @@ export function PageXScroll({
       xScrollbarClassName={scrollbarClassName}
       offset={{
         x: {
-          before: pageXPadding,
-          after: pageXPadding,
+          before: pageXPadding + (scrollbarOffset?.x?.before ?? 0),
+          after: pageXPadding + (scrollbarOffset?.x?.after ?? 0),
         },
       }}
       autoHide