@cube-dev/ui-kit 0.139.0 → 0.140.1

package/dist/components/navigation/Tabs/styled.js

@@ -1,45 +1,81 @@
-/** @license MIT | @cube-dev/ui-kit v0.139.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.1 | Cube Dev Team */
 import { _Item } from "../../content/Item/Item.js";
 import { tasty } from "@tenphi/tasty";
 
 //#region src/components/navigation/Tabs/styled.ts
 const TabsElement = tasty({ styles: {
 	display: "flex",
-	flow: "row",
-	placeItems: {
-		"": "end stretch",
-		"type=radio | type=file": "stretch"
+	flow: {
+		"": "column",
+		"placement=bottom": "column-reverse",
+		"placement=left": "row",
+		"placement=right": "row-reverse"
 	},
-	overflow: "visible",
-	border: {
-		"": 0,
-		"(type=default | type=file | type=narrow) & has-panels": "bottom"
-	},
-	width: {
-		"": "100%",
-		"type=radio": "max-content"
-	},
-	padding: {
+	flexShrink: {
 		"": 0,
-		"type=radio": ".5x"
+		"has-panels": 1
 	},
-	radius: {
+	flexGrow: {
 		"": 0,
-		"type=radio": "1cr"
-	},
-	fill: {
-		"": "#clear",
-		"type=radio": "#surface-4"
+		"has-panels": 1
 	},
-	flexShrink: 0,
-	flexGrow: 0,
-	$transition: "$tab-transition",
-	"$tab-indicator-size": {
-		"": "2bw",
-		"size=large": "1ow"
+	width: "min 0",
+	height: "min 0",
+	overflow: "visible",
+	Bar: {
+		$: ">",
+		display: "flex",
+		flow: {
+			"": "row",
+			"placement=left | placement=right": "column"
+		},
+		placeItems: {
+			"": "end stretch",
+			"placement=bottom": "start stretch",
+			"placement=left": "stretch end",
+			"placement=right": "stretch start",
+			"type=radio | type=file": "stretch"
+		},
+		overflow: "visible",
+		border: {
+			"": 0,
+			"(type=default | type=file | type=narrow) & has-panels": "bottom",
+			"(type=default | type=file | type=narrow) & has-panels & placement=bottom": "top",
+			"(type=default | type=file | type=narrow) & has-panels & placement=left": "right",
+			"(type=default | type=file | type=narrow) & has-panels & placement=right": "left"
+		},
+		width: {
+			"": "100%",
+			"placement=left | placement=right": "auto",
+			"type=radio & (placement=left | placement=right)": "max-content"
+		},
+		height: {
+			"": "auto",
+			"placement=left | placement=right": "100%",
+			"type=radio & (placement=left | placement=right)": "max-content"
+		},
+		padding: {
+			"": 0,
+			"type=radio": ".5x"
+		},
+		radius: {
+			"": 0,
+			"type=radio": "1cr"
+		},
+		fill: {
+			"": "#clear",
+			"type=radio": "#surface-4"
+		},
+		flexShrink: 0,
+		flexGrow: 0,
+		$transition: "$tab-transition",
+		"$tab-indicator-size": {
+			"": "2bw",
+			"size=large": "1ow"
+		}
 	},
 	Prefix: {
-		$: ">",
+		$: "> Bar >",
 		display: "flex",
 		placeItems: "center",
 		placeContent: "center",
@@ -47,7 +83,8 @@ const TabsElement = tasty({ styles: {
 		placeSelf: "stretch",
 		padding: {
 			"": 0,
-			"type=default": ".5x 0 .5x 1x"
+			"type=default": ".5x 0 .5x 1x",
+			"type=default & (placement=left | placement=right)": "1x .5x 0 .5x"
 		},
 		gap: {
 			"": 0,
@@ -55,11 +92,12 @@ const TabsElement = tasty({ styles: {
 		},
 		border: {
 			"": 0,
-			"type=file": "right"
+			"type=file": "right",
+			"type=file & (placement=left | placement=right)": "bottom"
 		}
 	},
 	Suffix: {
-		$: ">",
+		$: "> Bar >",
 		display: "flex",
 		placeItems: "center",
 		placeContent: "center",
@@ -67,7 +105,8 @@ const TabsElement = tasty({ styles: {
 		placeSelf: "stretch",
 		padding: {
 			"": 0,
-			"type=default": ".5x 1x .5x 0"
+			"type=default": ".5x 1x .5x 0",
+			"type=default & (placement=left | placement=right)": "0 .5x 1x .5x"
 		},
 		gap: {
 			"": 0,
@@ -75,27 +114,36 @@ const TabsElement = tasty({ styles: {
 		},
 		border: {
 			"": 0,
-			"type=file": "left"
+			"type=file": "left",
+			"type=file & (placement=left | placement=right)": "top"
 		}
 	},
 	ScrollWrapper: {
-		$: ">",
+		$: "> Bar >",
 		position: "relative",
 		display: "flex",
 		flexGrow: 1,
 		flexShrink: 1,
-		width: "min 0",
+		width: {
+			"": "min 0",
+			"placement=left | placement=right": "auto"
+		},
+		height: {
+			"": "auto",
+			"placement=left | placement=right": "min 0"
+		},
 		overflow: {
 			"": "hidden",
 			"type=radio": "visible"
 		}
 	},
 	Scroll: {
-		$: "> ScrollWrapper >",
+		$: "> Bar > ScrollWrapper >",
 		position: "relative",
 		display: "block",
 		overflow: {
 			"": "auto hidden",
+			"placement=left | placement=right": "hidden auto",
 			"type=radio": "visible"
 		},
 		scrollbar: "none",
@@ -109,42 +157,64 @@ const TabsElement = tasty({ styles: {
 			"": 0,
 			"type=radio": "-.5x"
 		},
-		fade: "2x left #tabs-fade-left #black, 2x right #tabs-fade-right #black",
-		transition: "##tabs-fade-left $tab-transition ease-in, ##tabs-fade-right $tab-transition ease-in",
-		"#tabs-fade-left": {
+		fade: {
+			"": "2x left #tabs-fade-start #black, 2x right #tabs-fade-end #black",
+			"placement=left | placement=right": "2x top #tabs-fade-start #black, 2x bottom #tabs-fade-end #black"
+		},
+		transition: "##tabs-fade-start $tab-transition ease-in, ##tabs-fade-end $tab-transition ease-in",
+		"#tabs-fade-start": {
 			"": "rgb(0 0 0 / 1)",
-			"fade-left": "rgb(0 0 0 / 0)"
+			"fade-start": "rgb(0 0 0 / 0)"
 		},
-		"#tabs-fade-right": {
+		"#tabs-fade-end": {
 			"": "rgb(0 0 0 / 1)",
-			"fade-right": "rgb(0 0 0 / 0)"
+			"fade-end": "rgb(0 0 0 / 0)"
 		}
 	},
 	TabList: {
-		$: "> ScrollWrapper > Scroll >",
+		$: "> Bar > ScrollWrapper > Scroll >",
 		position: "relative",
 		display: "grid",
-		gridAutoFlow: "column",
+		boxSizing: "border-box",
+		gridAutoFlow: {
+			"": "column",
+			"placement=left | placement=right": "row"
+		},
 		gridAutoColumns: {
 			"": "auto",
 			"type=radio": "1fr"
 		},
+		gridAutoRows: {
+			"": "auto",
+			"type=radio & (placement=left | placement=right)": "1fr"
+		},
 		gap: {
 			"": 0,
 			"type=default": "1x",
 			"type=narrow": "2x",
-			"type=radio": ".5x"
+			"type=radio": ".5x",
+			"(type=default | type=narrow) & (placement=left | placement=right)": "1bw"
 		},
 		placeContent: "start",
 		overflow: "visible",
 		width: {
 			"": "max-content",
-			"type=radio": "100%"
+			"type=radio": "100%",
+			"placement=left | placement=right": "100%"
+		},
+		height: {
+			"": "auto",
+			"placement=left | placement=right": "max-content"
+		},
+		padding: {
+			"": "0 $tablist-padding",
+			"placement=left | placement=right": "$tablist-padding 0",
+			"(type=default | type=narrow) & (placement=left | placement=right)": "$tablist-padding"
 		},
-		padding: "0 $tablist-padding",
 		"$tablist-padding": {
 			"": "0",
-			"type=default | type=narrow": "1x"
+			"type=default | type=narrow": "1x",
+			"(type=default | type=narrow) & (placement=left | placement=right)": ".5x"
 		}
 	},
 	$size: {
@@ -155,13 +225,33 @@ const TabsElement = tasty({ styles: {
 		"size=large": "$size-lg",
 		"size=xlarge": "$size-xl"
 	},
-	ScrollbarH: {
-		$: "> ScrollWrapper >",
+	Scrollbar: {
+		$: "> Bar > ScrollWrapper >",
 		position: "absolute",
-		bottom: "1px",
-		left: "$scrollbar-h-left",
-		height: "1ow",
-		width: "$scrollbar-h-width",
+		bottom: {
+			"": "1px",
+			"placement=left | placement=right": "auto"
+		},
+		top: {
+			"": "auto",
+			"placement=left | placement=right": "$scrollbar-v-top"
+		},
+		left: {
+			"": "$scrollbar-h-left",
+			"placement=left | placement=right": "auto"
+		},
+		right: {
+			"": "auto",
+			"placement=left | placement=right": "1px"
+		},
+		height: {
+			"": "1ow",
+			"placement=left | placement=right": "$scrollbar-v-height"
+		},
+		width: {
+			"": "$scrollbar-h-width",
+			"placement=left | placement=right": "1ow"
+		},
 		radius: "round",
 		fill: "#dark.35",
 		opacity: {
@@ -178,7 +268,10 @@ const TabElement = tasty(_Item, {
 		radius: {
 			"": false,
 			"type=radio | type=default": true,
-			"type=narrow": "top"
+			"type=narrow": "top",
+			"type=narrow & placement=bottom": "bottom",
+			"type=narrow & placement=left": "left",
+			"type=narrow & placement=right": "right"
 		},
 		color: {
 			"": "#dark-02",
@@ -215,6 +308,9 @@ const TabElement = tasty(_Item, {
 		"$selection-shadow": {
 			"": "inset 0 0 0 0 #primary",
 			"type=file & selected": "inset 0 (-1 * $tab-indicator-size) 0 0 #primary",
+			"type=file & selected & placement=bottom": "inset 0 $tab-indicator-size 0 0 #primary",
+			"type=file & selected & placement=left": "inset (-1 * $tab-indicator-size) 0 0 0 #primary",
+			"type=file & selected & placement=right": "inset $tab-indicator-size 0 0 0 #primary",
 			"!type=file": "inset 0 0 0 0 #primary.0"
 		},
 		"$label-padding-left": {
@@ -240,11 +336,13 @@ const TabContainer = tasty({ styles: {
 	display: "grid",
 	margin: {
 		"": 0,
-		"type=default": ".5x 0"
+		"type=default": ".5x 0",
+		"type=default & (placement=left | placement=right)": 0
 	},
 	border: {
 		"": 0,
-		"type=file": "right"
+		"type=file": "right",
+		"type=file & (placement=left | placement=right)": "bottom"
 	},
 	cursor: {
 		"": "default",
@@ -289,25 +387,63 @@ const DropIndicatorElement = tasty({ styles: {
 		"drop-target": 1
 	},
 	fill: "#primary",
-	width: ".5x",
-	top: 0,
-	bottom: 0,
+	width: {
+		"": ".5x",
+		"placement=left | placement=right": "auto"
+	},
+	height: {
+		"": "auto",
+		"placement=left | placement=right": ".5x"
+	},
+	top: {
+		"": 0,
+		"placement=left | placement=right": "auto",
+		"(placement=left | placement=right) & before": "-2px"
+	},
+	bottom: {
+		"": 0,
+		"placement=left | placement=right": "auto",
+		"(placement=left | placement=right) & after": "-2px"
+	},
 	left: {
 		"": "auto",
-		before: "-2px"
+		"before & !(placement=left | placement=right)": "-2px",
+		"placement=left | placement=right": 0
 	},
 	right: {
 		"": "auto",
-		after: "-2px"
+		"after & !(placement=left | placement=right)": "-2px",
+		"placement=left | placement=right": 0
 	}
 } });
 const TabIndicatorElement = tasty({ styles: {
 	position: "absolute",
-	bottom: "0",
-	left: 0,
-	height: "$tab-indicator-size",
+	bottom: {
+		"": "0",
+		"placement=bottom | placement=left | placement=right": "auto"
+	},
+	top: {
+		"": "auto",
+		"placement=bottom": "0"
+	},
+	left: {
+		"": "auto",
+		"placement=right": "0"
+	},
+	right: {
+		"": "auto",
+		"placement=left": "0"
+	},
+	height: {
+		"": "$tab-indicator-size",
+		"placement=left | placement=right": "auto"
+	},
+	width: {
+		"": "auto",
+		"placement=left | placement=right": "$tab-indicator-size"
+	},
 	fill: "#primary",
-	transition: "left $tab-transition ease-in-out, width $tab-transition ease-in-out",
+	transition: "left $tab-transition ease-in-out, width $tab-transition ease-in-out, top $tab-transition ease-in-out, height $tab-transition ease-in-out",
 	pointerEvents: "none"
 } });
 const TabPanelElement = tasty({

package/dist/components/navigation/Tabs/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","names":["Item"],"sources":["../../../../src/components/navigation/Tabs/styled.ts"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\n\nimport { Item } from '../../content/Item';\n\n// =============================================================================\n// Main Tabs Container\n// =============================================================================\n\nexport const TabsElement = tasty({\n  styles: {\n    display: 'flex',\n    flow: 'row',\n    placeItems: {\n      '': 'end stretch',\n      'type=radio | type=file': 'stretch',\n    },\n    overflow: 'visible',\n    border: {\n      '': 0,\n      '(type=default | type=file | type=narrow) & has-panels': 'bottom',\n    },\n    width: {\n      '': '100%',\n      'type=radio': 'max-content',\n    },\n    padding: {\n      '': 0,\n      'type=radio': '.5x',\n    },\n    radius: {\n      '': 0,\n      'type=radio': '1cr',\n    },\n    fill: {\n      '': '#clear',\n      'type=radio': '#surface-4',\n    },\n    flexShrink: 0,\n    flexGrow: 0,\n\n    $transition: '$tab-transition',\n    '$tab-indicator-size': {\n      '': '2bw',\n      'size=large': '1ow',\n    },\n\n    Prefix: {\n      $: '>',\n      display: 'flex',\n      placeItems: 'center',\n      placeContent: 'center',\n      flexShrink: 0,\n      placeSelf: 'stretch',\n      padding: {\n        '': 0,\n        'type=default': '.5x 0 .5x 1x',\n      },\n      gap: {\n        '': 0,\n        'type=default': '.5x',\n      },\n      border: {\n        '': 0,\n        'type=file': 'right',\n      },\n    },\n\n    Suffix: {\n      $: '>',\n      display: 'flex',\n      placeItems: 'center',\n      placeContent: 'center',\n      flexShrink: 0,\n      placeSelf: 'stretch',\n      padding: {\n        '': 0,\n        'type=default': '.5x 1x .5x 0',\n      },\n      gap: {\n        '': 0,\n        'type=default': '.5x',\n      },\n      border: {\n        '': 0,\n        'type=file': 'left',\n      },\n    },\n\n    // Wrapper for scroll area and scrollbar (scrollbar is positioned relative to this)\n    ScrollWrapper: {\n      $: '>',\n      position: 'relative',\n      display: 'flex',\n      flexGrow: 1,\n      flexShrink: 1,\n      width: 'min 0',\n      overflow: {\n        '': 'hidden',\n        'type=radio': 'visible',\n      },\n    },\n\n    Scroll: {\n      $: '> ScrollWrapper >',\n      position: 'relative',\n      display: 'block',\n      overflow: {\n        '': 'auto hidden',\n        'type=radio': 'visible',\n      },\n      scrollbar: 'none',\n      flexGrow: 1,\n      width: '100%',\n      // Add padding/margin for radio type to allow shadow to render outside\n      padding: {\n        '': 0,\n        'type=radio': '.5x',\n      },\n      margin: {\n        '': 0,\n        'type=radio': '-.5x',\n      },\n      // Use multi-group fade with color tokens for smooth transitions\n      fade: '2x left #tabs-fade-left #black, 2x right #tabs-fade-right #black',\n      // ##name outputs --name-color (literal CSS property name)\n      transition:\n        '##tabs-fade-left $tab-transition ease-in, ##tabs-fade-right $tab-transition ease-in',\n\n      // Transition transparent color: opaque (no fade) -> transparent (fade visible)\n      '#tabs-fade-left': {\n        '': 'rgb(0 0 0 / 1)',\n        'fade-left': 'rgb(0 0 0 / 0)',\n      },\n      '#tabs-fade-right': {\n        '': 'rgb(0 0 0 / 1)',\n        'fade-right': 'rgb(0 0 0 / 0)',\n      },\n    },\n\n    TabList: {\n      $: '> ScrollWrapper > Scroll >',\n      position: 'relative',\n      display: 'grid',\n      gridAutoFlow: 'column',\n      gridAutoColumns: {\n        '': 'auto',\n        'type=radio': '1fr',\n      },\n      gap: {\n        '': 0,\n        'type=default': '1x',\n        'type=narrow': '2x',\n        'type=radio': '.5x',\n      },\n      placeContent: 'start',\n      overflow: 'visible',\n      width: {\n        '': 'max-content',\n        'type=radio': '100%',\n      },\n      padding: '0 $tablist-padding',\n\n      '$tablist-padding': {\n        '': '0',\n        'type=default | type=narrow': '1x',\n      },\n    },\n\n    // Size variable for actions (if ItemAction is used instead of TabsAction)\n    $size: {\n      '': '$size-md',\n      'size=xsmall': '$size-xs',\n      'size=small': '$size-sm',\n      'size=medium': '$size-md',\n      'size=large': '$size-lg',\n      'size=xlarge': '$size-xl',\n    },\n\n    // Custom horizontal scrollbar (tiny) - positioned relative to ScrollWrapper\n    ScrollbarH: {\n      $: '> ScrollWrapper >',\n      position: 'absolute',\n      bottom: '1px',\n      left: '$scrollbar-h-left',\n      height: '1ow',\n      width: '$scrollbar-h-width',\n      radius: 'round',\n      fill: '#dark.35',\n      opacity: {\n        '': 0,\n        'focused | scrolling': 1,\n      },\n      transition: 'opacity 0.15s',\n      pointerEvents: 'none',\n    },\n  },\n});\n\n// =============================================================================\n// Tab Button (extends Item)\n// =============================================================================\n\nexport const TabElement = tasty(Item, {\n  as: 'button',\n  styles: {\n    radius: {\n      '': false,\n      'type=radio | type=default': true,\n      'type=narrow': 'top',\n    },\n    color: {\n      '': '#dark-02',\n      'type=narrow & (hovered & !selected)': '#primary-text',\n      '(type=default | type=narrow) & selected': '#primary-text',\n      disabled: '#disabled-surface-text',\n    },\n    fill: {\n      '': '#clear',\n      'hovered & !type=narrow': '#dark.03',\n      'type=file': '#surface-3',\n      'type=file & hovered': '#surface-3.5',\n      'type=radio & hovered': '#surface.5',\n      '(type=file | type=radio) & selected': '#surface',\n    },\n    border: {\n      '': '#clear',\n      'type=file': '0 #clear',\n    },\n    preset: {\n      '': 't3m',\n      'size=xsmall': 't4',\n    },\n    shadow: {\n      '': '$selection-shadow',\n      'focused & focus-visible':\n        'inset 0 0 0 1bw #primary-text, $selection-shadow',\n      editing: 'inset 0 0 0 1bw #primary-text, $selection-shadow',\n      'type=radio & selected': '$item-shadow',\n      'type=radio & selected & focused & focus-visible':\n        '$item-shadow, inset 0 0 0 1bw #primary-text',\n    },\n    outline: 'none',\n    placeContent: {\n      // extend\n      'type=radio': 'center',\n    },\n    gridTemplate: {\n      // extend\n      'type=radio':\n        '\"icon prefix label suffix rightIcon actions\" auto / max-content max-content max-content max-content max-content max-content',\n    },\n    '$selection-shadow': {\n      '': 'inset 0 0 0 0 #primary',\n      'type=file & selected': 'inset 0 (-1 * $tab-indicator-size) 0 0 #primary',\n      '!type=file': 'inset 0 0 0 0 #primary.0',\n    },\n    // Collapse horizontal padding for narrow type\n    '$label-padding-left': {\n      '': '$inline-padding',\n      'has-start-content': 0,\n      'type=narrow': 0,\n    },\n    '$label-padding-right': {\n      '': '$inline-padding',\n      'has-end-content': 0,\n      'type=narrow': 0,\n    },\n    Label: {\n      placeSelf: {\n        '': 'center start',\n        'type=radio': 'center start',\n        'type=radio & !has-prefix & !has-suffix & !has-icon & !has-right-icon':\n          'center',\n      },\n    },\n    Actions: {\n      transition: false,\n    },\n  },\n});\n\n// =============================================================================\n// Tab Container (wrapper for tab + actions)\n// =============================================================================\n\nexport const TabContainer = tasty({\n  styles: {\n    position: 'relative',\n    display: 'grid',\n    margin: {\n      '': 0,\n      'type=default': '.5x 0',\n    },\n    border: {\n      '': 0,\n      'type=file': 'right',\n    },\n    cursor: {\n      '': 'default',\n      draggable: 'grab',\n      dragging: 'grabbing',\n    },\n\n    // Size variable for actions (same as ItemButton's ActionsWrapper)\n    $size: {\n      '': '$size-md',\n      'size=xsmall': '$size-xs',\n      'size=small': '$size-sm',\n      'size=medium': '$size-md',\n      'size=large': '$size-lg',\n      'size=xlarge': '$size-xl',\n    },\n\n    // Actions rendered outside the button for accessibility\n    Actions: {\n      $: '>',\n      position: 'absolute',\n      inset: '1bw 1bw auto auto',\n      display: 'flex',\n      gap: '1bw',\n      placeItems: 'center',\n      placeContent: 'center end',\n      pointerEvents: 'auto',\n      height: 'min ($size - 2bw)',\n      padding: '0 $side-padding',\n      // Simple CSS opacity for show-on-hover\n      opacity: {\n        '': 1,\n        'auto-hide-actions': 0,\n        'auto-hide-actions & (active | :hover | :focus-within | :has([data-pressed]))': 1,\n      },\n      transition: 'opacity $transition',\n      // Size variables (same as Item)\n      '$action-size': 'min(max((2x + 2bw), ($size - 1x - 2bw)), (3x - 2bw))',\n      '$side-padding': '(($size - $action-size - 2bw) / 2)',\n    },\n  },\n});\n\n// =============================================================================\n// Drop Indicator for Drag-and-Drop\n// =============================================================================\n\nexport const DropIndicatorElement = tasty({\n  styles: {\n    zIndex: 10,\n    position: 'absolute',\n    pointerEvents: 'none',\n    opacity: {\n      '': 0,\n      'drop-target': 1,\n    },\n    fill: '#primary',\n    width: '.5x',\n    top: 0,\n    bottom: 0,\n    left: {\n      '': 'auto',\n      before: '-2px',\n    },\n    right: {\n      '': 'auto',\n      after: '-2px',\n    },\n  },\n});\n\n// =============================================================================\n// Tab Selection Indicator (for default type)\n// =============================================================================\n\nexport const TabIndicatorElement = tasty({\n  styles: {\n    position: 'absolute',\n    bottom: '0',\n    left: 0,\n    height: '$tab-indicator-size',\n    fill: '#primary',\n    transition:\n      'left $tab-transition ease-in-out, width $tab-transition ease-in-out',\n    pointerEvents: 'none',\n  },\n});\n\n// =============================================================================\n// Tab Panel\n// =============================================================================\n\nexport const TabPanelElement = tasty({\n  as: 'section',\n  styles: {\n    display: 'contents',\n    hide: {\n      '': true,\n      active: false,\n    },\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"styled.js","names":["Item"],"sources":["../../../../src/components/navigation/Tabs/styled.ts"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\n\nimport { Item } from '../../content/Item';\n\n// =============================================================================\n// Main Tabs Container — flex wrapper holding the tab Bar and the panels.\n// `placement` mod drives `flex-direction` so DOM order stays \"bar then panels\"\n// and visual order is controlled with `column / column-reverse / row / row-reverse`.\n// =============================================================================\n\nexport const TabsElement = tasty({\n  styles: {\n    display: 'flex',\n    flow: {\n      '': 'column',\n      'placement=bottom': 'column-reverse',\n      'placement=left': 'row',\n      'placement=right': 'row-reverse',\n    },\n    // Participate in parent flex layouts; allow shrinking on both axes so we\n    // never force the parent into overflow. The Bar keeps `flex-shrink: 0`,\n    // which makes the practical minimum of the wrapper along the main axis\n    // equal to the tablist's intrinsic size. When there are no panels the\n    // wrapper has only the Bar inside it, so we lock its sizing to the Bar's\n    // intrinsic size — matching the pre-wrapper behavior of a panel-less Tabs.\n    flexShrink: { '': 0, 'has-panels': 1 },\n    flexGrow: { '': 0, 'has-panels': 1 },\n    width: 'min 0',\n    height: 'min 0',\n    overflow: 'visible',\n\n    // ============================================\n    // Bar — the tab strip (Prefix + ScrollWrapper + Suffix).\n    // ============================================\n    Bar: {\n      $: '>',\n      display: 'flex',\n      flow: {\n        '': 'row',\n        'placement=left | placement=right': 'column',\n      },\n      placeItems: {\n        '': 'end stretch',\n        'placement=bottom': 'start stretch',\n        'placement=left': 'stretch end',\n        'placement=right': 'stretch start',\n        'type=radio | type=file': 'stretch',\n      },\n      overflow: 'visible',\n      border: {\n        '': 0,\n        '(type=default | type=file | type=narrow) & has-panels': 'bottom',\n        '(type=default | type=file | type=narrow) & has-panels & placement=bottom':\n          'top',\n        '(type=default | type=file | type=narrow) & has-panels & placement=left':\n          'right',\n        '(type=default | type=file | type=narrow) & has-panels & placement=right':\n          'left',\n      },\n      // Bar sizing — always follow the outer wrapper along the main axis so\n      // `width` / `height` props on `<Tabs>` apply to the strip as they did\n      // before the wrapper was introduced.\n      // - horizontal placements: main-axis = wrapper width  (100%), cross-axis intrinsic (auto)\n      // - vertical   placements: main-axis = wrapper height (100%), cross-axis intrinsic (auto / max-content for radio)\n      width: {\n        '': '100%',\n        'placement=left | placement=right': 'auto',\n        'type=radio & (placement=left | placement=right)': 'max-content',\n      },\n      height: {\n        '': 'auto',\n        'placement=left | placement=right': '100%',\n        'type=radio & (placement=left | placement=right)': 'max-content',\n      },\n      padding: {\n        '': 0,\n        'type=radio': '.5x',\n      },\n      radius: {\n        '': 0,\n        'type=radio': '1cr',\n      },\n      fill: {\n        '': '#clear',\n        'type=radio': '#surface-4',\n      },\n      // Never let the Bar shrink/grow within the outer wrapper — this is what\n      // gives the wrapper its effective \"tablist-size minimum\" on the main axis.\n      flexShrink: 0,\n      flexGrow: 0,\n\n      $transition: '$tab-transition',\n      '$tab-indicator-size': {\n        '': '2bw',\n        'size=large': '1ow',\n      },\n    },\n\n    // ============================================\n    // Prefix — slot before the scroll area.\n    // ============================================\n    Prefix: {\n      $: '> Bar >',\n      display: 'flex',\n      placeItems: 'center',\n      placeContent: 'center',\n      flexShrink: 0,\n      placeSelf: 'stretch',\n      padding: {\n        '': 0,\n        'type=default': '.5x 0 .5x 1x',\n        'type=default & (placement=left | placement=right)': '1x .5x 0 .5x',\n      },\n      gap: {\n        '': 0,\n        'type=default': '.5x',\n      },\n      border: {\n        '': 0,\n        'type=file': 'right',\n        'type=file & (placement=left | placement=right)': 'bottom',\n      },\n    },\n\n    // ============================================\n    // Suffix — slot after the scroll area.\n    // ============================================\n    Suffix: {\n      $: '> Bar >',\n      display: 'flex',\n      placeItems: 'center',\n      placeContent: 'center',\n      flexShrink: 0,\n      placeSelf: 'stretch',\n      padding: {\n        '': 0,\n        'type=default': '.5x 1x .5x 0',\n        'type=default & (placement=left | placement=right)': '0 .5x 1x .5x',\n      },\n      gap: {\n        '': 0,\n        'type=default': '.5x',\n      },\n      border: {\n        '': 0,\n        'type=file': 'left',\n        'type=file & (placement=left | placement=right)': 'top',\n      },\n    },\n\n    // Wrapper for scroll area and scrollbar (scrollbar is positioned relative to this)\n    ScrollWrapper: {\n      $: '> Bar >',\n      position: 'relative',\n      display: 'flex',\n      flexGrow: 1,\n      flexShrink: 1,\n      width: {\n        '': 'min 0',\n        'placement=left | placement=right': 'auto',\n      },\n      height: {\n        '': 'auto',\n        'placement=left | placement=right': 'min 0',\n      },\n      overflow: {\n        '': 'hidden',\n        'type=radio': 'visible',\n      },\n    },\n\n    Scroll: {\n      $: '> Bar > ScrollWrapper >',\n      position: 'relative',\n      display: 'block',\n      overflow: {\n        '': 'auto hidden',\n        'placement=left | placement=right': 'hidden auto',\n        'type=radio': 'visible',\n      },\n      scrollbar: 'none',\n      flexGrow: 1,\n      width: '100%',\n      // Add padding/margin for radio type to allow shadow to render outside\n      padding: {\n        '': 0,\n        'type=radio': '.5x',\n      },\n      margin: {\n        '': 0,\n        'type=radio': '-.5x',\n      },\n      // Multi-group fade with axis-neutral color tokens for smooth transitions.\n      // Direction flips based on placement.\n      fade: {\n        '': '2x left #tabs-fade-start #black, 2x right #tabs-fade-end #black',\n        'placement=left | placement=right':\n          '2x top #tabs-fade-start #black, 2x bottom #tabs-fade-end #black',\n      },\n      // ##name outputs --name-color (literal CSS property name)\n      transition:\n        '##tabs-fade-start $tab-transition ease-in, ##tabs-fade-end $tab-transition ease-in',\n\n      // Transition transparent color: opaque (no fade) -> transparent (fade visible)\n      '#tabs-fade-start': {\n        '': 'rgb(0 0 0 / 1)',\n        'fade-start': 'rgb(0 0 0 / 0)',\n      },\n      '#tabs-fade-end': {\n        '': 'rgb(0 0 0 / 1)',\n        'fade-end': 'rgb(0 0 0 / 0)',\n      },\n    },\n\n    TabList: {\n      $: '> Bar > ScrollWrapper > Scroll >',\n      position: 'relative',\n      display: 'grid',\n      // `border-box` is required because we set `width: 100%` for vertical\n      // placements AND apply padding. With the default `content-box`, the\n      // TabList's outer box would be `100% + padding × 2` and overflow Scroll\n      // horizontally — and the side selection indicator (positioned at\n      // `right: 0` / `left: 0` of TabList) would land in that overflow region\n      // and get clipped by Scroll's `overflow-x: hidden`.\n      boxSizing: 'border-box',\n      gridAutoFlow: {\n        '': 'column',\n        'placement=left | placement=right': 'row',\n      },\n      gridAutoColumns: {\n        '': 'auto',\n        'type=radio': '1fr',\n      },\n      gridAutoRows: {\n        '': 'auto',\n        'type=radio & (placement=left | placement=right)': '1fr',\n      },\n      gap: {\n        '': 0,\n        'type=default': '1x',\n        'type=narrow': '2x',\n        'type=radio': '.5x',\n        // Tabs stack vertically — collapse the gap so the strip reads as a\n        // single column. `narrow` is coerced to `default` in vertical, but we\n        // keep the rule defensive in case the styled element is consumed\n        // directly with a `type=narrow` mod set.\n        '(type=default | type=narrow) & (placement=left | placement=right)':\n          '1bw',\n      },\n      placeContent: 'start',\n      overflow: 'visible',\n      width: {\n        '': 'max-content',\n        'type=radio': '100%',\n        'placement=left | placement=right': '100%',\n      },\n      height: {\n        '': 'auto',\n        'placement=left | placement=right': 'max-content',\n      },\n      // For vertical default/narrow we apply `$tablist-padding` on ALL sides\n      // (instead of only the parallel axis) so the breathing room around the\n      // tabs and the selection indicator can be tuned via the `tabListPadding`\n      // prop — the same prop that controls horizontal start/end padding.\n      padding: {\n        '': '0 $tablist-padding',\n        'placement=left | placement=right': '$tablist-padding 0',\n        '(type=default | type=narrow) & (placement=left | placement=right)':\n          '$tablist-padding',\n      },\n\n      // Default `$tablist-padding` per type. Vertical default/narrow gets the\n      // smaller `.5x` default since it applies to all four sides; the\n      // `tabListPadding` prop overrides this via inline CSS variable.\n      '$tablist-padding': {\n        '': '0',\n        'type=default | type=narrow': '1x',\n        '(type=default | type=narrow) & (placement=left | placement=right)':\n          '.5x',\n      },\n    },\n\n    // Size variable for actions (if ItemAction is used instead of TabsAction)\n    $size: {\n      '': '$size-md',\n      'size=xsmall': '$size-xs',\n      'size=small': '$size-sm',\n      'size=medium': '$size-md',\n      'size=large': '$size-lg',\n      'size=xlarge': '$size-xl',\n    },\n\n    // Custom tiny scrollbar — positioned relative to ScrollWrapper. Switches\n    // edges and dimensions based on placement; the driving CSS custom\n    // properties come from `useTinyScrollbar.handleHStyle` / `handleVStyle`.\n    Scrollbar: {\n      $: '> Bar > ScrollWrapper >',\n      position: 'absolute',\n      bottom: {\n        '': '1px',\n        'placement=left | placement=right': 'auto',\n      },\n      top: {\n        '': 'auto',\n        'placement=left | placement=right': '$scrollbar-v-top',\n      },\n      left: {\n        '': '$scrollbar-h-left',\n        'placement=left | placement=right': 'auto',\n      },\n      right: {\n        '': 'auto',\n        'placement=left | placement=right': '1px',\n      },\n      height: {\n        '': '1ow',\n        'placement=left | placement=right': '$scrollbar-v-height',\n      },\n      width: {\n        '': '$scrollbar-h-width',\n        'placement=left | placement=right': '1ow',\n      },\n      radius: 'round',\n      fill: '#dark.35',\n      opacity: {\n        '': 0,\n        'focused | scrolling': 1,\n      },\n      transition: 'opacity 0.15s',\n      pointerEvents: 'none',\n    },\n  },\n});\n\n// =============================================================================\n// Tab Button (extends Item)\n// =============================================================================\n\nexport const TabElement = tasty(Item, {\n  as: 'button',\n  styles: {\n    radius: {\n      '': false,\n      'type=radio | type=default': true,\n      'type=narrow': 'top',\n      'type=narrow & placement=bottom': 'bottom',\n      'type=narrow & placement=left': 'left',\n      'type=narrow & placement=right': 'right',\n    },\n    color: {\n      '': '#dark-02',\n      'type=narrow & (hovered & !selected)': '#primary-text',\n      '(type=default | type=narrow) & selected': '#primary-text',\n      disabled: '#disabled-surface-text',\n    },\n    fill: {\n      '': '#clear',\n      'hovered & !type=narrow': '#dark.03',\n      'type=file': '#surface-3',\n      'type=file & hovered': '#surface-3.5',\n      'type=radio & hovered': '#surface.5',\n      '(type=file | type=radio) & selected': '#surface',\n    },\n    border: {\n      '': '#clear',\n      'type=file': '0 #clear',\n    },\n    preset: {\n      '': 't3m',\n      'size=xsmall': 't4',\n    },\n    shadow: {\n      '': '$selection-shadow',\n      'focused & focus-visible':\n        'inset 0 0 0 1bw #primary-text, $selection-shadow',\n      editing: 'inset 0 0 0 1bw #primary-text, $selection-shadow',\n      'type=radio & selected': '$item-shadow',\n      'type=radio & selected & focused & focus-visible':\n        '$item-shadow, inset 0 0 0 1bw #primary-text',\n    },\n    outline: 'none',\n    placeContent: {\n      // extend\n      'type=radio': 'center',\n    },\n    gridTemplate: {\n      // extend\n      'type=radio':\n        '\"icon prefix label suffix rightIcon actions\" auto / max-content max-content max-content max-content max-content max-content',\n    },\n    // File-type selection indicator: an inset shadow on the edge that faces\n    // the panel area. Flips with placement so the highlight always sits on\n    // the edge adjacent to the content.\n    '$selection-shadow': {\n      '': 'inset 0 0 0 0 #primary',\n      'type=file & selected': 'inset 0 (-1 * $tab-indicator-size) 0 0 #primary',\n      'type=file & selected & placement=bottom':\n        'inset 0 $tab-indicator-size 0 0 #primary',\n      'type=file & selected & placement=left':\n        'inset (-1 * $tab-indicator-size) 0 0 0 #primary',\n      'type=file & selected & placement=right':\n        'inset $tab-indicator-size 0 0 0 #primary',\n      '!type=file': 'inset 0 0 0 0 #primary.0',\n    },\n    // Collapse horizontal padding for narrow type\n    '$label-padding-left': {\n      '': '$inline-padding',\n      'has-start-content': 0,\n      'type=narrow': 0,\n    },\n    '$label-padding-right': {\n      '': '$inline-padding',\n      'has-end-content': 0,\n      'type=narrow': 0,\n    },\n    Label: {\n      placeSelf: {\n        '': 'center start',\n        'type=radio': 'center start',\n        'type=radio & !has-prefix & !has-suffix & !has-icon & !has-right-icon':\n          'center',\n      },\n    },\n    Actions: {\n      transition: false,\n    },\n  },\n});\n\n// =============================================================================\n// Tab Container (wrapper for tab + actions)\n// =============================================================================\n\nexport const TabContainer = tasty({\n  styles: {\n    position: 'relative',\n    display: 'grid',\n    margin: {\n      '': 0,\n      // Horizontal strip: .5x top/bottom creates space between the tab and the\n      // bottom-edge indicator (which sits at `bottom: 0` of TabList).\n      'type=default': '.5x 0',\n      // Vertical strip: the breathing room around the tabs and the gap from\n      // the side indicator is provided by the TabList's own `.5x` padding —\n      // don't add per-tab horizontal margin on top of it.\n      'type=default & (placement=left | placement=right)': 0,\n    },\n    border: {\n      '': 0,\n      'type=file': 'right',\n      'type=file & (placement=left | placement=right)': 'bottom',\n    },\n    cursor: {\n      '': 'default',\n      draggable: 'grab',\n      dragging: 'grabbing',\n    },\n\n    // Size variable for actions (same as ItemButton's ActionsWrapper)\n    $size: {\n      '': '$size-md',\n      'size=xsmall': '$size-xs',\n      'size=small': '$size-sm',\n      'size=medium': '$size-md',\n      'size=large': '$size-lg',\n      'size=xlarge': '$size-xl',\n    },\n\n    // Actions rendered outside the button for accessibility\n    Actions: {\n      $: '>',\n      position: 'absolute',\n      inset: '1bw 1bw auto auto',\n      display: 'flex',\n      gap: '1bw',\n      placeItems: 'center',\n      placeContent: 'center end',\n      pointerEvents: 'auto',\n      height: 'min ($size - 2bw)',\n      padding: '0 $side-padding',\n      // Simple CSS opacity for show-on-hover\n      opacity: {\n        '': 1,\n        'auto-hide-actions': 0,\n        'auto-hide-actions & (active | :hover | :focus-within | :has([data-pressed]))': 1,\n      },\n      transition: 'opacity $transition',\n      // Size variables (same as Item)\n      '$action-size': 'min(max((2x + 2bw), ($size - 1x - 2bw)), (3x - 2bw))',\n      '$side-padding': '(($size - $action-size - 2bw) / 2)',\n    },\n  },\n});\n\n// =============================================================================\n// Drop Indicator for Drag-and-Drop\n// Geometry flips based on placement: a vertical bar between horizontal tabs,\n// a horizontal bar between vertical tabs. `before`/`after` mods come from\n// `TabDropIndicator` and decide which edge inset is applied.\n// =============================================================================\n\nexport const DropIndicatorElement = tasty({\n  styles: {\n    zIndex: 10,\n    position: 'absolute',\n    pointerEvents: 'none',\n    opacity: {\n      '': 0,\n      'drop-target': 1,\n    },\n    fill: '#primary',\n    width: {\n      '': '.5x',\n      'placement=left | placement=right': 'auto',\n    },\n    height: {\n      '': 'auto',\n      'placement=left | placement=right': '.5x',\n    },\n    top: {\n      '': 0,\n      'placement=left | placement=right': 'auto',\n      '(placement=left | placement=right) & before': '-2px',\n    },\n    bottom: {\n      '': 0,\n      'placement=left | placement=right': 'auto',\n      '(placement=left | placement=right) & after': '-2px',\n    },\n    left: {\n      '': 'auto',\n      'before & !(placement=left | placement=right)': '-2px',\n      'placement=left | placement=right': 0,\n    },\n    right: {\n      '': 'auto',\n      'after & !(placement=left | placement=right)': '-2px',\n      'placement=left | placement=right': 0,\n    },\n  },\n});\n\n// =============================================================================\n// Tab Selection Indicator (for default/narrow type)\n// Position flips with placement; the dynamic axis dimensions (left/width for\n// horizontal, top/height for vertical) are populated via inline `style` from\n// `useTabIndicator` in `Tabs.tsx`.\n// =============================================================================\n\nexport const TabIndicatorElement = tasty({\n  styles: {\n    position: 'absolute',\n    bottom: {\n      '': '0',\n      'placement=bottom | placement=left | placement=right': 'auto',\n    },\n    top: {\n      '': 'auto',\n      'placement=bottom': '0',\n    },\n    left: {\n      '': 'auto',\n      'placement=right': '0',\n    },\n    right: {\n      '': 'auto',\n      'placement=left': '0',\n    },\n    height: {\n      '': '$tab-indicator-size',\n      'placement=left | placement=right': 'auto',\n    },\n    width: {\n      '': 'auto',\n      'placement=left | placement=right': '$tab-indicator-size',\n    },\n    fill: '#primary',\n    // Transition all four properties unconditionally — only the two relevant\n    // ones change per render, the others stay constant.\n    transition:\n      'left $tab-transition ease-in-out, width $tab-transition ease-in-out, top $tab-transition ease-in-out, height $tab-transition ease-in-out',\n    pointerEvents: 'none',\n  },\n});\n\n// =============================================================================\n// Tab Panel\n// =============================================================================\n\nexport const TabPanelElement = tasty({\n  as: 'section',\n  styles: {\n    display: 'contents',\n    hide: {\n      '': true,\n      active: false,\n    },\n  },\n});\n"],"mappings":"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"}

package/dist/components/navigation/Tabs/types.d.ts

@@ -11,6 +11,12 @@ import { ReactNode } from "react";
 //#region src/components/navigation/Tabs/types.d.ts
 /** Visual appearance type for tabs */
 type TabType = 'default' | 'narrow' | 'file' | 'radio';
+/**
+ * Where the tab bar sits relative to its panels.
+ * - `'top'` / `'bottom'` keep the bar horizontal.
+ * - `'left'` / `'right'` switch it to a vertical strip.
+ */
+type TabPlacement = 'top' | 'bottom' | 'left' | 'right';
 /** Position for TabPicker and scroll arrows */
 type TabsActionPosition = 'prefix' | 'suffix';
 /**
@@ -44,8 +50,6 @@ interface TabStyleProps extends Omit<CubeItemProps, OmittedItemProps> {
    * mapped to Item button sizes medium (32px) and xsmall (24px).
    */
   size?: TabSize;
-  /** Visual appearance type. */
-  type?: TabType;
   /** Whether to show actions only on hover. */
   autoHideActions?: boolean;
 }
@@ -65,6 +69,14 @@ interface CubeTabsProps extends BaseProps, OuterStyleProps, PanelBehaviorProps {
    * @default 'default'
    */
   type?: TabType;
+  /**
+   * Where the tab bar sits relative to its panels.
+   * `'top'` / `'bottom'` keep the bar horizontal; `'left'` / `'right'`
+   * switch it to a vertical strip. The selection indicator, scroll behavior,
+   * fades, and per-type visuals all adapt automatically.
+   * @default 'top'
+   */
+  placement?: TabPlacement;
   /**
    * Tab size. Supports 'xsmall', 'small', 'medium', 'large'.
    * Radio type supports 'large' (default, 40px) and 'medium' (32px),
@@ -199,6 +211,8 @@ interface CubeTabsProps extends BaseProps, OuterStyleProps, PanelBehaviorProps {
    * Sets horizontal padding only (e.g., "2x" → padding: "0 2x").
    */
   tabListPadding?: string;
+  /** Custom tasty styles for the tab bar (Bar sub-element). */
+  barStyles?: Styles;
   /** Custom tasty styles for the TabList sub-element. */
   tabListStyles?: Styles;
   /** Custom tasty styles for the Prefix sub-element. */

package/dist/components/navigation/Tabs/types.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.139.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.1 | Cube Dev Team */
 //#region src/components/navigation/Tabs/types.ts
 /**
 * Size mapping for radio type tabs.

package/dist/components/navigation/Tabs/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../../src/components/navigation/Tabs/types.ts"],"sourcesContent":["import type { BaseProps, OuterStyleProps, Styles } from '@tenphi/tasty';\nimport type { ReactNode } from 'react';\nimport type { CubeItemActionProps } from '../../actions/ItemAction';\nimport type { CubeMenuProps } from '../../actions/Menu';\nimport type { CubeItemProps } from '../../content/Item';\n\n// =============================================================================\n// Core Types\n// =============================================================================\n\n/** Visual appearance type for tabs */\nexport type TabType = 'default' | 'narrow' | 'file' | 'radio';\n\n/** Position for TabPicker and scroll arrows */\nexport type TabsActionPosition = 'prefix' | 'suffix';\n\n/**\n * Tab size options.\n * Radio type only supports 'medium' | 'large' (mapped to smaller Item sizes).\n */\nexport type TabSize = 'xsmall' | 'small' | 'medium' | 'large';\n\n/**\n * Size mapping for radio type tabs.\n * API sizes mapped to Item button sizes:\n * medium (default) -> xsmall (32px total), large -> medium (40px total).\n */\nexport const RADIO_SIZE_MAP: Record<'medium' | 'large', TabSize> = {\n  medium: 'xsmall',\n  large: 'medium',\n};\n\n/** How the tab `menu` is exposed alongside or instead of the overflow trigger. */\nexport type TabContextMenu = boolean | 'context-only';\n\n// =============================================================================\n// Shared Props Interfaces\n// =============================================================================\n\n/** Common props for panel rendering behavior */\nexport interface PanelBehaviorProps {\n  /** If true, panel is rendered but hidden when not active. */\n  prerender?: boolean;\n  /** If true, once visited the panel stays in DOM. */\n  keepMounted?: boolean;\n}\n\n/** Common props for QA attributes */\nexport interface QAProps {\n  /** QA selector attribute. */\n  qa?: string;\n  /** Additional QA value attribute. */\n  qaVal?: string;\n}\n\n// =============================================================================\n// Tab Style Props\n// =============================================================================\n\n/** Props from CubeItemProps that don't apply to Tab */\ntype OmittedItemProps =\n  | 'id' // Tab has its own id as Key type\n  | 'type' // Tab has its own TabType\n  | 'size' // Tab has its own TabSize\n  | 'theme' // Tabs have internal theming\n  | 'shape' // Tabs have internal shape logic\n  | 'description' // Tabs don't have descriptions\n  | 'descriptionPlacement'\n  | 'descriptionProps'\n  | 'hotkeys' // Tabs have their own keyboard navigation\n  | 'keyboardShortcutProps'\n  | 'labelProps' // Tabs use title prop instead\n  | 'labelRef'\n  | 'level' // Tabs don't use heading levels\n  | 'highlight' // Tabs don't use highlighting\n  | 'highlightCaseSensitive'\n  | 'highlightStyles'\n  | 'variant' // Tabs have internal variant logic\n  | 'htmlType' // Tab is always a button\n  | 'isSelected' // Handled internally by state\n  | 'preserveActionsSpace' // Set internally in TabButton\n  | 'disableActionsFocus' // Not used in Tab\n  | 'actions' // Tab has its own actions definition\n  | 'autoHideActions' // Tab has its own autoHideActions\n  | 'insideWrapper' // Internal Item wrapper prop\n  | 'showActions'; // Internal Item wrapper prop\n\n/** Common styling props for tabs - inherits style props from CubeItemProps */\nexport interface TabStyleProps extends Omit<CubeItemProps, OmittedItemProps> {\n  /**\n   * Tab size. Supports 'xsmall', 'small', 'medium', 'large'.\n   * Radio type supports 'large' (default, 40px) and 'medium' (32px),\n   * mapped to Item button sizes medium (32px) and xsmall (24px).\n   */\n  size?: TabSize;\n  /** Visual appearance type. */\n  type?: TabType;\n  /** Whether to show actions only on hover. */\n  autoHideActions?: boolean;\n}\n\n// =============================================================================\n// Component Props\n// =============================================================================\n\n/** Cache key type - primitives only for reliable comparison */\nexport type CacheKeyValue = string | number | boolean | null | undefined;\n\nexport interface CubeTabsProps\n  extends BaseProps,\n    OuterStyleProps,\n    PanelBehaviorProps {\n  /** Controlled active tab key. When provided, component is controlled. */\n  activeKey?: string;\n  /** Initial active tab key for uncontrolled mode. */\n  defaultActiveKey?: string;\n  /**\n   * Visual appearance type for tabs.\n   * - `default` - Standard tabs with selection indicator below (default)\n   * - `narrow` - Same as default but with collapsed vertical padding on labels\n   * - `file` - File-style tabs with border bottom highlight on selection, delimiter between tabs\n   * - `radio` - Radio button style for tab selection\n   * @default 'default'\n   */\n  type?: TabType;\n  /**\n   * Tab size. Supports 'xsmall', 'small', 'medium', 'large'.\n   * Radio type supports 'large' (default, 40px) and 'medium' (32px),\n   * mapped to Item button sizes medium (32px) and xsmall (24px).\n   * @default 'medium'\n   */\n  size?: TabSize;\n  /** Accessible label for the tab list. */\n  label?: string;\n  /** Content rendered before the tab list. */\n  prefix?: ReactNode;\n  /** Content rendered after the tab list. */\n  suffix?: ReactNode;\n  /** Callback when active tab changes. */\n  onChange?: (key: string) => void;\n  /** Callback when tab delete button is clicked. Presence enables delete buttons. */\n  onDelete?: (key: string) => void;\n  /** Callback when a tab title is changed. Enables title editing on tabs with isEditable. */\n  onTitleChange?: (key: string, newTitle: string) => void;\n  /** Whether to show tab actions only on hover. Can be overridden per-tab. */\n  autoHideActions?: boolean;\n  /**\n   * Whether tabs are editable by default.\n   * Can be overridden per-tab via Tab's isEditable prop.\n   * @default false\n   */\n  isEditable?: boolean;\n  /**\n   * Default menu items for all tabs.\n   * Can be overridden per-tab via Tab's menu prop.\n   * Set to `null` on individual Tab to disable menu for that tab.\n   */\n  menu?: ReactNode;\n  /**\n   * Default props for the menu trigger button.\n   * Can be overridden per-tab via Tab's menuTriggerProps prop.\n   * @default { icon: <MoreIcon /> }\n   */\n  menuTriggerProps?: Partial<CubeItemActionProps>;\n  /**\n   * Default props passed to the Menu component.\n   * Can be overridden per-tab via Tab's menuProps prop.\n   */\n  menuProps?: Partial<CubeMenuProps<object>>;\n  /**\n   * Context menu / overflow behavior for tab `menu` items.\n   * - `false` (default) — overflow trigger only; no right-click menu\n   * - `true` — overflow trigger and right-click menu\n   * - `'context-only'` — right-click menu only; no overflow trigger. Inline close\n   *   (`onDelete`) shows even when `menu` is non-empty, like tabs without a menu.\n   * Can be overridden per-tab via Tab's contextMenu prop.\n   * @default false\n   */\n  contextMenu?: TabContextMenu;\n  /**\n   * Callback when a menu action is triggered on any tab.\n   * Called with the action key and the tab key.\n   * Tab-level onAction is called first, then this.\n   */\n  onAction?: (action: string, tabKey: string) => void;\n  /** Custom tasty styles for the tab bar container. */\n  styles?: Styles;\n  /** QA selector attribute. */\n  qa?: string;\n  /** Tab components or Tabs.List with Tabs.Panel. */\n  children?: ReactNode;\n  /**\n   * Functional content renderer for optimized lazy evaluation.\n   * When provided, panel content is only evaluated for the active tab,\n   * while inactive tabs use cached content.\n   */\n  renderPanel?: (key: string) => ReactNode;\n  /**\n   * Cache keys for individual panels. Enables caching for specified panels.\n   */\n  panelCacheKeys?: Record<string | number, CacheKeyValue>;\n  /**\n   * Enable drag-and-drop tab reordering.\n   * When a tab picker is shown (`showTabPicker`), reordering is automatically\n   * enabled in the picker dropdown as well.\n   * @default false\n   */\n  isReorderable?: boolean;\n  /**\n   * Controlled order of tab keys.\n   * When provided, tabs are displayed in this order.\n   */\n  keyOrder?: string[];\n  /**\n   * Callback when tabs are reordered via drag-and-drop.\n   */\n  onReorder?: (newOrder: string[]) => void;\n  /**\n   * Whether to show a tab picker dropdown in the suffix area.\n   * - `true` - always show the tab picker\n   * - `false` - never show the tab picker (default)\n   * - `'auto'` - show only when tabs overflow (has horizontal scroll)\n   * @default false\n   */\n  showTabPicker?: boolean | 'auto';\n  /**\n   * Whether to show scroll arrow buttons in the suffix area.\n   * - `true` - always show scroll arrows\n   * - `false` - never show scroll arrows (default)\n   * - `'auto'` - show only when tabs overflow (has horizontal scroll)\n   * @default false\n   */\n  showScrollArrows?: boolean | 'auto';\n  /**\n   * Position of the tab picker dropdown.\n   * - `'prefix'` - render in the prefix slot (before tab list)\n   * - `'suffix'` - render in the suffix slot (after tab list)\n   * @default 'suffix'\n   */\n  tabPickerPosition?: TabsActionPosition;\n  /**\n   * Position of the scroll arrow buttons.\n   * - `'prefix'` - render in the prefix slot (before tab list)\n   * - `'suffix'` - render in the suffix slot (after tab list)\n   * @default 'suffix'\n   */\n  scrollArrowsPosition?: TabsActionPosition;\n  /**\n   * Visually hide the custom horizontal scrollbar in the tab list\n   * and skip its tracking logic. Does not affect tab picker, scroll arrows,\n   * or fade indicators — only the tiny scrollbar visual.\n   * @default false\n   */\n  hideTabListScroll?: boolean;\n  /**\n   * Inline padding for the tab list container.\n   * Sets horizontal padding only (e.g., \"2x\" → padding: \"0 2x\").\n   */\n  tabListPadding?: string;\n  /** Custom tasty styles for the TabList sub-element. */\n  tabListStyles?: Styles;\n  /** Custom tasty styles for the Prefix sub-element. */\n  prefixStyles?: Styles;\n  /** Custom tasty styles for the Suffix sub-element. */\n  suffixStyles?: Styles;\n}\n\nexport interface CubeTabProps extends TabStyleProps, PanelBehaviorProps {\n  /**\n   * Unique identifier for the tab.\n   * Auto-injected from the React `key` prop (converted to string).\n   */\n  id?: string;\n  /** Content displayed in the tab button. */\n  title: ReactNode;\n  /** Panel content rendered when tab is active. */\n  children?: ReactNode;\n  /** Disables the tab (cannot be selected). */\n  isDisabled?: boolean;\n  /** Actions to render in the tab. Rendered before menu trigger if tab has menu. */\n  actions?: ReactNode;\n  /** Whether the tab title can be edited. Overrides the Tabs-level isEditable default. */\n  isEditable?: boolean;\n  /** Callback when this tab's title is changed. Overrides parent's onTitleChange. */\n  onTitleChange?: (newTitle: string) => void;\n  /**\n   * Menu items to display in a dropdown menu on the tab.\n   * Pass Menu.Item elements directly - they will be wrapped in a Menu internally.\n   * Overrides the Tabs-level menu default. Set to `null` to disable menu.\n   */\n  menu?: ReactNode | null;\n  /**\n   * Props to customize the menu trigger button.\n   * Overrides the Tabs-level menuTriggerProps default.\n   */\n  menuTriggerProps?: Partial<CubeItemActionProps>;\n  /**\n   * Props passed to the Menu component.\n   * Overrides the Tabs-level menuProps default.\n   */\n  menuProps?: Partial<CubeMenuProps<object>>;\n  /**\n   * Context menu / overflow behavior. Same values as Tabs `contextMenu`.\n   * Uses the same menu items as `menu` prop.\n   * @default false\n   */\n  contextMenu?: TabContextMenu;\n  /**\n   * Callback when a menu action is triggered.\n   * Called with the action key from Menu.Item.\n   */\n  onAction?: (action: string) => void;\n}\n\nexport interface CubeTabPanelProps extends PanelBehaviorProps, QAProps {\n  /**\n   * Panel identifier. Must match a Tab's id.\n   * Auto-injected from the React `key` prop (converted to string).\n   */\n  id?: string;\n  /** Panel content. */\n  children?: ReactNode;\n  /** Custom tasty styles for the panel container. */\n  styles?: Styles;\n}\n\nexport interface CubeTabListProps {\n  /** Tab components. */\n  children?: ReactNode;\n}\n\n// =============================================================================\n// Internal Types\n// =============================================================================\n\n/**\n * Internal representation of a parsed Tab.\n * Uses `content` instead of `children` to distinguish panel content.\n */\nexport interface ParsedTab extends Omit<CubeTabProps, 'id' | 'children'> {\n  /** Tab key (always a string internally for React Aria compatibility) */\n  key: string;\n  /** Panel content extracted from Tab's children prop */\n  content: ReactNode;\n}\n\n/**\n * Internal representation of a parsed TabPanel.\n */\nexport interface ParsedPanel\n  extends Omit<CubeTabPanelProps, 'id' | 'children'> {\n  /** Panel key (always a string internally for React Aria compatibility) */\n  key: string;\n  /** Panel content extracted from TabPanel's children prop */\n  content: ReactNode;\n}\n"],"mappings":";;;;;;;AA2BA,MAAa,iBAAsD;CACjE,QAAQ;CACR,OAAO;CACR"}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../src/components/navigation/Tabs/types.ts"],"sourcesContent":["import type { BaseProps, OuterStyleProps, Styles } from '@tenphi/tasty';\nimport type { ReactNode } from 'react';\nimport type { CubeItemActionProps } from '../../actions/ItemAction';\nimport type { CubeMenuProps } from '../../actions/Menu';\nimport type { CubeItemProps } from '../../content/Item';\n\n// =============================================================================\n// Core Types\n// =============================================================================\n\n/** Visual appearance type for tabs */\nexport type TabType = 'default' | 'narrow' | 'file' | 'radio';\n\n/**\n * Where the tab bar sits relative to its panels.\n * - `'top'` / `'bottom'` keep the bar horizontal.\n * - `'left'` / `'right'` switch it to a vertical strip.\n */\nexport type TabPlacement = 'top' | 'bottom' | 'left' | 'right';\n\n/** Position for TabPicker and scroll arrows */\nexport type TabsActionPosition = 'prefix' | 'suffix';\n\n/**\n * Tab size options.\n * Radio type only supports 'medium' | 'large' (mapped to smaller Item sizes).\n */\nexport type TabSize = 'xsmall' | 'small' | 'medium' | 'large';\n\n/**\n * Size mapping for radio type tabs.\n * API sizes mapped to Item button sizes:\n * medium (default) -> xsmall (32px total), large -> medium (40px total).\n */\nexport const RADIO_SIZE_MAP: Record<'medium' | 'large', TabSize> = {\n  medium: 'xsmall',\n  large: 'medium',\n};\n\n/** How the tab `menu` is exposed alongside or instead of the overflow trigger. */\nexport type TabContextMenu = boolean | 'context-only';\n\n// =============================================================================\n// Shared Props Interfaces\n// =============================================================================\n\n/** Common props for panel rendering behavior */\nexport interface PanelBehaviorProps {\n  /** If true, panel is rendered but hidden when not active. */\n  prerender?: boolean;\n  /** If true, once visited the panel stays in DOM. */\n  keepMounted?: boolean;\n}\n\n/** Common props for QA attributes */\nexport interface QAProps {\n  /** QA selector attribute. */\n  qa?: string;\n  /** Additional QA value attribute. */\n  qaVal?: string;\n}\n\n// =============================================================================\n// Tab Style Props\n// =============================================================================\n\n/** Props from CubeItemProps that don't apply to Tab */\ntype OmittedItemProps =\n  | 'id' // Tab has its own id as Key type\n  | 'type' // Type is decided at the Tabs level, never per-tab\n  | 'size' // Tab has its own TabSize\n  | 'theme' // Tabs have internal theming\n  | 'shape' // Tabs have internal shape logic\n  | 'description' // Tabs don't have descriptions\n  | 'descriptionPlacement'\n  | 'descriptionProps'\n  | 'hotkeys' // Tabs have their own keyboard navigation\n  | 'keyboardShortcutProps'\n  | 'labelProps' // Tabs use title prop instead\n  | 'labelRef'\n  | 'level' // Tabs don't use heading levels\n  | 'highlight' // Tabs don't use highlighting\n  | 'highlightCaseSensitive'\n  | 'highlightStyles'\n  | 'variant' // Tabs have internal variant logic\n  | 'htmlType' // Tab is always a button\n  | 'isSelected' // Handled internally by state\n  | 'preserveActionsSpace' // Set internally in TabButton\n  | 'disableActionsFocus' // Not used in Tab\n  | 'actions' // Tab has its own actions definition\n  | 'autoHideActions' // Tab has its own autoHideActions\n  | 'insideWrapper' // Internal Item wrapper prop\n  | 'showActions'; // Internal Item wrapper prop\n\n/** Common styling props for tabs - inherits style props from CubeItemProps */\nexport interface TabStyleProps extends Omit<CubeItemProps, OmittedItemProps> {\n  /**\n   * Tab size. Supports 'xsmall', 'small', 'medium', 'large'.\n   * Radio type supports 'large' (default, 40px) and 'medium' (32px),\n   * mapped to Item button sizes medium (32px) and xsmall (24px).\n   */\n  size?: TabSize;\n  /** Whether to show actions only on hover. */\n  autoHideActions?: boolean;\n}\n\n// =============================================================================\n// Component Props\n// =============================================================================\n\n/** Cache key type - primitives only for reliable comparison */\nexport type CacheKeyValue = string | number | boolean | null | undefined;\n\nexport interface CubeTabsProps\n  extends BaseProps,\n    OuterStyleProps,\n    PanelBehaviorProps {\n  /** Controlled active tab key. When provided, component is controlled. */\n  activeKey?: string;\n  /** Initial active tab key for uncontrolled mode. */\n  defaultActiveKey?: string;\n  /**\n   * Visual appearance type for tabs.\n   * - `default` - Standard tabs with selection indicator below (default)\n   * - `narrow` - Same as default but with collapsed vertical padding on labels\n   * - `file` - File-style tabs with border bottom highlight on selection, delimiter between tabs\n   * - `radio` - Radio button style for tab selection\n   * @default 'default'\n   */\n  type?: TabType;\n  /**\n   * Where the tab bar sits relative to its panels.\n   * `'top'` / `'bottom'` keep the bar horizontal; `'left'` / `'right'`\n   * switch it to a vertical strip. The selection indicator, scroll behavior,\n   * fades, and per-type visuals all adapt automatically.\n   * @default 'top'\n   */\n  placement?: TabPlacement;\n  /**\n   * Tab size. Supports 'xsmall', 'small', 'medium', 'large'.\n   * Radio type supports 'large' (default, 40px) and 'medium' (32px),\n   * mapped to Item button sizes medium (32px) and xsmall (24px).\n   * @default 'medium'\n   */\n  size?: TabSize;\n  /** Accessible label for the tab list. */\n  label?: string;\n  /** Content rendered before the tab list. */\n  prefix?: ReactNode;\n  /** Content rendered after the tab list. */\n  suffix?: ReactNode;\n  /** Callback when active tab changes. */\n  onChange?: (key: string) => void;\n  /** Callback when tab delete button is clicked. Presence enables delete buttons. */\n  onDelete?: (key: string) => void;\n  /** Callback when a tab title is changed. Enables title editing on tabs with isEditable. */\n  onTitleChange?: (key: string, newTitle: string) => void;\n  /** Whether to show tab actions only on hover. Can be overridden per-tab. */\n  autoHideActions?: boolean;\n  /**\n   * Whether tabs are editable by default.\n   * Can be overridden per-tab via Tab's isEditable prop.\n   * @default false\n   */\n  isEditable?: boolean;\n  /**\n   * Default menu items for all tabs.\n   * Can be overridden per-tab via Tab's menu prop.\n   * Set to `null` on individual Tab to disable menu for that tab.\n   */\n  menu?: ReactNode;\n  /**\n   * Default props for the menu trigger button.\n   * Can be overridden per-tab via Tab's menuTriggerProps prop.\n   * @default { icon: <MoreIcon /> }\n   */\n  menuTriggerProps?: Partial<CubeItemActionProps>;\n  /**\n   * Default props passed to the Menu component.\n   * Can be overridden per-tab via Tab's menuProps prop.\n   */\n  menuProps?: Partial<CubeMenuProps<object>>;\n  /**\n   * Context menu / overflow behavior for tab `menu` items.\n   * - `false` (default) — overflow trigger only; no right-click menu\n   * - `true` — overflow trigger and right-click menu\n   * - `'context-only'` — right-click menu only; no overflow trigger. Inline close\n   *   (`onDelete`) shows even when `menu` is non-empty, like tabs without a menu.\n   * Can be overridden per-tab via Tab's contextMenu prop.\n   * @default false\n   */\n  contextMenu?: TabContextMenu;\n  /**\n   * Callback when a menu action is triggered on any tab.\n   * Called with the action key and the tab key.\n   * Tab-level onAction is called first, then this.\n   */\n  onAction?: (action: string, tabKey: string) => void;\n  /** Custom tasty styles for the tab bar container. */\n  styles?: Styles;\n  /** QA selector attribute. */\n  qa?: string;\n  /** Tab components or Tabs.List with Tabs.Panel. */\n  children?: ReactNode;\n  /**\n   * Functional content renderer for optimized lazy evaluation.\n   * When provided, panel content is only evaluated for the active tab,\n   * while inactive tabs use cached content.\n   */\n  renderPanel?: (key: string) => ReactNode;\n  /**\n   * Cache keys for individual panels. Enables caching for specified panels.\n   */\n  panelCacheKeys?: Record<string | number, CacheKeyValue>;\n  /**\n   * Enable drag-and-drop tab reordering.\n   * When a tab picker is shown (`showTabPicker`), reordering is automatically\n   * enabled in the picker dropdown as well.\n   * @default false\n   */\n  isReorderable?: boolean;\n  /**\n   * Controlled order of tab keys.\n   * When provided, tabs are displayed in this order.\n   */\n  keyOrder?: string[];\n  /**\n   * Callback when tabs are reordered via drag-and-drop.\n   */\n  onReorder?: (newOrder: string[]) => void;\n  /**\n   * Whether to show a tab picker dropdown in the suffix area.\n   * - `true` - always show the tab picker\n   * - `false` - never show the tab picker (default)\n   * - `'auto'` - show only when tabs overflow (has horizontal scroll)\n   * @default false\n   */\n  showTabPicker?: boolean | 'auto';\n  /**\n   * Whether to show scroll arrow buttons in the suffix area.\n   * - `true` - always show scroll arrows\n   * - `false` - never show scroll arrows (default)\n   * - `'auto'` - show only when tabs overflow (has horizontal scroll)\n   * @default false\n   */\n  showScrollArrows?: boolean | 'auto';\n  /**\n   * Position of the tab picker dropdown.\n   * - `'prefix'` - render in the prefix slot (before tab list)\n   * - `'suffix'` - render in the suffix slot (after tab list)\n   * @default 'suffix'\n   */\n  tabPickerPosition?: TabsActionPosition;\n  /**\n   * Position of the scroll arrow buttons.\n   * - `'prefix'` - render in the prefix slot (before tab list)\n   * - `'suffix'` - render in the suffix slot (after tab list)\n   * @default 'suffix'\n   */\n  scrollArrowsPosition?: TabsActionPosition;\n  /**\n   * Visually hide the custom horizontal scrollbar in the tab list\n   * and skip its tracking logic. Does not affect tab picker, scroll arrows,\n   * or fade indicators — only the tiny scrollbar visual.\n   * @default false\n   */\n  hideTabListScroll?: boolean;\n  /**\n   * Inline padding for the tab list container.\n   * Sets horizontal padding only (e.g., \"2x\" → padding: \"0 2x\").\n   */\n  tabListPadding?: string;\n  /** Custom tasty styles for the tab bar (Bar sub-element). */\n  barStyles?: Styles;\n  /** Custom tasty styles for the TabList sub-element. */\n  tabListStyles?: Styles;\n  /** Custom tasty styles for the Prefix sub-element. */\n  prefixStyles?: Styles;\n  /** Custom tasty styles for the Suffix sub-element. */\n  suffixStyles?: Styles;\n}\n\nexport interface CubeTabProps extends TabStyleProps, PanelBehaviorProps {\n  /**\n   * Unique identifier for the tab.\n   * Auto-injected from the React `key` prop (converted to string).\n   */\n  id?: string;\n  /** Content displayed in the tab button. */\n  title: ReactNode;\n  /** Panel content rendered when tab is active. */\n  children?: ReactNode;\n  /** Disables the tab (cannot be selected). */\n  isDisabled?: boolean;\n  /** Actions to render in the tab. Rendered before menu trigger if tab has menu. */\n  actions?: ReactNode;\n  /** Whether the tab title can be edited. Overrides the Tabs-level isEditable default. */\n  isEditable?: boolean;\n  /** Callback when this tab's title is changed. Overrides parent's onTitleChange. */\n  onTitleChange?: (newTitle: string) => void;\n  /**\n   * Menu items to display in a dropdown menu on the tab.\n   * Pass Menu.Item elements directly - they will be wrapped in a Menu internally.\n   * Overrides the Tabs-level menu default. Set to `null` to disable menu.\n   */\n  menu?: ReactNode | null;\n  /**\n   * Props to customize the menu trigger button.\n   * Overrides the Tabs-level menuTriggerProps default.\n   */\n  menuTriggerProps?: Partial<CubeItemActionProps>;\n  /**\n   * Props passed to the Menu component.\n   * Overrides the Tabs-level menuProps default.\n   */\n  menuProps?: Partial<CubeMenuProps<object>>;\n  /**\n   * Context menu / overflow behavior. Same values as Tabs `contextMenu`.\n   * Uses the same menu items as `menu` prop.\n   * @default false\n   */\n  contextMenu?: TabContextMenu;\n  /**\n   * Callback when a menu action is triggered.\n   * Called with the action key from Menu.Item.\n   */\n  onAction?: (action: string) => void;\n}\n\nexport interface CubeTabPanelProps extends PanelBehaviorProps, QAProps {\n  /**\n   * Panel identifier. Must match a Tab's id.\n   * Auto-injected from the React `key` prop (converted to string).\n   */\n  id?: string;\n  /** Panel content. */\n  children?: ReactNode;\n  /** Custom tasty styles for the panel container. */\n  styles?: Styles;\n}\n\nexport interface CubeTabListProps {\n  /** Tab components. */\n  children?: ReactNode;\n}\n\n// =============================================================================\n// Internal Types\n// =============================================================================\n\n/**\n * Internal representation of a parsed Tab.\n * Uses `content` instead of `children` to distinguish panel content.\n */\nexport interface ParsedTab extends Omit<CubeTabProps, 'id' | 'children'> {\n  /** Tab key (always a string internally for React Aria compatibility) */\n  key: string;\n  /** Panel content extracted from Tab's children prop */\n  content: ReactNode;\n}\n\n/**\n * Internal representation of a parsed TabPanel.\n */\nexport interface ParsedPanel\n  extends Omit<CubeTabPanelProps, 'id' | 'children'> {\n  /** Panel key (always a string internally for React Aria compatibility) */\n  key: string;\n  /** Panel content extracted from TabPanel's children prop */\n  content: ReactNode;\n}\n"],"mappings":";;;;;;;AAkCA,MAAa,iBAAsD;CACjE,QAAQ;CACR,OAAO;CACR"}

package/dist/components/navigation/Tabs/use-tab-editing.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.139.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.1 | Cube Dev Team */
 import { useCallback, useState } from "react";
 
 //#region src/components/navigation/Tabs/use-tab-editing.ts