@tiny-design/react 1.0.4

package/lib/tabs/tabs.js

@@ -0,0 +1,280 @@
+const require_runtime = require("../_virtual/_rolldown/runtime.js");
+const require_config_context = require("../config-provider/config-context.js");
+const require_general = require("../_utils/general.js");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/tabs/tabs.tsx
+const Tabs = react.default.forwardRef((props, ref) => {
+	const { type = "line", tabPosition = "top", size = "md", animated = true, centered = false, destroyInactiveTabPane = false, hideAdd = false, activeKey, defaultActiveKey, items, tabBarExtraContent, tabBarGutter, tabBarStyle, onChange, onTabClick, onEdit, className, children, prefixCls: customisedCls, ...otherProps } = props;
+	const prefixCls = require_general.getPrefixCls("tabs", (0, react.useContext)(require_config_context.ConfigContext).prefixCls, customisedCls);
+	const resolvedItems = items ?? resolveItemsFromChildren(children);
+	const getDefaultKey = () => {
+		if (defaultActiveKey !== void 0) return defaultActiveKey;
+		return resolvedItems.find((item) => !item.disabled)?.key ?? "";
+	};
+	const [currentKey, setCurrentKey] = (0, react.useState)(activeKey ?? getDefaultKey());
+	const [inkStyle, setInkStyle] = (0, react.useState)({});
+	const baseId = (0, react.useId)();
+	const [scrollOffset, setScrollOffset] = (0, react.useState)(0);
+	const [showNav, setShowNav] = (0, react.useState)(false);
+	const navWrapRef = (0, react.useRef)(null);
+	const navListRef = (0, react.useRef)(null);
+	const tabRefs = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const isHorizontal = tabPosition === "top" || tabPosition === "bottom";
+	(0, react.useEffect)(() => {
+		if (activeKey !== void 0) setCurrentKey(activeKey);
+	}, [activeKey]);
+	const updateInk = (0, react.useCallback)(() => {
+		if (type !== "line") return;
+		const el = tabRefs.current.get(currentKey);
+		if (!el) return;
+		if (isHorizontal) setInkStyle({
+			width: el.offsetWidth,
+			transform: `translate3d(${el.offsetLeft}px, 0, 0)`
+		});
+		else setInkStyle({
+			height: el.offsetHeight,
+			transform: `translate3d(0, ${el.offsetTop}px, 0)`
+		});
+	}, [
+		currentKey,
+		type,
+		isHorizontal
+	]);
+	const checkOverflow = (0, react.useCallback)(() => {
+		const wrap = navWrapRef.current;
+		const list = navListRef.current;
+		if (!wrap || !list) return;
+		setShowNav(isHorizontal ? list.scrollWidth > wrap.clientWidth : list.scrollHeight > wrap.clientHeight);
+	}, [isHorizontal]);
+	(0, react.useEffect)(() => {
+		updateInk();
+		checkOverflow();
+	}, [updateInk, checkOverflow]);
+	const handleTabClick = (key, disabled, e) => {
+		if (disabled) return;
+		onTabClick?.(key, e);
+		if (activeKey === void 0) setCurrentKey(key);
+		onChange?.(key);
+	};
+	const handleRemove = (key, e) => {
+		e.stopPropagation();
+		onEdit?.(key, "remove");
+	};
+	const handleAdd = (e) => {
+		onEdit?.(e, "add");
+	};
+	const handleTabKeyDown = (e, itemIndex) => {
+		const enabledItems = resolvedItems.filter((item) => !item.disabled);
+		const currentEnabledIdx = enabledItems.findIndex((item) => item.key === resolvedItems[itemIndex].key);
+		let targetItem;
+		if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+			e.preventDefault();
+			targetItem = enabledItems[currentEnabledIdx <= 0 ? enabledItems.length - 1 : currentEnabledIdx - 1];
+		} else if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+			e.preventDefault();
+			targetItem = enabledItems[currentEnabledIdx >= enabledItems.length - 1 ? 0 : currentEnabledIdx + 1];
+		} else if (e.key === "Home") {
+			e.preventDefault();
+			targetItem = enabledItems[0];
+		} else if (e.key === "End") {
+			e.preventDefault();
+			targetItem = enabledItems[enabledItems.length - 1];
+		}
+		if (targetItem) {
+			tabRefs.current.get(targetItem.key)?.focus();
+			handleTabClick(targetItem.key, targetItem.disabled, e);
+		}
+	};
+	const scrollStep = 200;
+	const getMaxScroll = () => {
+		const wrap = navWrapRef.current;
+		const list = navListRef.current;
+		if (!wrap || !list) return 0;
+		return isHorizontal ? list.scrollWidth - wrap.clientWidth : list.scrollHeight - wrap.clientHeight;
+	};
+	const scrollPrev = () => setScrollOffset((prev) => Math.max(0, prev - scrollStep));
+	const scrollNext = () => setScrollOffset((prev) => Math.min(getMaxScroll(), prev + scrollStep));
+	(0, react.useEffect)(() => {
+		const el = tabRefs.current.get(currentKey);
+		const wrap = navWrapRef.current;
+		if (!el || !wrap || !showNav) return;
+		if (isHorizontal) {
+			const elLeft = el.offsetLeft;
+			const elRight = elLeft + el.offsetWidth;
+			if (elLeft < scrollOffset) setScrollOffset(elLeft);
+			else if (elRight > scrollOffset + wrap.clientWidth) setScrollOffset(elRight - wrap.clientWidth);
+		}
+	}, [
+		currentKey,
+		showNav,
+		isHorizontal,
+		scrollOffset
+	]);
+	const isExtraObj = tabBarExtraContent != null && typeof tabBarExtraContent === "object" && !react.default.isValidElement(tabBarExtraContent) && ("left" in tabBarExtraContent || "right" in tabBarExtraContent);
+	const extraLeft = isExtraObj ? tabBarExtraContent.left ?? null : null;
+	const extraRight = isExtraObj ? tabBarExtraContent.right ?? null : tabBarExtraContent ?? null;
+	const isVertical = !isHorizontal;
+	const cls = (0, classnames.default)(prefixCls, className, `${prefixCls}_${size}`, {
+		[`${prefixCls}_${tabPosition}`]: true,
+		[`${prefixCls}_${type}`]: true,
+		[`${prefixCls}_vertical`]: isVertical,
+		[`${prefixCls}_centered`]: centered
+	});
+	const navScrollStyle = isHorizontal ? { transform: `translate3d(${-scrollOffset}px, 0, 0)` } : { transform: `translate3d(0, ${-scrollOffset}px, 0)` };
+	const prevDisabled = scrollOffset === 0;
+	const nextDisabled = scrollOffset >= getMaxScroll();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		...otherProps,
+		ref,
+		className: cls,
+		children: [
+			tabPosition === "bottom" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: `${prefixCls}__content`,
+				children: renderPanels(resolvedItems, currentKey, prefixCls, animated, isHorizontal, destroyInactiveTabPane, baseId)
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: (0, classnames.default)(`${prefixCls}__nav`, { [`${prefixCls}__nav_overflow`]: showNav }),
+				style: tabBarStyle,
+				role: "tablist",
+				children: [
+					extraLeft && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: `${prefixCls}__nav-extra_left`,
+						children: extraLeft
+					}),
+					showNav && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						className: (0, classnames.default)(`${prefixCls}__nav-prev`, { [`${prefixCls}__nav-btn_disabled`]: prevDisabled }),
+						disabled: prevDisabled,
+						onClick: scrollPrev,
+						type: "button",
+						"aria-label": "Previous tabs",
+						children: "‹"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: `${prefixCls}__nav-wrap`,
+						ref: navWrapRef,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: `${prefixCls}__nav-list`,
+							ref: navListRef,
+							style: showNav ? navScrollStyle : void 0,
+							children: [resolvedItems.map((item, idx) => {
+								const isActive = item.key === currentKey;
+								return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									ref: (el) => {
+										if (el) tabRefs.current.set(item.key, el);
+										else tabRefs.current.delete(item.key);
+									},
+									className: (0, classnames.default)(`${prefixCls}__tab`, {
+										[`${prefixCls}__tab_active`]: isActive,
+										[`${prefixCls}__tab_disabled`]: item.disabled
+									}),
+									style: tabBarGutter !== void 0 ? { marginRight: tabBarGutter } : void 0,
+									role: "tab",
+									id: `${baseId}-tab-${item.key}`,
+									"aria-selected": isActive,
+									"aria-disabled": item.disabled,
+									"aria-controls": `${baseId}-panel-${item.key}`,
+									tabIndex: isActive ? 0 : -1,
+									onClick: (e) => handleTabClick(item.key, item.disabled, e),
+									onKeyDown: (e) => handleTabKeyDown(e, idx),
+									children: [
+										item.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: `${prefixCls}__tab-icon`,
+											children: item.icon
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: `${prefixCls}__tab-label`,
+											children: item.label
+										}),
+										type === "editable-card" && item.closable !== false && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: `${prefixCls}__tab-remove`,
+											onClick: (e) => handleRemove(item.key, e),
+											role: "button",
+											"aria-label": "Remove tab",
+											children: "✕"
+										})
+									]
+								}, item.key);
+							}), type === "line" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: `${prefixCls}__ink-bar`,
+								style: inkStyle
+							})]
+						})
+					}),
+					showNav && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						className: (0, classnames.default)(`${prefixCls}__nav-next`, { [`${prefixCls}__nav-btn_disabled`]: nextDisabled }),
+						disabled: nextDisabled,
+						onClick: scrollNext,
+						type: "button",
+						"aria-label": "Next tabs",
+						children: "›"
+					}),
+					type === "editable-card" && !hideAdd && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						className: `${prefixCls}__nav-add`,
+						onClick: handleAdd,
+						type: "button",
+						"aria-label": "Add tab",
+						children: "+"
+					}),
+					extraRight && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: `${prefixCls}__nav-extra_right`,
+						children: extraRight
+					})
+				]
+			}),
+			tabPosition !== "bottom" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: `${prefixCls}__content`,
+				children: renderPanels(resolvedItems, currentKey, prefixCls, animated, isHorizontal, destroyInactiveTabPane, baseId)
+			})
+		]
+	});
+});
+function resolveItemsFromChildren(children) {
+	const items = [];
+	react.default.Children.forEach(children, (child, idx) => {
+		if (!react.default.isValidElement(child)) return;
+		const { tab, tabKey, disabled, closable, forceRender, children: content } = child.props;
+		items.push({
+			key: tabKey ?? String(idx),
+			label: tab,
+			children: content,
+			disabled,
+			closable,
+			forceRender
+		});
+	});
+	return items;
+}
+function renderPanels(items, currentKey, prefixCls, animated, isHorizontal, destroyInactive, baseId) {
+	const activeIdx = items.findIndex((item) => item.key === currentKey);
+	const containerStyle = animated && isHorizontal ? { transform: `translate3d(${-activeIdx * 100}%, 0, 0)` } : {};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, classnames.default)(`${prefixCls}__content-inner`, { [`${prefixCls}__content-inner_animated`]: animated && isHorizontal }),
+		style: containerStyle,
+		children: items.map((item) => {
+			const isActive = item.key === currentKey;
+			const panelCls = (0, classnames.default)(`${prefixCls}__panel`, { [`${prefixCls}__panel_active`]: isActive });
+			if (destroyInactive && !isActive && !item.forceRender) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: panelCls,
+				role: "tabpanel",
+				id: baseId ? `${baseId}-panel-${item.key}` : void 0,
+				"aria-labelledby": baseId ? `${baseId}-tab-${item.key}` : void 0
+			}, item.key);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: panelCls,
+				role: "tabpanel",
+				id: baseId ? `${baseId}-panel-${item.key}` : void 0,
+				"aria-labelledby": baseId ? `${baseId}-tab-${item.key}` : void 0,
+				children: item.children
+			}, item.key);
+		})
+	});
+}
+Tabs.displayName = "Tabs";
+//#endregion
+exports.default = Tabs;
+
+//# sourceMappingURL=tabs.js.map

package/lib/tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","names":["React","getPrefixCls","ConfigContext"],"sources":["../../src/tabs/tabs.tsx"],"sourcesContent":["import React, { useContext, useId, useRef, useState, useEffect, useCallback, CSSProperties } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { TabsProps, TabItem, TabPanelProps } from './types';\n\nconst Tabs = React.forwardRef<HTMLDivElement, TabsProps>(\n  (props: TabsProps, ref): React.ReactElement => {\n    const {\n      type = 'line',\n      tabPosition = 'top',\n      size = 'md',\n      animated = true,\n      centered = false,\n      destroyInactiveTabPane = false,\n      hideAdd = false,\n      activeKey,\n      defaultActiveKey,\n      items,\n      tabBarExtraContent,\n      tabBarGutter,\n      tabBarStyle,\n      onChange,\n      onTabClick,\n      onEdit,\n      className,\n      children,\n      prefixCls: customisedCls,\n      ...otherProps\n    } = props;\n    const configContext = useContext(ConfigContext);\n    const prefixCls = getPrefixCls('tabs', configContext.prefixCls, customisedCls);\n\n    // Resolve items from either `items` prop or `children`\n    const resolvedItems: TabItem[] = items ?? resolveItemsFromChildren(children);\n\n    const getDefaultKey = (): string => {\n      if (defaultActiveKey !== undefined) return defaultActiveKey;\n      const first = resolvedItems.find((item) => !item.disabled);\n      return first?.key ?? '';\n    };\n\n    const [currentKey, setCurrentKey] = useState<string>(activeKey ?? getDefaultKey());\n    const [inkStyle, setInkStyle] = useState<CSSProperties>({});\n    const baseId = useId();\n    const [scrollOffset, setScrollOffset] = useState(0);\n    const [showNav, setShowNav] = useState(false);\n    const navWrapRef = useRef<HTMLDivElement>(null);\n    const navListRef = useRef<HTMLDivElement>(null);\n    const tabRefs = useRef<Map<string, HTMLDivElement>>(new Map());\n\n    const isHorizontal = tabPosition === 'top' || tabPosition === 'bottom';\n\n    // Controlled mode\n    useEffect(() => {\n      if (activeKey !== undefined) {\n        setCurrentKey(activeKey);\n      }\n    }, [activeKey]);\n\n    // Update ink indicator\n    const updateInk = useCallback(() => {\n      if (type !== 'line') return;\n      const el = tabRefs.current.get(currentKey);\n      if (!el) return;\n\n      if (isHorizontal) {\n        setInkStyle({\n          width: el.offsetWidth,\n          transform: `translate3d(${el.offsetLeft}px, 0, 0)`,\n        });\n      } else {\n        setInkStyle({\n          height: el.offsetHeight,\n          transform: `translate3d(0, ${el.offsetTop}px, 0)`,\n        });\n      }\n    }, [currentKey, type, isHorizontal]);\n\n    // Check overflow for scroll arrows\n    const checkOverflow = useCallback(() => {\n      const wrap = navWrapRef.current;\n      const list = navListRef.current;\n      if (!wrap || !list) return;\n      setShowNav(\n        isHorizontal\n          ? list.scrollWidth > wrap.clientWidth\n          : list.scrollHeight > wrap.clientHeight\n      );\n    }, [isHorizontal]);\n\n    useEffect(() => {\n      updateInk();\n      checkOverflow();\n    }, [updateInk, checkOverflow]);\n\n    const handleTabClick = (key: string, disabled: boolean | undefined, e: React.MouseEvent) => {\n      if (disabled) return;\n      onTabClick?.(key, e);\n      if (activeKey === undefined) {\n        setCurrentKey(key);\n      }\n      onChange?.(key);\n    };\n\n    const handleRemove = (key: string, e: React.MouseEvent) => {\n      e.stopPropagation();\n      onEdit?.(key, 'remove');\n    };\n\n    const handleAdd = (e: React.MouseEvent) => {\n      onEdit?.(e, 'add');\n    };\n\n    const handleTabKeyDown = (e: React.KeyboardEvent, itemIndex: number) => {\n      const enabledItems = resolvedItems.filter((item) => !item.disabled);\n      const currentEnabledIdx = enabledItems.findIndex((item) => item.key === resolvedItems[itemIndex].key);\n      let targetItem: TabItem | undefined;\n\n      if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n        e.preventDefault();\n        const prevIdx = currentEnabledIdx <= 0 ? enabledItems.length - 1 : currentEnabledIdx - 1;\n        targetItem = enabledItems[prevIdx];\n      } else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n        e.preventDefault();\n        const nextIdx = currentEnabledIdx >= enabledItems.length - 1 ? 0 : currentEnabledIdx + 1;\n        targetItem = enabledItems[nextIdx];\n      } else if (e.key === 'Home') {\n        e.preventDefault();\n        targetItem = enabledItems[0];\n      } else if (e.key === 'End') {\n        e.preventDefault();\n        targetItem = enabledItems[enabledItems.length - 1];\n      }\n\n      if (targetItem) {\n        const el = tabRefs.current.get(targetItem.key);\n        el?.focus();\n        handleTabClick(targetItem.key, targetItem.disabled, e as unknown as React.MouseEvent);\n      }\n    };\n\n    // Scroll navigation\n    const scrollStep = 200;\n    const getMaxScroll = () => {\n      const wrap = navWrapRef.current;\n      const list = navListRef.current;\n      if (!wrap || !list) return 0;\n      return isHorizontal\n        ? list.scrollWidth - wrap.clientWidth\n        : list.scrollHeight - wrap.clientHeight;\n    };\n\n    const scrollPrev = () => setScrollOffset((prev) => Math.max(0, prev - scrollStep));\n    const scrollNext = () => setScrollOffset((prev) => Math.min(getMaxScroll(), prev + scrollStep));\n\n    // Ensure active tab is scrolled into view\n    useEffect(() => {\n      const el = tabRefs.current.get(currentKey);\n      const wrap = navWrapRef.current;\n      if (!el || !wrap || !showNav) return;\n\n      if (isHorizontal) {\n        const elLeft = el.offsetLeft;\n        const elRight = elLeft + el.offsetWidth;\n        if (elLeft < scrollOffset) {\n          setScrollOffset(elLeft);\n        } else if (elRight > scrollOffset + wrap.clientWidth) {\n          setScrollOffset(elRight - wrap.clientWidth);\n        }\n      }\n    }, [currentKey, showNav, isHorizontal, scrollOffset]);\n\n    // Extra content\n    const isExtraObj = tabBarExtraContent != null\n      && typeof tabBarExtraContent === 'object'\n      && !React.isValidElement(tabBarExtraContent)\n      && ('left' in tabBarExtraContent || 'right' in tabBarExtraContent);\n    const extraLeft: React.ReactNode = isExtraObj\n      ? (tabBarExtraContent as { left?: React.ReactNode }).left ?? null\n      : null;\n    const extraRight: React.ReactNode = isExtraObj\n      ? (tabBarExtraContent as { right?: React.ReactNode }).right ?? null\n      : (tabBarExtraContent as React.ReactNode) ?? null;\n\n    // Class names\n    const isVertical = !isHorizontal;\n    const cls = classNames(prefixCls, className, `${prefixCls}_${size}`, {\n      [`${prefixCls}_${tabPosition}`]: true,\n      [`${prefixCls}_${type}`]: true,\n      [`${prefixCls}_vertical`]: isVertical,\n      [`${prefixCls}_centered`]: centered,\n    });\n\n    const navScrollStyle: CSSProperties = isHorizontal\n      ? { transform: `translate3d(${-scrollOffset}px, 0, 0)` }\n      : { transform: `translate3d(0, ${-scrollOffset}px, 0)` };\n\n    const prevDisabled = scrollOffset === 0;\n    const nextDisabled = scrollOffset >= getMaxScroll();\n\n    return (\n      <div {...otherProps} ref={ref} className={cls}>\n        {tabPosition === 'bottom' && (\n          <div className={`${prefixCls}__content`}>\n            {renderPanels(resolvedItems, currentKey, prefixCls, animated, isHorizontal, destroyInactiveTabPane, baseId)}\n          </div>\n        )}\n        <div\n          className={classNames(`${prefixCls}__nav`, {\n            [`${prefixCls}__nav_overflow`]: showNav,\n          })}\n          style={tabBarStyle}\n          role=\"tablist\">\n          {extraLeft && <div className={`${prefixCls}__nav-extra_left`}>{extraLeft}</div>}\n          {showNav && (\n            <button\n              className={classNames(`${prefixCls}__nav-prev`, {\n                [`${prefixCls}__nav-btn_disabled`]: prevDisabled,\n              })}\n              disabled={prevDisabled}\n              onClick={scrollPrev}\n              type=\"button\"\n              aria-label=\"Previous tabs\">\n              ‹\n            </button>\n          )}\n          <div className={`${prefixCls}__nav-wrap`} ref={navWrapRef}>\n            <div\n              className={`${prefixCls}__nav-list`}\n              ref={navListRef}\n              style={showNav ? navScrollStyle : undefined}>\n              {resolvedItems.map((item, idx) => {\n                const isActive = item.key === currentKey;\n                const tabCls = classNames(`${prefixCls}__tab`, {\n                  [`${prefixCls}__tab_active`]: isActive,\n                  [`${prefixCls}__tab_disabled`]: item.disabled,\n                });\n                const gutter = tabBarGutter !== undefined ? { marginRight: tabBarGutter } : undefined;\n                return (\n                  <div\n                    key={item.key}\n                    ref={(el) => {\n                      if (el) tabRefs.current.set(item.key, el);\n                      else tabRefs.current.delete(item.key);\n                    }}\n                    className={tabCls}\n                    style={gutter}\n                    role=\"tab\"\n                    id={`${baseId}-tab-${item.key}`}\n                    aria-selected={isActive}\n                    aria-disabled={item.disabled}\n                    aria-controls={`${baseId}-panel-${item.key}`}\n                    tabIndex={isActive ? 0 : -1}\n                    onClick={(e) => handleTabClick(item.key, item.disabled, e)}\n                    onKeyDown={(e) => handleTabKeyDown(e, idx)}>\n                    {item.icon && <span className={`${prefixCls}__tab-icon`}>{item.icon}</span>}\n                    <span className={`${prefixCls}__tab-label`}>{item.label}</span>\n                    {type === 'editable-card' && item.closable !== false && (\n                      <span\n                        className={`${prefixCls}__tab-remove`}\n                        onClick={(e) => handleRemove(item.key, e)}\n                        role=\"button\"\n                        aria-label=\"Remove tab\">\n                        ✕\n                      </span>\n                    )}\n                  </div>\n                );\n              })}\n              {type === 'line' && (\n                <div className={`${prefixCls}__ink-bar`} style={inkStyle} />\n              )}\n            </div>\n          </div>\n          {showNav && (\n            <button\n              className={classNames(`${prefixCls}__nav-next`, {\n                [`${prefixCls}__nav-btn_disabled`]: nextDisabled,\n              })}\n              disabled={nextDisabled}\n              onClick={scrollNext}\n              type=\"button\"\n              aria-label=\"Next tabs\">\n              ›\n            </button>\n          )}\n          {type === 'editable-card' && !hideAdd && (\n            <button\n              className={`${prefixCls}__nav-add`}\n              onClick={handleAdd}\n              type=\"button\"\n              aria-label=\"Add tab\">\n              +\n            </button>\n          )}\n          {extraRight && <div className={`${prefixCls}__nav-extra_right`}>{extraRight}</div>}\n        </div>\n        {tabPosition !== 'bottom' && (\n          <div className={`${prefixCls}__content`}>\n            {renderPanels(resolvedItems, currentKey, prefixCls, animated, isHorizontal, destroyInactiveTabPane, baseId)}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n\nfunction resolveItemsFromChildren(children: React.ReactNode): TabItem[] {\n  const items: TabItem[] = [];\n  React.Children.forEach(children, (child, idx) => {\n    if (!React.isValidElement<TabPanelProps>(child)) return;\n    const { tab, tabKey, disabled, closable, forceRender, children: content } = child.props;\n    items.push({\n      key: tabKey ?? String(idx),\n      label: tab,\n      children: content,\n      disabled,\n      closable,\n      forceRender,\n    });\n  });\n  return items;\n}\n\nfunction renderPanels(\n  items: TabItem[],\n  currentKey: string,\n  prefixCls: string,\n  animated: boolean,\n  isHorizontal: boolean,\n  destroyInactive: boolean,\n  baseId?: string\n): React.ReactNode {\n  const activeIdx = items.findIndex((item) => item.key === currentKey);\n  const containerStyle: CSSProperties = animated && isHorizontal\n    ? { transform: `translate3d(${-activeIdx * 100}%, 0, 0)` }\n    : {};\n\n  const containerCls = classNames(`${prefixCls}__content-inner`, {\n    [`${prefixCls}__content-inner_animated`]: animated && isHorizontal,\n  });\n\n  return (\n    <div className={containerCls} style={containerStyle}>\n      {items.map((item) => {\n        const isActive = item.key === currentKey;\n        const panelCls = classNames(`${prefixCls}__panel`, {\n          [`${prefixCls}__panel_active`]: isActive,\n        });\n\n        if (destroyInactive && !isActive && !item.forceRender) {\n          return <div key={item.key} className={panelCls} role=\"tabpanel\" id={baseId ? `${baseId}-panel-${item.key}` : undefined} aria-labelledby={baseId ? `${baseId}-tab-${item.key}` : undefined} />;\n        }\n\n        return (\n          <div key={item.key} className={panelCls} role=\"tabpanel\" id={baseId ? `${baseId}-panel-${item.key}` : undefined} aria-labelledby={baseId ? `${baseId}-tab-${item.key}` : undefined}>\n            {item.children}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nTabs.displayName = 'Tabs';\n\nexport default Tabs;\n"],"mappings":"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"}

package/lib/tabs/types.d.ts

@@ -0,0 +1,69 @@
+import { BaseProps, SizeType } from "../_utils/props.js";
+import { CSSProperties, ReactNode } from "react";
+
+//#region src/tabs/types.d.ts
+type TabType = 'line' | 'card' | 'editable-card';
+type TabPosition = 'top' | 'bottom' | 'left' | 'right';
+interface TabItem {
+  key: string;
+  label: ReactNode;
+  children?: ReactNode;
+  icon?: ReactNode;
+  disabled?: boolean;
+  closable?: boolean;
+  forceRender?: boolean;
+}
+interface TabsProps extends BaseProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  /** Current active tab key */
+  activeKey?: string;
+  /** Initial active tab key */
+  defaultActiveKey?: string;
+  /** Tab content configuration (recommended) */
+  items?: TabItem[];
+  /** Tab style variant */
+  type?: TabType;
+  /** Tab position */
+  tabPosition?: TabPosition;
+  /** Preset tab bar size */
+  size?: SizeType;
+  /** Whether to animate tab transitions */
+  animated?: boolean;
+  /** Center the tab bar */
+  centered?: boolean;
+  /** Destroy inactive tab panes */
+  destroyInactiveTabPane?: boolean;
+  /** Extra content on the tab bar */
+  tabBarExtraContent?: ReactNode | {
+    left?: ReactNode;
+    right?: ReactNode;
+  };
+  /** Gap between tabs in pixels */
+  tabBarGutter?: number;
+  /** Tab bar inline styles */
+  tabBarStyle?: CSSProperties;
+  /** Callback when the active tab changes */
+  onChange?: (activeKey: string) => void;
+  /** Callback when a tab is clicked */
+  onTabClick?: (key: string, event: React.MouseEvent) => void;
+  /** Callback when tabs are added or removed (editable-card only) */
+  onEdit?: (targetKey: string | React.MouseEvent, action: 'add' | 'remove') => void;
+  /** Hide the add button in editable-card mode */
+  hideAdd?: boolean;
+}
+interface TabPanelProps extends BaseProps, React.HTMLAttributes<HTMLDivElement> {
+  /** Whether the panel is active (set internally) */
+  active?: boolean;
+  /** Whether the tab is disabled */
+  disabled?: boolean;
+  /** Whether the tab is closable (editable-card only) */
+  closable?: boolean;
+  /** Tab header content */
+  tab?: ReactNode;
+  /** Unique key for the tab */
+  tabKey?: string;
+  /** Force render even when inactive */
+  forceRender?: boolean;
+}
+//#endregion
+export { TabItem, TabPanelProps, TabPosition, TabType, TabsProps };
+//# sourceMappingURL=types.d.ts.map

package/lib/tag/checkable-tag.d.ts

@@ -0,0 +1,10 @@
+import { CheckableTagProps } from "./types.js";
+
+//#region src/tag/checkable-tag.d.ts
+declare const CheckableTag: {
+  (props: CheckableTagProps): JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { CheckableTag };
+//# sourceMappingURL=checkable-tag.d.ts.map

package/lib/tag/checkable-tag.js

@@ -0,0 +1,38 @@
+const require_runtime = require("../_virtual/_rolldown/runtime.js");
+const require_config_context = require("../config-provider/config-context.js");
+const require_general = require("../_utils/general.js");
+const require_index = require("./index.js");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/tag/checkable-tag.tsx
+const CheckableTag = (props) => {
+	const { defaultChecked = true, prefixCls: customisedCls, onChange, className, style, children } = props;
+	const [checked, setChecked] = (0, react.useState)("checked" in props ? props.checked : defaultChecked);
+	const prefixCls = require_general.getPrefixCls("checkable-tag", (0, react.useContext)(require_config_context.ConfigContext).prefixCls, customisedCls);
+	const cls = (0, classnames.default)(prefixCls, className, { [`${prefixCls}_checked`]: checked });
+	/**
+	* Callback when the tag itself is clicked.
+	*/
+	const itemOnClick = (e) => {
+		const state = !checked;
+		!("checked" in props) && setChecked(state);
+		onChange && onChange(state, e);
+	};
+	(0, react.useEffect)(() => {
+		"checked" in props && setChecked(props.checked);
+	}, [props]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
+		className: cls,
+		style,
+		onClick: itemOnClick,
+		children
+	});
+};
+CheckableTag.displayName = "CheckableTag";
+//#endregion
+exports.default = CheckableTag;
+
+//# sourceMappingURL=checkable-tag.js.map

package/lib/tag/checkable-tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkable-tag.js","names":["getPrefixCls","ConfigContext","Tag"],"sources":["../../src/tag/checkable-tag.tsx"],"sourcesContent":["import React, { useState, useEffect, useContext } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { CheckableTagProps } from './types';\nimport Tag from './index';\n\nconst CheckableTag = (props: CheckableTagProps): JSX.Element => {\n  const {\n    defaultChecked = true,\n    prefixCls: customisedCls,\n    onChange,\n    className,\n    style,\n    children,\n  } = props;\n  const [checked, setChecked] = useState<boolean>(\n    'checked' in props ? (props.checked as boolean) : defaultChecked\n  );\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('checkable-tag', configContext.prefixCls, customisedCls);\n  const cls = classNames(prefixCls, className, {\n    [`${prefixCls}_checked`]: checked,\n  });\n\n  /**\n   * Callback when the tag itself is clicked.\n   */\n  const itemOnClick = (e: React.MouseEvent): void => {\n    const state = !checked;\n    !('checked' in props) && setChecked(state);\n    onChange && onChange(state, e);\n  };\n\n  useEffect(() => {\n    'checked' in props && setChecked(props.checked as boolean);\n  }, [props]);\n\n  return (\n    <Tag className={cls} style={style} onClick={itemOnClick}>\n      {children}\n    </Tag>\n  );\n};\n\nCheckableTag.displayName = 'CheckableTag';\n\nexport default CheckableTag;\n"],"mappings":";;;;;;;;;;AAOA,MAAM,gBAAgB,UAA0C;CAC9D,MAAM,EACJ,iBAAiB,MACjB,WAAW,eACX,UACA,WACA,OACA,aACE;CACJ,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,UACd,aAAa,QAAS,MAAM,UAAsB,eACnD;CAED,MAAM,YAAYA,gBAAAA,aAAa,kBAAA,GAAA,MAAA,YADEC,uBAAAA,cAAc,CACe,WAAW,cAAc;CACvF,MAAM,OAAA,GAAA,WAAA,SAAiB,WAAW,WAAW,GAC1C,GAAG,UAAU,YAAY,SAC3B,CAAC;;;;CAKF,MAAM,eAAe,MAA8B;EACjD,MAAM,QAAQ,CAAC;AACf,IAAE,aAAa,UAAU,WAAW,MAAM;AAC1C,cAAY,SAAS,OAAO,EAAE;;AAGhC,EAAA,GAAA,MAAA,iBAAgB;AACd,eAAa,SAAS,WAAW,MAAM,QAAmB;IACzD,CAAC,MAAM,CAAC;AAEX,QACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,SAAD;EAAK,WAAW;EAAY;EAAO,SAAS;EACzC;EACG,CAAA;;AAIV,aAAa,cAAc"}

package/lib/tag/index.d.ts

@@ -0,0 +1,11 @@
+import { Tag } from "./tag.js";
+import { CheckableTag } from "./checkable-tag.js";
+
+//#region src/tag/index.d.ts
+type ITag = typeof Tag & {
+  CheckableTag: typeof CheckableTag;
+};
+declare const DefaultTag: ITag;
+//#endregion
+export { DefaultTag };
+//# sourceMappingURL=index.d.ts.map

package/lib/tag/index.js

@@ -0,0 +1,11 @@
+require('../style/base.css');
+require('./style/index.css');
+const require_tag = require("./tag.js");
+const require_checkable_tag = require("./checkable-tag.js");
+//#region src/tag/index.tsx
+const DefaultTag = require_tag.default;
+DefaultTag.CheckableTag = require_checkable_tag.default;
+//#endregion
+exports.default = DefaultTag;
+
+//# sourceMappingURL=index.js.map

package/lib/tag/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Tag","CheckableTag"],"sources":["../../src/tag/index.tsx"],"sourcesContent":["import Tag from './tag';\nimport CheckableTag from './checkable-tag';\n\ntype ITag = typeof Tag & {\n  CheckableTag: typeof CheckableTag;\n};\n\nconst DefaultTag = Tag as ITag;\nDefaultTag.CheckableTag = CheckableTag;\n\nexport default DefaultTag;\n"],"mappings":";;;AAOA,MAAM,aAAaA,YAAAA;AACnB,WAAW,eAAeC,sBAAAA"}

package/lib/tag/style/_index.scss

@@ -0,0 +1,119 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-tag {
+  user-select: none;
+  display: none;
+  margin-right: 8px;
+  padding: 3px 7px;
+  font-size: 12px;
+  border: 1px solid var(--ty-tag-border);
+  border-radius: $tag-border-radius;
+  color: var(--ty-color-text);
+  background: var(--ty-tag-bg);
+
+  a,
+  a:hover {
+    color: var(--ty-color-text-secondary);
+  }
+
+  &_visible {
+    display: inline-block;
+  }
+
+  &__close-btn {
+    cursor: pointer;
+    font-size: 10px;
+    margin-left: 5px;
+    line-height: 1;
+    transition: all 300ms;
+    background: none;
+    border: none;
+    padding: 0;
+    color: inherit;
+    font-family: inherit;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
+  &_magenta {
+    color: var(--ty-tag-magenta-color);
+    background: var(--ty-tag-magenta-bg);
+    border-color: var(--ty-tag-magenta-border);
+  }
+
+  &_red {
+    color: var(--ty-tag-red-color);
+    background: var(--ty-tag-red-bg);
+    border-color: var(--ty-tag-red-border);
+  }
+
+  &_volcano {
+    color: var(--ty-tag-volcano-color);
+    background: var(--ty-tag-volcano-bg);
+    border-color: var(--ty-tag-volcano-border);
+  }
+
+  &_orange {
+    color: var(--ty-tag-orange-color);
+    background: var(--ty-tag-orange-bg);
+    border-color: var(--ty-tag-orange-border);
+  }
+
+  &_gold {
+    color: var(--ty-tag-gold-color);
+    background: var(--ty-tag-gold-bg);
+    border-color: var(--ty-tag-gold-border);
+  }
+
+  &_lime {
+    color: var(--ty-tag-lime-color);
+    background: var(--ty-tag-lime-bg);
+    border-color: var(--ty-tag-lime-border);
+  }
+
+  &_green {
+    color: var(--ty-tag-green-color);
+    background: var(--ty-tag-green-bg);
+    border-color: var(--ty-tag-green-border);
+  }
+
+  &_cyan {
+    color: var(--ty-tag-cyan-color);
+    background: var(--ty-tag-cyan-bg);
+    border-color: var(--ty-tag-cyan-border);
+  }
+
+  &_blue {
+    color: var(--ty-tag-blue-color);
+    background: var(--ty-tag-blue-bg);
+    border-color: var(--ty-tag-blue-border);
+  }
+
+  &_geekblue {
+    color: var(--ty-tag-geekblue-color);
+    background: var(--ty-tag-geekblue-bg);
+    border-color: var(--ty-tag-geekblue-border);
+  }
+
+  &_purple {
+    color: var(--ty-tag-purple-color);
+    background: var(--ty-tag-purple-bg);
+    border-color: var(--ty-tag-purple-border);
+  }
+}
+
+.#{$prefix}-checkable-tag {
+  background-color: var(--ty-tag-checkable-bg);
+  color: var(--ty-color-primary);
+  border-color: var(--ty-tag-checkable-bg);
+  transition: all 300ms;
+  cursor: pointer;
+
+  &_checked {
+    background-color: var(--ty-color-primary);
+    color: #fff;
+    border-color: var(--ty-color-primary);
+  }
+}