@lobehub/ui 5.64.2 → 6.0.0-beta.10

package/es/Table/useTableController.mjs

@@ -0,0 +1,293 @@
+"use client";
+import { useEventCallback } from "../hooks/useEventCallback.mjs";
+import { PREFIX_CLS } from "./constants.mjs";
+import { isPlainObject } from "./pipeline/selectionUtils.mjs";
+import { assertColumnKeys, fillColumns, flattenColumns, isColumnGroup } from "./pipeline/columnUtils.mjs";
+import { createTableStore } from "./store/createTableStore.mjs";
+import { useTableEngine } from "./engine/useTableEngine.mjs";
+import { convertChildrenToColumns } from "./pipeline/convertChildrenToColumns.mjs";
+import { normalizeColumns } from "./pipeline/normalizeColumns.mjs";
+import { useBreakpoint } from "./pipeline/useBreakpoint.mjs";
+import { getExpandType, useExpandable } from "./pipeline/useExpandable.mjs";
+import { useSelection } from "./pipeline/useSelection.mjs";
+import { useTableLocale } from "./pipeline/useTableLocale.mjs";
+import { useTableState } from "./pipeline/useTableState.mjs";
+import { useVirtualLayout } from "./pipeline/useVirtualLayout.mjs";
+import renderExpandIcon from "./render/ExpandIcon.mjs";
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
+//#region src/Table/useTableController.ts
+const EMPTY_DATA = [];
+const isPresent = (value) => value !== null && value !== void 0;
+const useTableController = (props) => {
+	const { children, column: columnDefaults, columns: columnsProp, dataSource = EMPTY_DATA, expandable, locale, onChange, pagination, rowKey = "key", rowSelection, scroll, size = "middle", summary, variant = "borderless", virtual } = props;
+	const tableLocale = useTableLocale(locale);
+	const columns = useMemo(() => fillColumns(columnsProp ?? convertChildrenToColumns(children), columnDefaults), [
+		columnsProp,
+		children,
+		columnDefaults
+	]);
+	assertColumnKeys(columns);
+	const grouped = useMemo(() => columns.some((column) => isColumnGroup(column) && column.children.length > 0), [columns]);
+	const needResponsive = useMemo(() => flattenColumns(columns).some(({ column }) => column.responsive), [columns]);
+	const screens = useBreakpoint(needResponsive);
+	const childrenColumnName = expandable?.childrenColumnName ?? "children";
+	const getRowKey = useMemo(() => typeof rowKey === "function" ? rowKey : (record) => record?.[rowKey], [rowKey]);
+	const bodyRef = useRef(null);
+	const engineScrollRef = useRef(void 0);
+	const scrollTo = useEventCallback((config) => {
+		engineScrollRef.current?.(config);
+	});
+	const state = useTableState({
+		childrenColumnName,
+		columns,
+		dataSource,
+		onChange,
+		onTableChange: () => {
+			if (scroll && scroll.scrollToFirstRowOnChange !== false) scrollTo({ top: 0 });
+		},
+		pagination
+	});
+	const { data: allRows, page, total } = state;
+	const { pageIndex, pageSize } = page;
+	const rows = useMemo(() => {
+		if (pagination === false) return allRows;
+		if (allRows.length < total && allRows.length <= pageSize) return allRows;
+		return allRows.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+	}, [
+		allRows,
+		pagination,
+		pageIndex,
+		pageSize,
+		total
+	]);
+	const clientPaginated = pagination !== false && state.config?.total === void 0;
+	const syncClampedPage = useEventCallback(() => state.clampPage(pageIndex));
+	useLayoutEffect(() => {
+		if (clientPaginated && pageIndex !== state.rawPageIndex) syncClampedPage();
+	}, [
+		clientPaginated,
+		pageIndex,
+		state.rawPageIndex,
+		syncClampedPage
+	]);
+	const recordMap = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		const dig = (records) => {
+			records.forEach((record, index) => {
+				map.set(getRowKey(record, index), record);
+				const nested = isPlainObject(record) ? record[childrenColumnName] : void 0;
+				if (Array.isArray(nested)) dig(nested);
+			});
+		};
+		dig(dataSource);
+		return map;
+	}, [
+		dataSource,
+		childrenColumnName,
+		getRowKey
+	]);
+	const getRecordByKey = useCallback((key) => recordMap.get(key), [recordMap]);
+	const expandType = useMemo(() => getExpandType(rows, childrenColumnName, expandable), [
+		rows,
+		childrenColumnName,
+		expandable
+	]);
+	const { expandedKeys, toggle } = useExpandable({
+		childrenColumnName,
+		expandable,
+		getRowKey,
+		pageData: rows
+	});
+	const selection = useSelection({
+		childrenColumnName,
+		data: allRows,
+		expandType,
+		getRecordByKey,
+		getRowKey,
+		locale: tableLocale,
+		pageData: rows
+	}, rowSelection);
+	const virtualDefaults = useVirtualLayout({
+		expandable: Boolean(expandable),
+		rowSelection: rowSelection && {
+			selections: rowSelection.selections,
+			type: rowSelection.type
+		},
+		variant,
+		virtual
+	});
+	const selectionShape = useMemo(() => rowSelection && {
+		align: rowSelection.align,
+		fixed: rowSelection.fixed,
+		onCell: rowSelection.onCell,
+		selections: rowSelection.selections,
+		type: rowSelection.type
+	}, [
+		Boolean(rowSelection),
+		rowSelection?.align,
+		rowSelection?.fixed,
+		rowSelection?.onCell,
+		rowSelection?.selections,
+		rowSelection?.type
+	]);
+	const expandShape = useMemo(() => expandable && {
+		columnTitle: expandable.columnTitle,
+		expandIconColumnIndex: expandable.expandIconColumnIndex,
+		fixed: expandable.fixed,
+		showExpandColumn: expandable.showExpandColumn
+	}, [
+		Boolean(expandable),
+		expandable?.columnTitle,
+		expandable?.expandIconColumnIndex,
+		expandable?.fixed,
+		expandable?.showExpandColumn
+	]);
+	const expandColumnWidth = expandable?.columnWidth ?? virtualDefaults.expandColumnWidth;
+	const selectionColumnWidth = rowSelection?.columnWidth ?? virtualDefaults.selectionColumnWidth;
+	const normalized = useMemo(() => normalizeColumns(columns, {
+		expandColumnWidth,
+		expandType,
+		expandable: expandShape,
+		prefixCls: PREFIX_CLS,
+		rowSelection: selectionShape,
+		screens,
+		selectionColumnWidth
+	}), [
+		columns,
+		expandColumnWidth,
+		expandShape,
+		expandType,
+		selectionShape,
+		screens,
+		selectionColumnWidth
+	]);
+	const [colWidthMap, setColWidthMap] = useState(/* @__PURE__ */ new Map());
+	const onColumnResize = useCallback((key, width) => {
+		setColWidthMap((previous) => {
+			if (previous.get(key) === width) return previous;
+			const next = new Map(previous);
+			next.set(key, width);
+			return next;
+		});
+	}, []);
+	const scrollX = scroll?.x;
+	const fixHeader = Boolean(scroll && isPresent(scroll.y));
+	const horizonScroll = Boolean(scroll && isPresent(scrollX)) || Boolean(expandable?.fixed);
+	const { componentWidth, measureRef } = virtualDefaults;
+	const virtualWidths = useMemo(() => virtual ? virtualDefaults.fillWidths(normalized, scrollX, componentWidth) : void 0, [
+		virtual,
+		virtualDefaults,
+		normalized,
+		scrollX,
+		componentWidth
+	]);
+	const leafKeys = useMemo(() => {
+		const keys = [];
+		const dig = (list) => list.forEach((column) => column.children?.length ? dig(column.children) : keys.push(column.key));
+		dig(normalized);
+		return keys;
+	}, [normalized]);
+	const columnWidths = useMemo(() => virtualWidths ?? leafKeys.map((key) => colWidthMap.get(key) ?? 0), [
+		virtualWidths,
+		leafKeys,
+		colWidthMap
+	]);
+	const getChildren = useMemo(() => expandType === "nest" ? (record) => isPlainObject(record) ? record[childrenColumnName] : void 0 : void 0, [expandType, childrenColumnName]);
+	const scrollY = scroll?.y;
+	const model = useTableEngine({
+		columnWidths,
+		columns: normalized,
+		data: rows,
+		expandedKeys,
+		getChildren,
+		getRowKey
+	});
+	const initialHeight = typeof scrollY === "number" ? scrollY : void 0;
+	const rowHeight = virtualDefaults.rowHeight(size);
+	const getScrollElement = useCallback(() => bodyRef.current, []);
+	const virtualInput = useMemo(() => virtual ? {
+		getScrollElement,
+		initialHeight,
+		rowHeight
+	} : void 0, [
+		virtual,
+		getScrollElement,
+		initialHeight,
+		rowHeight
+	]);
+	const virtualScrollRef = useRef(void 0);
+	engineScrollRef.current = (config) => {
+		if (virtualInput) {
+			virtualScrollRef.current?.(config);
+			return;
+		}
+		const body = bodyRef.current;
+		if (!body) return;
+		const { align = "nearest", index, key, offset, top } = config;
+		if (typeof top === "number") {
+			body.scrollTo?.({ top });
+			return;
+		}
+		const target = key ?? (index === void 0 ? void 0 : getRowKey(rows[index], index));
+		const element = body.querySelector(`[data-row-key="${target}"]`);
+		if (!element) return;
+		element.scrollIntoView({ block: align });
+		if (offset) body.scrollTo?.({ top: body.scrollTop + offset });
+	};
+	const [store] = useState(() => createTableStore({
+		expandedKeys,
+		halfSelectedKeys: selection.halfSelectedKeySet,
+		selectedKeys: selection.selectedKeySet,
+		selectionSummary: selection.summary
+	}));
+	const sortedColumns = useMemo(() => new Set(state.sortStates.filter(({ sortOrder }) => sortOrder).map(({ key }) => key)), [state.sortStates]);
+	useLayoutEffect(() => {
+		store.setState({
+			expandedKeys,
+			halfSelectedKeys: selection.halfSelectedKeySet,
+			selectedKeys: selection.selectedKeySet,
+			selectionSummary: selection.summary,
+			sortedColumns
+		});
+	});
+	const nestIconColumnIndex = (() => {
+		const index = expandable?.expandIconColumnIndex;
+		if (expandType === "nest" && index === void 0) return rowSelection ? 1 : 0;
+		if ((index ?? 0) > 0 && rowSelection) return index - 1;
+		return index ?? 0;
+	})();
+	const expandIcon = useMemo(() => expandable?.expandIcon ?? ((iconProps) => renderExpandIcon(iconProps, tableLocale)), [expandable?.expandIcon, tableLocale]);
+	const summaryNode = useMemo(() => summary?.(rows), [summary, rows]);
+	return {
+		bodyRef,
+		columnWidths,
+		columns,
+		expandIcon,
+		expandType,
+		fixHeader,
+		getRowKey,
+		grouped,
+		horizonScroll,
+		indentSize: typeof expandable?.indentSize === "number" ? expandable.indentSize : 15,
+		measureRef,
+		model,
+		nestIconColumnIndex,
+		onColumnResize,
+		rows,
+		screens,
+		scrollTo,
+		selection,
+		state,
+		store,
+		summaryNode,
+		tableLocale,
+		toggleExpand: toggle,
+		virtualInput,
+		virtualScrollRef,
+		virtualWidths
+	};
+};
+//#endregion
+export { useTableController };
+
+//# sourceMappingURL=useTableController.mjs.map

package/es/Table/useTableController.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableController.mjs","names":[],"sources":["../../src/Table/useTableController.ts"],"sourcesContent":["'use client';\n\nimport { type Key, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport { useEventCallback } from '@/hooks/useEventCallback';\n\nimport { DEFAULT_INDENT_SIZE, PREFIX_CLS } from './constants';\nimport type { VirtualInput } from './engine/types';\nimport { useTableEngine } from './engine/useTableEngine';\nimport {\n  assertColumnKeys,\n  fillColumns,\n  flattenColumns,\n  isColumnGroup,\n} from './pipeline/columnUtils';\nimport { convertChildrenToColumns } from './pipeline/convertChildrenToColumns';\nimport { normalizeColumns } from './pipeline/normalizeColumns';\nimport { isPlainObject } from './pipeline/selectionUtils';\nimport { useBreakpoint } from './pipeline/useBreakpoint';\nimport { getExpandType, useExpandable } from './pipeline/useExpandable';\nimport { useSelection } from './pipeline/useSelection';\nimport { useTableLocale } from './pipeline/useTableLocale';\nimport { useTableState } from './pipeline/useTableState';\nimport { useVirtualLayout } from './pipeline/useVirtualLayout';\nimport renderExpandIcon from './render/ExpandIcon';\nimport { createTableStore } from './store/createTableStore';\nimport type {\n  TableExpandableConfig,\n  TableProps,\n  TableRowSelection,\n  TableScrollToConfig,\n} from './type';\n\nconst EMPTY_DATA: any[] = [];\n\nconst isPresent = (value: unknown) => value !== null && value !== undefined;\n\nexport const useTableController = <T>(props: TableProps<T>) => {\n  const {\n    children,\n    column: columnDefaults,\n    columns: columnsProp,\n    dataSource = EMPTY_DATA as T[],\n    expandable,\n    locale,\n    onChange,\n    pagination,\n    rowKey = 'key',\n    rowSelection,\n    scroll,\n    size = 'middle',\n    summary,\n    variant = 'borderless',\n    virtual,\n  } = props;\n\n  const tableLocale = useTableLocale(locale);\n\n  const columns = useMemo(\n    () => fillColumns(columnsProp ?? convertChildrenToColumns<T>(children), columnDefaults),\n    [columnsProp, children, columnDefaults],\n  );\n  assertColumnKeys(columns);\n  const grouped = useMemo(\n    () => columns.some((column) => isColumnGroup(column) && column.children.length > 0),\n    [columns],\n  );\n  const needResponsive = useMemo(\n    () => flattenColumns(columns).some(({ column }) => column.responsive),\n    [columns],\n  );\n  const screens = useBreakpoint(needResponsive);\n\n  const childrenColumnName = expandable?.childrenColumnName ?? 'children';\n  const getRowKey = useMemo(\n    () =>\n      typeof rowKey === 'function'\n        ? rowKey\n        : (record: T) => (record as Record<PropertyKey, unknown>)?.[rowKey as PropertyKey] as Key,\n    [rowKey],\n  );\n\n  const bodyRef = useRef<HTMLDivElement | null>(null);\n  const engineScrollRef = useRef<((config: TableScrollToConfig) => void) | undefined>(undefined);\n  const scrollTo = useEventCallback((config: TableScrollToConfig) => {\n    engineScrollRef.current?.(config);\n  });\n\n  const state = useTableState({\n    childrenColumnName,\n    columns,\n    dataSource,\n    onChange,\n    onTableChange: () => {\n      if (scroll && scroll.scrollToFirstRowOnChange !== false) scrollTo({ top: 0 });\n    },\n    pagination,\n  });\n  const { data: allRows, page, total } = state;\n  const { pageIndex, pageSize } = page;\n  const rows = useMemo(() => {\n    if (pagination === false) return allRows;\n    if (allRows.length < total && allRows.length <= pageSize) return allRows;\n    return allRows.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);\n  }, [allRows, pagination, pageIndex, pageSize, total]);\n\n  const clientPaginated = pagination !== false && state.config?.total === undefined;\n  const syncClampedPage = useEventCallback(() => state.clampPage(pageIndex));\n  useLayoutEffect(() => {\n    if (clientPaginated && pageIndex !== state.rawPageIndex) syncClampedPage();\n  }, [clientPaginated, pageIndex, state.rawPageIndex, syncClampedPage]);\n\n  const recordMap = useMemo(() => {\n    const map = new Map<Key, T>();\n    const dig = (records: readonly T[]) => {\n      records.forEach((record, index) => {\n        map.set(getRowKey(record, index), record);\n        const nested = isPlainObject(record) ? record[childrenColumnName] : undefined;\n        if (Array.isArray(nested)) dig(nested as T[]);\n      });\n    };\n    dig(dataSource);\n    return map;\n  }, [dataSource, childrenColumnName, getRowKey]);\n  const getRecordByKey = useCallback((key: Key) => recordMap.get(key), [recordMap]);\n\n  const expandType = useMemo(\n    () => getExpandType(rows, childrenColumnName, expandable),\n    [rows, childrenColumnName, expandable],\n  );\n  const { expandedKeys, toggle } = useExpandable({\n    childrenColumnName,\n    expandable,\n    getRowKey,\n    pageData: rows,\n  });\n\n  const selection = useSelection(\n    {\n      childrenColumnName,\n      data: allRows,\n      expandType,\n      getRecordByKey,\n      getRowKey,\n      locale: tableLocale,\n      pageData: rows,\n    },\n    rowSelection,\n  );\n\n  const virtualDefaults = useVirtualLayout<T>({\n    expandable: Boolean(expandable),\n    rowSelection: rowSelection && { selections: rowSelection.selections, type: rowSelection.type },\n    variant,\n    virtual,\n  });\n\n  const selectionShape = useMemo(\n    (): TableRowSelection<T> | undefined =>\n      rowSelection && {\n        align: rowSelection.align,\n        fixed: rowSelection.fixed,\n        onCell: rowSelection.onCell,\n        selections: rowSelection.selections,\n        type: rowSelection.type,\n      },\n    [\n      Boolean(rowSelection),\n      rowSelection?.align,\n      rowSelection?.fixed,\n      rowSelection?.onCell,\n      rowSelection?.selections,\n      rowSelection?.type,\n    ],\n  );\n  const expandShape = useMemo(\n    (): TableExpandableConfig<T> | undefined =>\n      expandable && {\n        columnTitle: expandable.columnTitle,\n        expandIconColumnIndex: expandable.expandIconColumnIndex,\n        fixed: expandable.fixed,\n        showExpandColumn: expandable.showExpandColumn,\n      },\n    [\n      Boolean(expandable),\n      expandable?.columnTitle,\n      expandable?.expandIconColumnIndex,\n      expandable?.fixed,\n      expandable?.showExpandColumn,\n    ],\n  );\n  const expandColumnWidth = expandable?.columnWidth ?? virtualDefaults.expandColumnWidth;\n  const selectionColumnWidth = rowSelection?.columnWidth ?? virtualDefaults.selectionColumnWidth;\n\n  const normalized = useMemo(\n    () =>\n      normalizeColumns(columns, {\n        expandColumnWidth,\n        expandType,\n        expandable: expandShape,\n        prefixCls: PREFIX_CLS,\n        rowSelection: selectionShape,\n        screens,\n        selectionColumnWidth,\n      }),\n    [\n      columns,\n      expandColumnWidth,\n      expandShape,\n      expandType,\n      selectionShape,\n      screens,\n      selectionColumnWidth,\n    ],\n  );\n\n  const [colWidthMap, setColWidthMap] = useState<ReadonlyMap<string, number>>(new Map());\n  const onColumnResize = useCallback((key: string, width: number) => {\n    setColWidthMap((previous) => {\n      if (previous.get(key) === width) return previous;\n      const next = new Map(previous);\n      next.set(key, width);\n      return next;\n    });\n  }, []);\n\n  const scrollX = scroll?.x;\n  const fixHeader = Boolean(scroll && isPresent(scroll.y));\n  const horizonScroll = Boolean(scroll && isPresent(scrollX)) || Boolean(expandable?.fixed);\n\n  const { componentWidth, measureRef } = virtualDefaults;\n  const virtualWidths = useMemo(\n    () => (virtual ? virtualDefaults.fillWidths(normalized, scrollX, componentWidth) : undefined),\n    [virtual, virtualDefaults, normalized, scrollX, componentWidth],\n  );\n\n  const leafKeys = useMemo(() => {\n    const keys: string[] = [];\n    const dig = (list: typeof normalized) =>\n      list.forEach((column) =>\n        column.children?.length ? dig(column.children) : keys.push(column.key),\n      );\n    dig(normalized);\n    return keys;\n  }, [normalized]);\n  const columnWidths = useMemo(\n    () => virtualWidths ?? leafKeys.map((key) => colWidthMap.get(key) ?? 0),\n    [virtualWidths, leafKeys, colWidthMap],\n  );\n\n  const getChildren = useMemo(\n    () =>\n      expandType === 'nest'\n        ? (record: T) =>\n            (isPlainObject(record) ? record[childrenColumnName] : undefined) as T[] | undefined\n        : undefined,\n    [expandType, childrenColumnName],\n  );\n\n  const scrollY = scroll?.y;\n  const model = useTableEngine({\n    columnWidths,\n    columns: normalized,\n    data: rows,\n    expandedKeys,\n    getChildren,\n    getRowKey,\n  });\n\n  const initialHeight = typeof scrollY === 'number' ? scrollY : undefined;\n  const rowHeight = virtualDefaults.rowHeight(size);\n  const getScrollElement = useCallback(() => bodyRef.current, []);\n  const virtualInput = useMemo(\n    (): VirtualInput | undefined =>\n      virtual ? { getScrollElement, initialHeight, rowHeight } : undefined,\n    [virtual, getScrollElement, initialHeight, rowHeight],\n  );\n  const virtualScrollRef = useRef<((config: TableScrollToConfig) => void) | undefined>(undefined);\n\n  engineScrollRef.current = (config) => {\n    if (virtualInput) {\n      virtualScrollRef.current?.(config);\n      return;\n    }\n    const body = bodyRef.current;\n    if (!body) return;\n    const { align = 'nearest', index, key, offset, top } = config;\n    if (typeof top === 'number') {\n      body.scrollTo?.({ top });\n      return;\n    }\n    const target = key ?? (index === undefined ? undefined : getRowKey(rows[index], index));\n    const element = body.querySelector<HTMLElement>(`[data-row-key=\"${target}\"]`);\n    if (!element) return;\n    element.scrollIntoView({ block: align });\n    if (offset) body.scrollTo?.({ top: body.scrollTop + offset });\n  };\n\n  const [store] = useState(() =>\n    createTableStore({\n      expandedKeys,\n      halfSelectedKeys: selection.halfSelectedKeySet,\n      selectedKeys: selection.selectedKeySet,\n      selectionSummary: selection.summary,\n    }),\n  );\n  const sortedColumns = useMemo(\n    () => new Set(state.sortStates.filter(({ sortOrder }) => sortOrder).map(({ key }) => key)),\n    [state.sortStates],\n  );\n  useLayoutEffect(() => {\n    store.setState({\n      expandedKeys,\n      halfSelectedKeys: selection.halfSelectedKeySet,\n      selectedKeys: selection.selectedKeySet,\n      selectionSummary: selection.summary,\n      sortedColumns,\n    });\n  });\n\n  const nestIconColumnIndex = (() => {\n    const index = expandable?.expandIconColumnIndex;\n    if (expandType === 'nest' && index === undefined) return rowSelection ? 1 : 0;\n    if ((index ?? 0) > 0 && rowSelection) return index! - 1;\n    return index ?? 0;\n  })();\n\n  const expandIcon = useMemo(\n    () =>\n      expandable?.expandIcon ??\n      ((iconProps: Parameters<typeof renderExpandIcon<T>>[0]) =>\n        renderExpandIcon(iconProps, tableLocale)),\n    [expandable?.expandIcon, tableLocale],\n  );\n\n  const summaryNode = useMemo(() => summary?.(rows), [summary, rows]);\n\n  return {\n    bodyRef,\n    columnWidths,\n    columns,\n    expandIcon,\n    expandType,\n    fixHeader,\n    getRowKey,\n    grouped,\n    horizonScroll,\n    indentSize:\n      typeof expandable?.indentSize === 'number' ? expandable.indentSize : DEFAULT_INDENT_SIZE,\n    measureRef,\n    model,\n    nestIconColumnIndex,\n    onColumnResize,\n    rows,\n    screens,\n    scrollTo,\n    selection,\n    state,\n    store,\n    summaryNode,\n    tableLocale,\n    toggleExpand: toggle,\n    virtualInput,\n    virtualScrollRef,\n    virtualWidths,\n  };\n};\n"],"mappings":"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"}

package/es/Tabs/Tabs.d.mts

@@ -1,9 +1,6 @@
 import { TabsProps } from "./type.mjs";
 import { FC } from "react";
 //#region src/Tabs/Tabs.d.ts
-/**
- * @deprecated Use `Tabs` from `@lobehub/ui/base-ui` instead.
- */
 declare const Tabs: FC<TabsProps>;
 //#endregion
 export { Tabs as default };

package/es/Tabs/Tabs.mjs

@@ -1,41 +1,69 @@
 "use client";
-import ActionIcon from "../base-ui/ActionIcon/ActionIcon.mjs";
-import { styles, variants } from "./style.mjs";
-import { jsx } from "react/jsx-runtime";
-import { cx } from "antd-style";
-import { MoreHorizontalIcon } from "lucide-react";
-import { Tabs } from "antd";
+import { styleProps } from "../styles/stylex/props.mjs";
+import { useControlledState } from "../hooks/useControlledState.mjs";
+import { styles } from "./style.mjs";
+import { TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab } from "./atoms.mjs";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx$1 from "clsx";
 //#region src/Tabs/Tabs.tsx
-/**
-* @deprecated Use `Tabs` from `@lobehub/ui/base-ui` instead.
-*/
-const Tabs$1 = ({ className, compact, variant = "rounded", items, classNames, ...rest }) => {
-	const hasContent = items?.some((item) => !!item.children);
-	const popupClassNames = {
-		root: styles.dropdown,
-		...typeof classNames === "function" ? void 0 : classNames?.popup
-	};
-	const mergedClassNames = typeof classNames === "function" ? Object.assign((info) => classNames(info), { popup: popupClassNames }) : {
-		...classNames,
-		popup: popupClassNames
-	};
-	return /* @__PURE__ */ jsx(Tabs, {
-		className: cx(variants({
-			compact,
-			underlined: hasContent,
-			variant
-		}), className),
-		items,
-		...rest,
-		classNames: mergedClassNames,
-		more: {
-			icon: /* @__PURE__ */ jsx(ActionIcon, { icon: MoreHorizontalIcon }),
-			...rest?.more
-		}
+const Tabs = ({ activeKey, className, classNames, defaultActiveKey, items, onChange, orientation = "horizontal", ref, size = "middle", style, styles: customStyles, variant = "rounded" }) => {
+	const initialActiveKey = defaultActiveKey ?? items?.find((item) => !item.disabled)?.key ?? null;
+	const [value, setValue] = useControlledState(initialActiveKey, {
+		defaultValue: initialActiveKey,
+		onChange: (next) => {
+			if (next != null) onChange?.(next);
+		},
+		value: activeKey
+	});
+	const list = useMemo(() => /* @__PURE__ */ jsxs(TabsList, {
+		className: classNames?.list,
+		style: customStyles?.list,
+		children: [/* @__PURE__ */ jsx(TabsIndicator, {
+			className: classNames?.indicator,
+			style: customStyles?.indicator
+		}), items?.map((item) => /* @__PURE__ */ jsxs(TabsTab, {
+			className: classNames?.tab,
+			disabled: item.disabled,
+			style: customStyles?.tab,
+			value: item.key,
+			children: [item.icon, item.label]
+		}, item.key))]
+	}), [
+		classNames?.indicator,
+		classNames?.list,
+		classNames?.tab,
+		customStyles?.indicator,
+		customStyles?.list,
+		customStyles?.tab,
+		items
+	]);
+	const panels = useMemo(() => items?.some((item) => item.children != null) ? items.map((item) => /* @__PURE__ */ jsx(TabsPanel, {
+		className: classNames?.panel,
+		style: customStyles?.panel,
+		value: item.key,
+		children: item.children
+	}, item.key)) : null, [
+		classNames?.panel,
+		customStyles?.panel,
+		items
+	]);
+	return /* @__PURE__ */ jsxs(TabsRoot, {
+		...styleProps(styles.root, clsx$1(classNames?.root, className), {
+			...style,
+			...customStyles?.root
+		}),
+		orientation,
+		ref,
+		size,
+		value,
+		variant,
+		onValueChange: (next) => setValue(next ?? null),
+		children: [list, panels]
 	});
 };
-Tabs$1.displayName = "Tabs";
+Tabs.displayName = "Tabs";
 //#endregion
-export { Tabs$1 as default };
+export { Tabs as default };
 
 //# sourceMappingURL=Tabs.mjs.map

package/es/Tabs/Tabs.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.mjs","names":["Tabs","AntdTabs"],"sources":["../../src/Tabs/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport { Tabs as AntdTabs } from 'antd';\nimport { cx } from 'antd-style';\nimport { MoreHorizontalIcon } from 'lucide-react';\nimport { type FC } from 'react';\n\nimport ActionIcon from '@/base-ui/ActionIcon';\n\nimport { styles, variants } from './style';\nimport type { TabsProps } from './type';\n\n/**\n * @deprecated Use `Tabs` from `@lobehub/ui/base-ui` instead.\n */\nconst Tabs: FC<TabsProps> = ({\n  className,\n  compact,\n  variant = 'rounded',\n  items,\n  classNames,\n  ...rest\n}) => {\n  const hasContent = items?.some((item) => !!item.children);\n  const popupClassNames = {\n    root: styles.dropdown,\n    ...(typeof classNames === 'function' ? undefined : classNames?.popup),\n  };\n  const mergedClassNames: TabsProps['classNames'] =\n    typeof classNames === 'function'\n      ? Object.assign((info: Parameters<typeof classNames>[0]) => classNames(info), {\n          popup: popupClassNames,\n        })\n      : {\n          ...classNames,\n          popup: popupClassNames,\n        };\n\n  return (\n    <AntdTabs\n      className={cx(variants({ compact, underlined: hasContent, variant }), className)}\n      items={items}\n      {...rest}\n      classNames={mergedClassNames}\n      more={{\n        icon: <ActionIcon icon={MoreHorizontalIcon} />,\n        ...rest?.more,\n      }}\n    />\n  );\n};\n\nTabs.displayName = 'Tabs';\n\nexport default Tabs;\n"],"mappings":";;;;;;;;;;;AAeA,MAAMA,UAAuB,EAC3B,WACA,SACA,UAAU,WACV,OACA,YACA,GAAG,WACC;CACJ,MAAM,aAAa,OAAO,MAAM,SAAS,CAAC,CAAC,KAAK,QAAQ;CACxD,MAAM,kBAAkB;EACtB,MAAM,OAAO;EACb,GAAI,OAAO,eAAe,aAAa,KAAA,IAAY,YAAY;CACjE;CACA,MAAM,mBACJ,OAAO,eAAe,aAClB,OAAO,QAAQ,SAA2C,WAAW,IAAI,GAAG,EAC1E,OAAO,gBACT,CAAC,IACD;EACE,GAAG;EACH,OAAO;CACT;CAEN,OACE,oBAACC,MAAD;EACE,WAAW,GAAG,SAAS;GAAE;GAAS,YAAY;GAAY;EAAQ,CAAC,GAAG,SAAS;EACxE;EACP,GAAI;EACJ,YAAY;EACZ,MAAM;GACJ,MAAM,oBAAC,YAAD,EAAY,MAAM,mBAAqB,CAAA;GAC7C,GAAG,MAAM;EACX;CACD,CAAA;AAEL;AAEA,OAAK,cAAc"}
+{"version":3,"file":"Tabs.mjs","names":["clsx"],"sources":["../../src/Tabs/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { type FC, useMemo } from 'react';\n\nimport { useControlledState } from '@/hooks/useControlledState';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab } from './atoms';\nimport { styles } from './style';\nimport type { TabsProps } from './type';\n\nconst Tabs: FC<TabsProps> = ({\n  activeKey,\n  className,\n  classNames,\n  defaultActiveKey,\n  items,\n  onChange,\n  orientation = 'horizontal',\n  ref,\n  size = 'middle',\n  style,\n  styles: customStyles,\n  variant = 'rounded',\n}) => {\n  const initialActiveKey = defaultActiveKey ?? items?.find((item) => !item.disabled)?.key ?? null;\n  const [value, setValue] = useControlledState<string | null>(initialActiveKey, {\n    defaultValue: initialActiveKey,\n    onChange: (next) => {\n      if (next != null) onChange?.(next);\n    },\n    value: activeKey,\n  });\n\n  const list = useMemo(\n    () => (\n      <TabsList className={classNames?.list} style={customStyles?.list}>\n        <TabsIndicator className={classNames?.indicator} style={customStyles?.indicator} />\n        {items?.map((item) => (\n          <TabsTab\n            className={classNames?.tab}\n            disabled={item.disabled}\n            key={item.key}\n            style={customStyles?.tab}\n            value={item.key}\n          >\n            {item.icon}\n            {item.label}\n          </TabsTab>\n        ))}\n      </TabsList>\n    ),\n    [\n      classNames?.indicator,\n      classNames?.list,\n      classNames?.tab,\n      customStyles?.indicator,\n      customStyles?.list,\n      customStyles?.tab,\n      items,\n    ],\n  );\n\n  const panels = useMemo(\n    () =>\n      items?.some((item) => item.children != null)\n        ? items.map((item) => (\n            <TabsPanel\n              className={classNames?.panel}\n              key={item.key}\n              style={customStyles?.panel}\n              value={item.key}\n            >\n              {item.children}\n            </TabsPanel>\n          ))\n        : null,\n    [classNames?.panel, customStyles?.panel, items],\n  );\n\n  return (\n    <TabsRoot\n      {...styleProps(styles.root, clsx(classNames?.root, className), {\n        ...style,\n        ...customStyles?.root,\n      })}\n      orientation={orientation}\n      ref={ref}\n      size={size}\n      value={value}\n      variant={variant}\n      onValueChange={(next) => setValue(next ?? null)}\n    >\n      {list}\n      {panels}\n    </TabsRoot>\n  );\n};\n\nTabs.displayName = 'Tabs';\n\nexport default Tabs;\n"],"mappings":";;;;;;;;;AAYA,MAAM,QAAuB,EAC3B,WACA,WACA,YACA,kBACA,OACA,UACA,cAAc,cACd,KACA,OAAO,UACP,OACA,QAAQ,cACR,UAAU,gBACN;CACJ,MAAM,mBAAmB,oBAAoB,OAAO,MAAM,SAAS,CAAC,KAAK,QAAQ,CAAC,EAAE,OAAO;CAC3F,MAAM,CAAC,OAAO,YAAY,mBAAkC,kBAAkB;EAC5E,cAAc;EACd,WAAW,SAAS;GAClB,IAAI,QAAQ,MAAM,WAAW,IAAI;EACnC;EACA,OAAO;CACT,CAAC;CAED,MAAM,OAAO,cAET,qBAAC,UAAD;EAAU,WAAW,YAAY;EAAM,OAAO,cAAc;EAA5D,UAAA,CACE,oBAAC,eAAD;GAAe,WAAW,YAAY;GAAW,OAAO,cAAc;EAAY,CAAA,GACjF,OAAO,KAAK,SACX,qBAAC,SAAD;GACE,WAAW,YAAY;GACvB,UAAU,KAAK;GAEf,OAAO,cAAc;GACrB,OAAO,KAAK;GALd,UAAA,CAOG,KAAK,MACL,KAAK,KACC;EANF,GAAA,KAAK,GAMH,CACV,CACO;CAEZ,CAAA,GAAA;EACE,YAAY;EACZ,YAAY;EACZ,YAAY;EACZ,cAAc;EACd,cAAc;EACd,cAAc;EACd;CACF,CACF;CAEA,MAAM,SAAS,cAEX,OAAO,MAAM,SAAS,KAAK,YAAY,IAAI,IACvC,MAAM,KAAK,SACT,oBAAC,WAAD;EACE,WAAW,YAAY;EAEvB,OAAO,cAAc;EACrB,OAAO,KAAK;EAEX,UAAA,KAAK;CACG,GALJ,KAAK,GAKD,CACZ,IACD,MACN;EAAC,YAAY;EAAO,cAAc;EAAO;CAAK,CAChD;CAEA,OACE,qBAAC,UAAD;EACE,GAAI,WAAW,OAAO,MAAMA,OAAK,YAAY,MAAM,SAAS,GAAG;GAC7D,GAAG;GACH,GAAG,cAAc;EACnB,CAAC;EACY;EACR;EACC;EACC;EACE;EACT,gBAAgB,SAAS,SAAS,QAAQ,IAAI;EAVhD,UAAA,CAYG,MACA,MACO;;AAEd;AAEA,KAAK,cAAc"}

package/es/Tabs/atoms.d.mts

@@ -0,0 +1,21 @@
+import { TabsIndicatorProps, TabsListProps, TabsPanelProps, TabsRootProps, TabsSize, TabsTabProps, TabsVariant } from "./type.mjs";
+import { tabsStyles } from "./style.mjs";
+import { FC } from "react";
+//#region src/Tabs/atoms.d.ts
+interface TabsContextValue {
+  size: TabsSize;
+  variant: TabsVariant;
+}
+export declare const useTabsContext: () => TabsContextValue;
+type TabsRootInternalProps = TabsRootProps & {
+  size?: TabsSize;
+  variant?: TabsVariant;
+};
+export declare const TabsRoot: FC<TabsRootInternalProps>;
+export declare const TabsList: FC<TabsListProps>;
+export declare const TabsTab: FC<TabsTabProps>;
+export declare const TabsPanel: FC<TabsPanelProps>;
+export declare const TabsIndicator: FC<TabsIndicatorProps>;
+//#endregion
+export { tabsStyles };
+//# sourceMappingURL=atoms.d.mts.map

package/es/Tabs/atoms.mjs

@@ -0,0 +1,67 @@
+"use client";
+import { styleProps } from "../styles/stylex/props.mjs";
+import { indicatorStyles, listStyles, panelStyles, tabStyles, tabsStyles } from "./style.mjs";
+import { createContext, use, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+import { Tabs } from "@base-ui/react/tabs";
+//#region src/Tabs/atoms.tsx
+const TabsContext = createContext({
+	size: "middle",
+	variant: "rounded"
+});
+const useTabsContext = () => use(TabsContext);
+const TabsRoot = ({ children, size = "middle", variant = "rounded", ...rest }) => {
+	const contextValue = useMemo(() => ({
+		size,
+		variant
+	}), [size, variant]);
+	return /* @__PURE__ */ jsx(TabsContext, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(Tabs.Root, {
+			...rest,
+			children
+		})
+	});
+};
+TabsRoot.displayName = "TabsRoot";
+const TabsList = ({ className, variant: variantProp, ...rest }) => {
+	const ctx = useTabsContext();
+	const variant = variantProp ?? ctx.variant;
+	return /* @__PURE__ */ jsx(Tabs.List, {
+		className: styleProps(listStyles(variant), className).className,
+		...rest
+	});
+};
+TabsList.displayName = "TabsList";
+const TabsTab = ({ className, size: sizeProp, variant: variantProp, ...rest }) => {
+	const ctx = useTabsContext();
+	const size = sizeProp ?? ctx.size;
+	const variant = variantProp ?? ctx.variant;
+	return /* @__PURE__ */ jsx(Tabs.Tab, {
+		className: styleProps(tabStyles(size, variant), className).className,
+		...rest
+	});
+};
+TabsTab.displayName = "TabsTab";
+const TabsPanel = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx(Tabs.Panel, {
+		className: styleProps(panelStyles, className).className,
+		...rest
+	});
+};
+TabsPanel.displayName = "TabsPanel";
+const TabsIndicator = ({ className, variant: variantProp, ...rest }) => {
+	const ctx = useTabsContext();
+	const variant = variantProp ?? ctx.variant;
+	return /* @__PURE__ */ jsx(Tabs.Indicator, {
+		renderBeforeHydration: true,
+		className: styleProps(indicatorStyles(variant), clsx$1("lobe-tabs-indicator", className)).className,
+		...rest
+	});
+};
+TabsIndicator.displayName = "TabsIndicator";
+//#endregion
+export { TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab, tabsStyles, useTabsContext };
+
+//# sourceMappingURL=atoms.mjs.map

package/es/Tabs/atoms.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"atoms.mjs","names":["BaseUITabs","clsx"],"sources":["../../src/Tabs/atoms.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport { Tabs as BaseUITabs } from '@base-ui/react/tabs';\nimport clsx from 'clsx';\nimport { createContext, type FC, use, useMemo } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { indicatorStyles, listStyles, panelStyles, tabStyles } from './style';\nimport type {\n  TabsIndicatorProps,\n  TabsListProps,\n  TabsPanelProps,\n  TabsRootProps,\n  TabsSize,\n  TabsTabProps,\n  TabsVariant,\n} from './type';\n\ninterface TabsContextValue {\n  size: TabsSize;\n  variant: TabsVariant;\n}\n\nconst TabsContext = createContext<TabsContextValue>({ size: 'middle', variant: 'rounded' });\n\nexport const useTabsContext = () => use(TabsContext);\n\ntype TabsRootInternalProps = TabsRootProps & {\n  size?: TabsSize;\n  variant?: TabsVariant;\n};\n\nexport const TabsRoot: FC<TabsRootInternalProps> = ({\n  children,\n  size = 'middle',\n  variant = 'rounded',\n  ...rest\n}) => {\n  const contextValue = useMemo(() => ({ size, variant }), [size, variant]);\n\n  return (\n    <TabsContext value={contextValue}>\n      <BaseUITabs.Root {...rest}>{children}</BaseUITabs.Root>\n    </TabsContext>\n  );\n};\n\nTabsRoot.displayName = 'TabsRoot';\n\nexport const TabsList: FC<TabsListProps> = ({ className, variant: variantProp, ...rest }) => {\n  const ctx = useTabsContext();\n  const variant = variantProp ?? ctx.variant;\n\n  return (\n    <BaseUITabs.List className={styleProps(listStyles(variant), className).className} {...rest} />\n  );\n};\n\nTabsList.displayName = 'TabsList';\n\nexport const TabsTab: FC<TabsTabProps> = ({\n  className,\n  size: sizeProp,\n  variant: variantProp,\n  ...rest\n}) => {\n  const ctx = useTabsContext();\n  const size = sizeProp ?? ctx.size;\n  const variant = variantProp ?? ctx.variant;\n\n  return (\n    <BaseUITabs.Tab\n      className={styleProps(tabStyles(size, variant), className).className}\n      {...rest}\n    />\n  );\n};\n\nTabsTab.displayName = 'TabsTab';\n\nexport const TabsPanel: FC<TabsPanelProps> = ({ className, ...rest }) => {\n  return <BaseUITabs.Panel className={styleProps(panelStyles, className).className} {...rest} />;\n};\n\nTabsPanel.displayName = 'TabsPanel';\n\nexport const TabsIndicator: FC<TabsIndicatorProps> = ({\n  className,\n  variant: variantProp,\n  ...rest\n}) => {\n  const ctx = useTabsContext();\n  const variant = variantProp ?? ctx.variant;\n\n  return (\n    <BaseUITabs.Indicator\n      renderBeforeHydration\n      className={\n        styleProps(indicatorStyles(variant), clsx('lobe-tabs-indicator', className)).className\n      }\n      {...rest}\n    />\n  );\n};\n\nTabsIndicator.displayName = 'TabsIndicator';\n\nexport { tabsStyles } from './style';\n"],"mappings":";;;;;;;;AA0BA,MAAM,cAAc,cAAgC;CAAE,MAAM;CAAU,SAAS;AAAU,CAAC;AAE1F,MAAa,uBAAuB,IAAI,WAAW;AAOnD,MAAa,YAAuC,EAClD,UACA,OAAO,UACP,UAAU,WACV,GAAG,WACC;CACJ,MAAM,eAAe,eAAe;EAAE;EAAM;CAAQ,IAAI,CAAC,MAAM,OAAO,CAAC;CAEvE,OACE,oBAAC,aAAD;EAAa,OAAO;EAClB,UAAA,oBAACA,KAAW,MAAZ;GAAiB,GAAI;GAAO;EAA0B,CAAA;CAC3C,CAAA;AAEjB;AAEA,SAAS,cAAc;AAEvB,MAAa,YAA+B,EAAE,WAAW,SAAS,aAAa,GAAG,WAAW;CAC3F,MAAM,MAAM,eAAe;CAC3B,MAAM,UAAU,eAAe,IAAI;CAEnC,OACE,oBAACA,KAAW,MAAZ;EAAiB,WAAW,WAAW,WAAW,OAAO,GAAG,SAAS,CAAC,CAAC;EAAW,GAAI;CAAO,CAAA;AAEjG;AAEA,SAAS,cAAc;AAEvB,MAAa,WAA6B,EACxC,WACA,MAAM,UACN,SAAS,aACT,GAAG,WACC;CACJ,MAAM,MAAM,eAAe;CAC3B,MAAM,OAAO,YAAY,IAAI;CAC7B,MAAM,UAAU,eAAe,IAAI;CAEnC,OACE,oBAACA,KAAW,KAAZ;EACE,WAAW,WAAW,UAAU,MAAM,OAAO,GAAG,SAAS,CAAC,CAAC;EAC3D,GAAI;CACL,CAAA;AAEL;AAEA,QAAQ,cAAc;AAEtB,MAAa,aAAiC,EAAE,WAAW,GAAG,WAAW;CACvE,OAAO,oBAACA,KAAW,OAAZ;EAAkB,WAAW,WAAW,aAAa,SAAS,CAAC,CAAC;EAAW,GAAI;CAAO,CAAA;AAC/F;AAEA,UAAU,cAAc;AAExB,MAAa,iBAAyC,EACpD,WACA,SAAS,aACT,GAAG,WACC;CACJ,MAAM,MAAM,eAAe;CAC3B,MAAM,UAAU,eAAe,IAAI;CAEnC,OACE,oBAACA,KAAW,WAAZ;EACE,uBAAA;EACA,WACE,WAAW,gBAAgB,OAAO,GAAGC,OAAK,uBAAuB,SAAS,CAAC,CAAC,CAAC;EAE/E,GAAI;CACL,CAAA;AAEL;AAEA,cAAc,cAAc"}

package/es/Tabs/index.d.mts

@@ -1,3 +1,5 @@
-import { TabsProps } from "./type.mjs";
+import { TabsClassNames, TabsIndicatorProps, TabsItem, TabsListProps, TabsOrientation, TabsPanelProps, TabsProps, TabsRootProps, TabsSize, TabsStyles, TabsTabProps, TabsVariant } from "./type.mjs";
+import { tabsStyles } from "./style.mjs";
+import { TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab, useTabsContext } from "./atoms.mjs";
 import Tabs from "./Tabs.mjs";
-export { type TabsProps, Tabs as default };
+export { type TabsClassNames, TabsIndicator, type TabsIndicatorProps, type TabsItem, TabsList, type TabsListProps, type TabsOrientation, TabsPanel, type TabsPanelProps, type TabsProps, TabsRoot, type TabsRootProps, type TabsSize, type TabsStyles, TabsTab, type TabsTabProps, type TabsVariant, Tabs as default, tabsStyles, useTabsContext };

package/es/Tabs/index.mjs

@@ -1 +1,4 @@
-export { default } from "./Tabs.mjs";
+import { tabsStyles } from "./style.mjs";
+import { TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab, useTabsContext } from "./atoms.mjs";
+import Tabs from "./Tabs.mjs";
+export { TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab, Tabs as default, tabsStyles, useTabsContext };

package/es/Tabs/style.d.mts

@@ -0,0 +1,22 @@
+import "./type.mjs";
+import "@stylexjs/stylex";
+//#region src/Tabs/style.d.ts
+export declare const tabsStyles: {
+  panel: string;
+  tab: string;
+  list: string;
+  root: string;
+  indicator: string;
+  indicatorPoint: string;
+  indicatorRounded: string;
+  indicatorSquare: string;
+  listRounded: string;
+  listSquare: string;
+  tabLarge: string;
+  tabMiddle: string;
+  tabPoint: string;
+  tabSmall: string;
+  tabSquare: string;
+};
+//#endregion
+//# sourceMappingURL=style.d.mts.map