@cube-dev/ui-kit 0.113.1 → 0.115.0

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

@@ -0,0 +1,29 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/navigation/Tabs/TabsContext.tsx
+const TabsContext = createContext(null);
+TabsContext.displayName = "TabsContext";
+function TabsProvider({ value, children }) {
+	return /* @__PURE__ */ jsx(TabsContext.Provider, {
+		value,
+		children
+	});
+}
+function useTabsContext() {
+	const context = useContext(TabsContext);
+	if (!context) throw new Error("useTabsContext must be used within a TabsProvider");
+	return context;
+}
+/**
+* Optional hook to get TabsContext value.
+* Returns null when used outside a TabsProvider (e.g., for TabsAction in standalone usage).
+*/
+function useOptionalTabsContext() {
+	return useContext(TabsContext);
+}
+
+//#endregion
+export { TabsProvider, useOptionalTabsContext, useTabsContext };
+//# sourceMappingURL=TabsContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabsContext.js","names":[],"sources":["../../../../src/components/navigation/Tabs/TabsContext.tsx"],"sourcesContent":["import { createContext, ReactNode, useContext } from 'react';\n\nimport type {\n  DraggableCollectionState,\n  DroppableCollectionState,\n  TabListState,\n} from 'react-stately';\nimport type { CubeItemActionProps } from '../../actions/ItemAction';\nimport type { CubeMenuProps } from '../../actions/Menu';\nimport type { TabSize, TabType } from './types';\n\n// =============================================================================\n// Context Value Interface\n// =============================================================================\n\nexport interface TabsContextValue {\n  /** Tab list state from React Stately */\n  state: TabListState<object>;\n  /** Parent-level type default */\n  type: TabType;\n  /** Parent-level size default */\n  size?: TabSize;\n  /** Parent-level autoHideActions default */\n  autoHideActions?: boolean;\n  /** Parent-level isEditable default */\n  isEditable?: boolean;\n  /** Parent-level menu default */\n  menu?: ReactNode;\n  /** Parent-level menuTriggerProps default */\n  menuTriggerProps?: Partial<CubeItemActionProps>;\n  /** Parent-level menuProps default */\n  menuProps?: Partial<CubeMenuProps<object>>;\n  /** Parent-level contextMenu default */\n  contextMenu?: boolean;\n  /** Callback when tab is deleted */\n  onDelete?: (key: string) => void;\n  /** Parent-level onAction callback */\n  onAction?: (action: string, tabKey: string) => void;\n  /** Drag state for reorderable tabs (undefined if not reorderable) */\n  dragState?: DraggableCollectionState;\n  /** Drop state for reorderable tabs (undefined if not reorderable) */\n  dropState?: DroppableCollectionState;\n\n  // Editing callbacks\n  /** Current tab being edited (null if none) */\n  editingKey: string | null;\n  /** Current edit value */\n  editValue: string;\n  /** Set the edit value */\n  setEditValue: (value: string) => void;\n  /** Start editing a tab */\n  startEditing: (key: string, currentTitle: string) => void;\n  /** Submit the current edit */\n  submitEditing: (\n    key: string,\n    newTitle: string,\n    tabOnTitleChange?: (title: string) => void,\n  ) => void;\n  /** Cancel the current edit */\n  cancelEditing: () => void;\n}\n\n// =============================================================================\n// Context\n// =============================================================================\n\nconst TabsContext = createContext<TabsContextValue | null>(null);\n\nTabsContext.displayName = 'TabsContext';\n\n// =============================================================================\n// Provider\n// =============================================================================\n\nexport interface TabsProviderProps {\n  value: TabsContextValue;\n  children: ReactNode;\n}\n\nexport function TabsProvider({ value, children }: TabsProviderProps) {\n  return <TabsContext.Provider value={value}>{children}</TabsContext.Provider>;\n}\n\n// =============================================================================\n// Hook\n// =============================================================================\n\nexport function useTabsContext(): TabsContextValue {\n  const context = useContext(TabsContext);\n\n  if (!context) {\n    throw new Error('useTabsContext must be used within a TabsProvider');\n  }\n\n  return context;\n}\n\n/**\n * Optional hook to get TabsContext value.\n * Returns null when used outside a TabsProvider (e.g., for TabsAction in standalone usage).\n */\nexport function useOptionalTabsContext(): TabsContextValue | null {\n  return useContext(TabsContext);\n}\n"],"mappings":";;;;;AAkEA,MAAM,cAAc,cAAuC,KAAK;AAEhE,YAAY,cAAc;AAW1B,SAAgB,aAAa,EAAE,OAAO,YAA+B;AACnE,QAAO,oBAAC,YAAY;EAAgB;EAAQ;GAAgC;;AAO9E,SAAgB,iBAAmC;CACjD,MAAM,UAAU,WAAW,YAAY;AAEvC,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,oDAAoD;AAGtE,QAAO;;;;;;AAOT,SAAgB,yBAAkD;AAChE,QAAO,WAAW,YAAY"}

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

@@ -0,0 +1,4 @@
+
+import { CubeTabListProps, CubeTabPanelProps, CubeTabProps, CubeTabsProps, TabSize, TabType, TabsActionPosition } from "./types.js";
+import { CubeTabsActionProps, TabsAction } from "./TabsAction.js";
+import { Tab, Tabs } from "./Tabs.js";

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

@@ -0,0 +1,318 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { tasty } from "../../../tasty/tasty.js";
+import { _Item } from "../../content/Item/Item.js";
+
+//#region src/components/navigation/Tabs/styled.ts
+const TabsElement = tasty({ styles: {
+	display: "flex",
+	flow: "row",
+	placeItems: {
+		"": "end stretch",
+		"type=radio | type=file": "stretch"
+	},
+	overflow: "visible",
+	border: {
+		"": 0,
+		"(type=default | type=file | type=narrow) & has-panels": "bottom"
+	},
+	width: {
+		"": "100%",
+		"type=radio": "max-content"
+	},
+	padding: {
+		"": 0,
+		"type=radio": ".5x"
+	},
+	radius: {
+		"": 0,
+		"type=radio": "1cr"
+	},
+	fill: {
+		"": "#clear",
+		"type=radio": "#dark.06"
+	},
+	flexShrink: 0,
+	flexGrow: 0,
+	$transition: "$tab-transition",
+	"$tab-indicator-size": {
+		"": "2bw",
+		"size=large": "1ow"
+	},
+	Prefix: {
+		$: ">",
+		display: "flex",
+		placeItems: "center",
+		placeContent: "center",
+		flexShrink: 0,
+		placeSelf: "stretch",
+		border: {
+			"": 0,
+			"type=file": "right"
+		}
+	},
+	Suffix: {
+		$: ">",
+		display: "flex",
+		placeItems: "center",
+		placeContent: "center",
+		flexShrink: 0,
+		placeSelf: "stretch",
+		border: {
+			"": 0,
+			"type=file": "left"
+		}
+	},
+	ScrollWrapper: {
+		$: ">",
+		position: "relative",
+		display: "flex",
+		flexGrow: 1,
+		flexShrink: 1,
+		width: "min 0",
+		overflow: {
+			"": "hidden",
+			"type=radio": "visible"
+		}
+	},
+	Scroll: {
+		$: "> ScrollWrapper >",
+		position: "relative",
+		display: "block",
+		overflow: {
+			"": "auto hidden",
+			"type=radio": "visible"
+		},
+		scrollbar: "none",
+		flexGrow: 1,
+		width: "100%",
+		padding: {
+			"": 0,
+			"type=radio": ".5x"
+		},
+		margin: {
+			"": 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": {
+			"": "rgb(0 0 0 / 1)",
+			"fade-left": "rgb(0 0 0 / 0)"
+		},
+		"#tabs-fade-right": {
+			"": "rgb(0 0 0 / 1)",
+			"fade-right": "rgb(0 0 0 / 0)"
+		}
+	},
+	TabList: {
+		$: "> ScrollWrapper > Scroll >",
+		position: "relative",
+		display: "grid",
+		gridAutoFlow: "column",
+		gridAutoColumns: {
+			"": "auto",
+			"type=radio": "1fr"
+		},
+		gap: {
+			"": 0,
+			"type=narrow": "2x",
+			"type=radio": ".5x"
+		},
+		placeContent: "start",
+		overflow: "visible",
+		width: {
+			"": "max-content",
+			"type=radio": "100%"
+		}
+	},
+	$size: {
+		"": "$size-md",
+		"size=xsmall": "$size-xs",
+		"size=small": "$size-sm",
+		"size=medium": "$size-md",
+		"size=large": "$size-lg",
+		"size=xlarge": "$size-xl"
+	},
+	ScrollbarH: {
+		$: "> ScrollWrapper >",
+		position: "absolute",
+		bottom: "1px",
+		left: "$scrollbar-h-left",
+		height: "1ow",
+		width: "$scrollbar-h-width",
+		radius: "round",
+		fill: "#dark.35",
+		opacity: {
+			"": 0,
+			"focused | scrolling": 1
+		},
+		transition: "opacity 0.15s",
+		pointerEvents: "none"
+	}
+} });
+const TabElement = tasty(_Item, {
+	as: "button",
+	styles: {
+		radius: {
+			"": false,
+			"type=radio": true,
+			"type=default | type=narrow": "top"
+		},
+		color: {
+			"": "#dark-02",
+			"(type=default | type=narrow) & (hovered & !selected)": "#primary-text",
+			"(type=default | type=narrow) & selected": "#primary-text",
+			disabled: "#dark-04"
+		},
+		fill: {
+			"": "#clear",
+			"type=file": "#light",
+			"type=file & hovered": "#light.5",
+			"type=radio & hovered": "#white.5",
+			"(type=file | type=radio) & selected": "#white"
+		},
+		border: {
+			"": "#clear",
+			"type=file": "0 #clear"
+		},
+		preset: {
+			"": "t3m",
+			"size=xsmall": "t4"
+		},
+		shadow: {
+			"": "$selection-shadow",
+			"focused & focus-visible": "inset 0 0 0 1bw #primary-text, $selection-shadow",
+			editing: "inset 0 0 0 1bw #primary-text, $selection-shadow",
+			"type=radio & selected": "$item-shadow",
+			"type=radio & selected & focused & focus-visible": "$item-shadow, inset 0 0 0 1bw #primary-text"
+		},
+		"$selection-shadow": {
+			"": "inset 0 0 0 0 #primary",
+			"type=file & selected": "inset 0 (-1 * $tab-indicator-size) 0 0 #primary",
+			"!type=file": "inset 0 0 0 0 #primary.0"
+		},
+		"$label-padding-left": {
+			"": "$inline-padding",
+			"has-start-content": 0,
+			"type=narrow": 0
+		},
+		"$label-padding-right": {
+			"": "$inline-padding",
+			"has-end-content": 0,
+			"type=narrow": 0
+		},
+		Label: { placeSelf: {
+			"": "center start",
+			"type=radio": "center start",
+			"type=radio & !has-prefix & !has-suffix & !has-icon & !has-right-icon": "center"
+		} },
+		Actions: { transition: false }
+	}
+});
+const TabContainer = tasty({ styles: {
+	position: "relative",
+	display: "grid",
+	border: {
+		"": 0,
+		"type=file": "right"
+	},
+	cursor: {
+		"": "default",
+		draggable: "grab",
+		dragging: "grabbing"
+	},
+	$size: {
+		"": "$size-md",
+		"size=xsmall": "$size-xs",
+		"size=small": "$size-sm",
+		"size=medium": "$size-md",
+		"size=large": "$size-lg",
+		"size=xlarge": "$size-xl"
+	},
+	Actions: {
+		$: ">",
+		position: "absolute",
+		inset: "1bw 1bw auto auto",
+		display: "flex",
+		gap: "1bw",
+		placeItems: "center",
+		placeContent: "center end",
+		pointerEvents: "auto",
+		height: "min ($size - 2bw)",
+		padding: "0 $side-padding",
+		opacity: {
+			"": 1,
+			"auto-hide-actions": 0,
+			"auto-hide-actions & (active | :hover | :focus-within | :has([data-pressed]))": 1
+		},
+		transition: "opacity $transition",
+		"$action-size": "min(max((2x + 2bw), ($size - 1x - 2bw)), (3x - 2bw))",
+		"$side-padding": "(($size - $action-size - 2bw) / 2)"
+	}
+} });
+const DropIndicatorElement = tasty({ styles: {
+	zIndex: 10,
+	position: "absolute",
+	pointerEvents: "none",
+	opacity: {
+		"": 0,
+		"drop-target": 1
+	},
+	fill: "#primary",
+	width: ".5x",
+	top: 0,
+	bottom: 0,
+	left: {
+		"": "auto",
+		before: "-2px"
+	},
+	right: {
+		"": "auto",
+		after: "-2px"
+	}
+} });
+const TabIndicatorElement = tasty({ styles: {
+	position: "absolute",
+	bottom: "0",
+	left: 0,
+	height: "$tab-indicator-size",
+	fill: "#primary",
+	transition: "left $tab-transition ease-in-out, width $tab-transition ease-in-out",
+	pointerEvents: "none"
+} });
+const TabPanelElement = tasty({
+	as: "section",
+	styles: {
+		display: "contents",
+		hide: {
+			"": true,
+			active: false
+		}
+	}
+});
+const EditableTitleInputElement = tasty({
+	as: "input",
+	styles: {
+		border: 0,
+		padding: 0,
+		margin: 0,
+		fill: "transparent",
+		outline: 0,
+		preset: "inherit",
+		color: "inherit",
+		width: "initial $input-width 100%"
+	}
+});
+const HiddenMeasure = tasty({ styles: {
+	position: "absolute",
+	visibility: "hidden",
+	whiteSpace: "pre",
+	font: "inherit",
+	pointerEvents: "none",
+	height: 0,
+	overflow: "hidden"
+} });
+
+//#endregion
+export { DropIndicatorElement, EditableTitleInputElement, HiddenMeasure, TabContainer, TabElement, TabIndicatorElement, TabPanelElement, TabsElement };
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","names":["Item"],"sources":["../../../../src/components/navigation/Tabs/styled.ts"],"sourcesContent":["import { tasty } from '../../../tasty';\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': '#dark.06',\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      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      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=narrow': '2x',\n        'type=radio': '.5x',\n      },\n      placeContent: 'start',\n      overflow: 'visible',\n      width: {\n        '': 'max-content',\n        'type=radio': '100%',\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': true,\n      'type=default | type=narrow': 'top',\n    },\n    color: {\n      '': '#dark-02',\n      '(type=default | type=narrow) & (hovered & !selected)': '#primary-text',\n      '(type=default | type=narrow) & selected': '#primary-text',\n      disabled: '#dark-04',\n    },\n    fill: {\n      '': '#clear',\n      'type=file': '#light',\n      'type=file & hovered': '#light.5',\n      'type=radio & hovered': '#white.5',\n      '(type=file | type=radio) & selected': '#white',\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    '$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    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\n// =============================================================================\n// Editable Title Input\n// =============================================================================\n\nexport const EditableTitleInputElement = tasty({\n  as: 'input',\n  styles: {\n    border: 0,\n    padding: 0,\n    margin: 0,\n    fill: 'transparent',\n    outline: 0,\n    preset: 'inherit',\n    color: 'inherit',\n    width: 'initial $input-width 100%',\n  },\n});\n\nexport const HiddenMeasure = tasty({\n  styles: {\n    position: 'absolute',\n    visibility: 'hidden',\n    whiteSpace: 'pre',\n    font: 'inherit',\n    pointerEvents: 'none',\n    height: 0,\n    overflow: 'hidden',\n  },\n});\n"],"mappings":"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"}

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

@@ -0,0 +1,257 @@
+
+import { Styles } from "../../../tasty/styles/types.js";
+import { BaseProps, OuterStyleProps } from "../../../tasty/types.js";
+import "../../../tasty/index.js";
+import "../../content/Item/index.js";
+import { CubeItemProps } from "../../content/Item/Item.js";
+import { CubeItemActionProps } from "../../actions/ItemAction/ItemAction.js";
+import "../../actions/ItemAction/index.js";
+import { CubeMenuProps } from "../../actions/Menu/Menu.js";
+import "../../actions/Menu/index.js";
+import { ReactNode } from "react";
+
+//#region src/components/navigation/Tabs/types.d.ts
+/** Visual appearance type for tabs */
+type TabType = 'default' | 'narrow' | 'file' | 'radio';
+/** Position for TabPicker and scroll arrows */
+type TabsActionPosition = 'prefix' | 'suffix';
+/**
+ * Tab size options.
+ * Radio type only supports 'medium' | 'large' (mapped to smaller Item sizes).
+ */
+type TabSize = 'xsmall' | 'small' | 'medium' | 'large';
+/** Common props for panel rendering behavior */
+interface PanelBehaviorProps {
+  /** If true, panel is rendered but hidden when not active. */
+  prerender?: boolean;
+  /** If true, once visited the panel stays in DOM. */
+  keepMounted?: boolean;
+}
+/** Common props for QA attributes */
+interface QAProps {
+  /** QA selector attribute. */
+  qa?: string;
+  /** Additional QA value attribute. */
+  qaVal?: string;
+}
+/** Props from CubeItemProps that don't apply to Tab */
+type OmittedItemProps = 'id' | 'type' | 'size' | 'theme' | 'shape' | 'icon' | 'rightIcon' | 'prefix' | 'suffix' | 'description' | 'descriptionPlacement' | 'descriptionProps' | 'tooltip' | 'defaultTooltipPlacement' | 'hotkeys' | 'keyboardShortcutProps' | 'loadingSlot' | 'isLoading' | 'labelProps' | 'labelRef' | 'level' | 'highlight' | 'highlightCaseSensitive' | 'highlightStyles' | 'variant' | 'htmlType' | 'isSelected' | 'preserveActionsSpace' | 'disableActionsFocus' | 'actions' | 'autoHideActions';
+/** Common styling props for tabs - inherits style props from CubeItemProps */
+interface TabStyleProps extends Omit<CubeItemProps, OmittedItemProps> {
+  /**
+   * Tab size. Supports 'xsmall', 'small', 'medium', 'large'.
+   * Radio type only supports 'medium' | 'large' (mapped to smaller Item sizes).
+   */
+  size?: TabSize;
+  /** Visual appearance type. */
+  type?: TabType;
+  /** Whether to show actions only on hover. */
+  autoHideActions?: boolean;
+}
+/** Cache key type - primitives only for reliable comparison */
+type CacheKeyValue = string | number | boolean | null | undefined;
+interface CubeTabsProps extends BaseProps, OuterStyleProps, PanelBehaviorProps {
+  /** Controlled active tab key. When provided, component is controlled. */
+  activeKey?: string;
+  /** Initial active tab key for uncontrolled mode. */
+  defaultActiveKey?: string;
+  /**
+   * Visual appearance type for tabs.
+   * - `default` - Standard tabs with selection indicator below (default)
+   * - `narrow` - Same as default but with collapsed vertical padding on labels
+   * - `file` - File-style tabs with border bottom highlight on selection, delimiter between tabs
+   * - `radio` - Radio button style for tab selection
+   * @default 'default'
+   */
+  type?: TabType;
+  /**
+   * Tab size. Supports 'xsmall', 'small', 'medium', 'large'.
+   * Radio type only supports 'medium' | 'large' (mapped to smaller Item sizes).
+   * @default 'medium'
+   */
+  size?: TabSize;
+  /** Accessible label for the tab list. */
+  label?: string;
+  /** Content rendered before the tab list. */
+  prefix?: ReactNode;
+  /** Content rendered after the tab list. */
+  suffix?: ReactNode;
+  /** Callback when active tab changes. */
+  onChange?: (key: string) => void;
+  /** Callback when tab delete button is clicked. Presence enables delete buttons. */
+  onDelete?: (key: string) => void;
+  /** Callback when a tab title is changed. Enables title editing on tabs with isEditable. */
+  onTitleChange?: (key: string, newTitle: string) => void;
+  /** Whether to show tab actions only on hover. Can be overridden per-tab. */
+  autoHideActions?: boolean;
+  /**
+   * Whether tabs are editable by default.
+   * Can be overridden per-tab via Tab's isEditable prop.
+   * @default false
+   */
+  isEditable?: boolean;
+  /**
+   * Default menu items for all tabs.
+   * Can be overridden per-tab via Tab's menu prop.
+   * Set to `null` on individual Tab to disable menu for that tab.
+   */
+  menu?: ReactNode;
+  /**
+   * Default props for the menu trigger button.
+   * Can be overridden per-tab via Tab's menuTriggerProps prop.
+   * @default { icon: <MoreIcon /> }
+   */
+  menuTriggerProps?: Partial<CubeItemActionProps>;
+  /**
+   * Default props passed to the Menu component.
+   * Can be overridden per-tab via Tab's menuProps prop.
+   */
+  menuProps?: Partial<CubeMenuProps<object>>;
+  /**
+   * Whether to show context menu on right-click for all tabs.
+   * Can be overridden per-tab via Tab's contextMenu prop.
+   * @default false
+   */
+  contextMenu?: boolean;
+  /**
+   * Callback when a menu action is triggered on any tab.
+   * Called with the action key and the tab key.
+   * Tab-level onAction is called first, then this.
+   */
+  onAction?: (action: string, tabKey: string) => void;
+  /** Custom tasty styles for the tab bar container. */
+  styles?: Styles;
+  /** QA selector attribute. */
+  qa?: string;
+  /** Tab components or Tabs.List with Tabs.Panel. */
+  children?: ReactNode;
+  /**
+   * Functional content renderer for optimized lazy evaluation.
+   * When provided, panel content is only evaluated for the active tab,
+   * while inactive tabs use cached content.
+   */
+  renderPanel?: (key: string) => ReactNode;
+  /**
+   * Cache keys for individual panels. Enables caching for specified panels.
+   */
+  panelCacheKeys?: Record<string | number, CacheKeyValue>;
+  /**
+   * Enable drag-and-drop tab reordering.
+   * @default false
+   */
+  isReorderable?: boolean;
+  /**
+   * Controlled order of tab keys.
+   * When provided, tabs are displayed in this order.
+   */
+  keyOrder?: string[];
+  /**
+   * Callback when tabs are reordered via drag-and-drop.
+   */
+  onReorder?: (newOrder: string[]) => void;
+  /**
+   * Whether to show a tab picker dropdown in the suffix area.
+   * - `true` - always show the tab picker
+   * - `false` - never show the tab picker (default)
+   * - `'auto'` - show only when tabs overflow (has horizontal scroll)
+   * @default false
+   */
+  showTabPicker?: boolean | 'auto';
+  /**
+   * Whether to show scroll arrow buttons in the suffix area.
+   * - `true` - always show scroll arrows
+   * - `false` - never show scroll arrows (default)
+   * - `'auto'` - show only when tabs overflow (has horizontal scroll)
+   * @default false
+   */
+  showScrollArrows?: boolean | 'auto';
+  /**
+   * Position of the tab picker dropdown.
+   * - `'prefix'` - render in the prefix slot (before tab list)
+   * - `'suffix'` - render in the suffix slot (after tab list)
+   * @default 'suffix'
+   */
+  tabPickerPosition?: TabsActionPosition;
+  /**
+   * Position of the scroll arrow buttons.
+   * - `'prefix'` - render in the prefix slot (before tab list)
+   * - `'suffix'` - render in the suffix slot (after tab list)
+   * @default 'suffix'
+   */
+  scrollArrowsPosition?: TabsActionPosition;
+  /**
+   * Inline padding for the tab list container.
+   * Sets horizontal padding only (e.g., "2x" → padding: "0 2x").
+   */
+  tabListPadding?: string;
+  /** Custom tasty styles for the TabList sub-element. */
+  tabListStyles?: Styles;
+  /** Custom tasty styles for the Prefix sub-element. */
+  prefixStyles?: Styles;
+  /** Custom tasty styles for the Suffix sub-element. */
+  suffixStyles?: Styles;
+}
+interface CubeTabProps extends TabStyleProps, PanelBehaviorProps {
+  /**
+   * Unique identifier for the tab.
+   * Auto-injected from the React `key` prop (converted to string).
+   */
+  id?: string;
+  /** Content displayed in the tab button. */
+  title: ReactNode;
+  /** Panel content rendered when tab is active. */
+  children?: ReactNode;
+  /** Disables the tab (cannot be selected). */
+  isDisabled?: boolean;
+  /** Actions to render in the tab. Rendered before menu trigger if tab has menu. */
+  actions?: ReactNode;
+  /** Whether the tab title can be edited. Overrides the Tabs-level isEditable default. */
+  isEditable?: boolean;
+  /** Callback when this tab's title is changed. Overrides parent's onTitleChange. */
+  onTitleChange?: (newTitle: string) => void;
+  /**
+   * Menu items to display in a dropdown menu on the tab.
+   * Pass Menu.Item elements directly - they will be wrapped in a Menu internally.
+   * Overrides the Tabs-level menu default. Set to `null` to disable menu.
+   */
+  menu?: ReactNode | null;
+  /**
+   * Props to customize the menu trigger button.
+   * Overrides the Tabs-level menuTriggerProps default.
+   */
+  menuTriggerProps?: Partial<CubeItemActionProps>;
+  /**
+   * Props passed to the Menu component.
+   * Overrides the Tabs-level menuProps default.
+   */
+  menuProps?: Partial<CubeMenuProps<object>>;
+  /**
+   * Whether to show context menu on right-click.
+   * Uses the same menu items as `menu` prop.
+   * @default false
+   */
+  contextMenu?: boolean;
+  /**
+   * Callback when a menu action is triggered.
+   * Called with the action key from Menu.Item.
+   */
+  onAction?: (action: string) => void;
+}
+interface CubeTabPanelProps extends PanelBehaviorProps, QAProps {
+  /**
+   * Panel identifier. Must match a Tab's id.
+   * Auto-injected from the React `key` prop (converted to string).
+   */
+  id?: string;
+  /** Panel content. */
+  children?: ReactNode;
+  /** Custom tasty styles for the panel container. */
+  styles?: Styles;
+}
+interface CubeTabListProps {
+  /** Tab components. */
+  children?: ReactNode;
+}
+//#endregion
+export { CubeTabListProps, CubeTabPanelProps, CubeTabProps, CubeTabsProps, TabSize, TabType, TabsActionPosition };
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1,14 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+//#region src/components/navigation/Tabs/types.ts
+/**
+* Size mapping for radio type tabs.
+* Radio type uses smaller sizes similar to RadioGroup tabs mode.
+*/
+const RADIO_SIZE_MAP = {
+	medium: "xsmall",
+	large: "medium"
+};
+
+//#endregion
+export { RADIO_SIZE_MAP };
+//# sourceMappingURL=types.js.map