feat(Tabs): styling

.changeset/tabs-styling-props.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": minor
+---
+
+Add styling props to Tabs component: `tabListStyles`, `tabStyles`, and `tabPanelStyles` for customizing the tab list container, individual tabs, and tab panels respectively. Per-tab and per-panel styles can override these defaults.

src/components/navigation/Tabs/TabButton.tsx

@@ -171,6 +171,7 @@ export function TabButton({ item, tabData, isLastTab }: TabButtonProps) {
     onDelete,
     dragState,
     dropState,
+    tabStyles: parentTabStyles,
     editingKey,
     editValue,
     setEditValue,
@@ -497,10 +498,18 @@ export function TabButton({ item, tabData, isLastTab }: TabButtonProps) {
     onAction: _onAction,
     qa,
     qaVal,
-    styles,
+    styles: tabSpecificStyles,
     ...itemStyleProps
   } = tabData;
 
+  // Merge parent tabStyles with tab-specific styles (tab-specific overrides parent)
+  const effectiveStyles = useMemo(() => {
+    if (!parentTabStyles && !tabSpecificStyles) return undefined;
+    if (!parentTabStyles) return tabSpecificStyles;
+    if (!tabSpecificStyles) return parentTabStyles;
+    return { ...parentTabStyles, ...tabSpecificStyles };
+  }, [parentTabStyles, tabSpecificStyles]);
+
   // Use the hook's targetRef when context menu is enabled
   const effectiveContainerRef =
     effectiveContextMenu && processedMenu
@@ -544,7 +553,7 @@ export function TabButton({ item, tabData, isLastTab }: TabButtonProps) {
         ref={ref}
         qa={qa ?? `Tab-${String(item.key)}`}
         qaVal={qaVal}
-        styles={styles}
+        styles={effectiveStyles}
         mods={mods}
         isSelected={isActive}
         isDisabled={isDisabled}

src/components/navigation/Tabs/TabPanel.tsx

@@ -40,6 +40,7 @@ export interface TabPanelRendererProps {
   tabPrerender?: boolean;
   tabKeepMounted?: boolean;
   visitedKeys: Set<string>;
+  defaultPanelStyles?: Styles;
   panelStyles?: Styles;
   qa?: string;
   qaVal?: string;
@@ -57,6 +58,7 @@ export function TabPanelRenderer({
   tabPrerender,
   tabKeepMounted,
   visitedKeys,
+  defaultPanelStyles,
   panelStyles,
   qa,
   qaVal,
@@ -74,6 +76,14 @@ export function TabPanelRenderer({
   const effectivePrerender = tabPrerender ?? prerender;
   const effectiveKeepMounted = tabKeepMounted ?? keepMounted;
 
+  // Merge default panel styles with panel-specific styles (panel-specific overrides default)
+  const effectiveStyles = useMemo(() => {
+    if (!defaultPanelStyles && !panelStyles) return undefined;
+    if (!defaultPanelStyles) return panelStyles;
+    if (!panelStyles) return defaultPanelStyles;
+    return { ...defaultPanelStyles, ...panelStyles };
+  }, [defaultPanelStyles, panelStyles]);
+
   // Determine if panel should render
   if (
     !shouldRenderPanel(
@@ -92,7 +102,7 @@ export function TabPanelRenderer({
       ref={ref}
       qa={qa ?? 'TabPanel'}
       qaVal={qaVal ?? String(tabKey)}
-      styles={panelStyles}
+      styles={effectiveStyles}
       style={{
         display: isActive ? 'contents' : 'none',
       }}
@@ -115,6 +125,7 @@ export interface CachedPanelRendererProps {
   prerender: boolean;
   keepMounted: boolean;
   visitedKeys: Set<string>;
+  defaultPanelStyles?: Styles;
 }
 
 /**
@@ -138,6 +149,7 @@ export function CachedPanelRenderer({
   prerender,
   keepMounted,
   visitedKeys,
+  defaultPanelStyles,
 }: CachedPanelRendererProps) {
   // Cache for rendered content - stores { content, cacheKey } per panel
   const contentCacheRef = useRef<
@@ -254,6 +266,7 @@ export function CachedPanelRenderer({
             tabPrerender={tabPrerender}
             tabKeepMounted={tabKeepMounted}
             visitedKeys={visitedKeys}
+            defaultPanelStyles={defaultPanelStyles}
             panelStyles={explicitPanel?.styles}
             qa={explicitPanel?.qa}
             qaVal={explicitPanel?.qaVal}

src/components/navigation/Tabs/Tabs.tsx

@@ -156,11 +156,21 @@ function TabsComponent(
     showScrollArrows = false,
     tabPickerPosition = 'suffix',
     scrollArrowsPosition = 'suffix',
+    tabListStyles,
+    tabStyles,
+    tabPanelStyles,
     ...otherProps
   } = props;
 
-  // Extract outer styles
-  const combinedStyles = extractStyles(otherProps, OUTER_STYLES);
+  // Extract outer styles and merge with tabListStyles for Container sub-element
+  const baseStyles = extractStyles(otherProps, OUTER_STYLES);
+  const combinedStyles = useMemo(() => {
+    if (!tabListStyles) return baseStyles;
+    return {
+      ...baseStyles,
+      Container: tabListStyles,
+    };
+  }, [baseStyles, tabListStyles]);
 
   // DOM element refs
   const listRef = useRef<HTMLDivElement>(null);
@@ -458,6 +468,7 @@ function TabsComponent(
       contextMenu: parentContextMenu,
       onDelete,
       onAction: parentOnAction,
+      tabStyles,
       editingKey,
       editValue,
       setEditValue,
@@ -477,6 +488,7 @@ function TabsComponent(
       parentContextMenu,
       onDelete,
       parentOnAction,
+      tabStyles,
       editingKey,
       editValue,
       setEditValue,
@@ -653,6 +665,7 @@ function TabsComponent(
           prerender={prerender}
           keepMounted={keepMounted}
           visitedKeys={visitedKeysRef.current}
+          defaultPanelStyles={tabPanelStyles}
         />
       )}
 
@@ -676,6 +689,7 @@ function TabsComponent(
               tabPrerender={explicitPanel?.prerender ?? tab.prerender}
               tabKeepMounted={explicitPanel?.keepMounted ?? tab.keepMounted}
               visitedKeys={visitedKeysRef.current}
+              defaultPanelStyles={tabPanelStyles}
               panelStyles={explicitPanel?.styles}
               qa={explicitPanel?.qa}
               qaVal={explicitPanel?.qaVal}

src/components/navigation/Tabs/TabsContext.tsx

@@ -5,6 +5,7 @@ import type {
   DroppableCollectionState,
   TabListState,
 } from 'react-stately';
+import type { Styles } from '../../../tasty';
 import type { CubeItemActionProps } from '../../actions/ItemAction';
 import type { CubeMenuProps } from '../../actions/Menu';
 import type { TabSize, TabType } from './types';
@@ -40,6 +41,8 @@ export interface TabsContextValue {
   dragState?: DraggableCollectionState;
   /** Drop state for reorderable tabs (undefined if not reorderable) */
   dropState?: DroppableCollectionState;
+  /** Default styles for all tabs */
+  tabStyles?: Styles;
 
   // Editing callbacks
   /** Current tab being edited (null if none) */

src/components/navigation/Tabs/styled.ts

@@ -192,21 +192,27 @@ export const TabElement = tasty(Item, {
       '(type=file | type=radio) & selected': '#white',
     },
     border: {
-      '': '0 #clear',
-      'type=file & selected': '$tab-indicator-size #purple bottom',
+      '': '#clear',
+      'type=file': '0 #clear',
     },
     preset: {
       '': 't3m',
       'size=xsmall': 't4',
     },
     shadow: {
-      '': 'none',
-      'focused & focus-visible': 'inset 0 0 0 1bw #purple-text',
-      editing: 'inset 0 0 0 1bw #purple-text',
+      '': '$selection-shadow',
+      'focused & focus-visible':
+        'inset 0 0 0 1bw #purple-text, $selection-shadow',
+      editing: 'inset 0 0 0 1bw #purple-text, $selection-shadow',
       'type=radio & selected': '$item-shadow',
       'type=radio & selected & focused & focus-visible':
         '$item-shadow, inset 0 0 0 1bw #purple-text',
     },
+    '$selection-shadow': {
+      '': 'inset 0 0 0 0 #purple',
+      'type=file & selected': 'inset 0 (-1 * $tab-indicator-size) 0 0 #purple',
+      '!type=file': 'inset 0 0 0 0 #purple.0',
+    },
     // Collapse horizontal padding for narrow type
     '$label-padding-left': {
       '': '$inline-padding',

src/components/navigation/Tabs/types.ts

@@ -239,6 +239,20 @@ export interface CubeTabsProps
    * @default 'suffix'
    */
   scrollArrowsPosition?: TabsActionPosition;
+  /**
+   * Custom styles for the tab list container (the scrollable area containing tabs).
+   */
+  tabListStyles?: Styles;
+  /**
+   * Default styles applied to all tab buttons.
+   * Can be overridden per-tab via Tab's styles prop.
+   */
+  tabStyles?: Styles;
+  /**
+   * Default styles applied to all tab panels.
+   * Can be overridden per-panel via Panel's styles prop.
+   */
+  tabPanelStyles?: Styles;
 }
 
 export interface CubeTabProps extends TabStyleProps, PanelBehaviorProps {