@lobehub/ui 6.0.0-beta.1 → 6.0.0-beta.11

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.mjs

@@ -1,10 +1,11 @@
 "use client";
 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 from "clsx";
-import useControlledState from "use-merge-value";
+import clsx$1 from "clsx";
 //#region src/Tabs/Tabs.tsx
 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;
@@ -15,9 +16,40 @@ const Tabs = ({ activeKey, className, classNames, defaultActiveKey, items, onCha
 		},
 		value: activeKey
 	});
-	const hasPanels = items?.some((item) => item.children != null);
+	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(classNames?.root, className), {
+		...styleProps(styles.root, clsx$1(classNames?.root, className), {
 			...style,
 			...customStyles?.root
 		}),
@@ -27,25 +59,7 @@ const Tabs = ({ activeKey, className, classNames, defaultActiveKey, items, onCha
 		value,
 		variant,
 		onValueChange: (next) => setValue(next ?? null),
-		children: [/* @__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))]
-		}), hasPanels && items?.map((item) => /* @__PURE__ */ jsx(TabsPanel, {
-			className: classNames?.panel,
-			style: customStyles?.panel,
-			value: item.key,
-			children: item.children
-		}, item.key))]
+		children: [list, panels]
 	});
 };
 Tabs.displayName = "Tabs";

package/es/Tabs/Tabs.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.mjs","names":[],"sources":["../../src/Tabs/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { type FC } from 'react';\nimport useControlledState from 'use-merge-value';\n\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 hasPanels = items?.some((item) => item.children != null);\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      <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      {hasPanels &&\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    </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,YAAY,OAAO,MAAM,SAAS,KAAK,YAAY,IAAI;CAE7D,OACE,qBAAC,UAAD;EACE,GAAI,WAAW,OAAO,MAAM,KAAK,YAAY,MAAM,SAAS,GAAG;GAC7D,GAAG;GACH,GAAG,cAAc;EACnB,CAAC;EACY;EACR;EACC;EACC;EACE;EACT,gBAAgB,SAAS,SAAS,QAAQ,IAAI;EAVhD,UAAA,CAYE,qBAAC,UAAD;GAAU,WAAW,YAAY;GAAM,OAAO,cAAc;GAA5D,UAAA,CACE,oBAAC,eAAD;IAAe,WAAW,YAAY;IAAW,OAAO,cAAc;GAAY,CAAA,GACjF,OAAO,KAAK,SACX,qBAAC,SAAD;IACE,WAAW,YAAY;IACvB,UAAU,KAAK;IAEf,OAAO,cAAc;IACrB,OAAO,KAAK;IALd,UAAA,CAOG,KAAK,MACL,KAAK,KACC;GANF,GAAA,KAAK,GAMH,CACV,CACO;EACT,CAAA,GAAA,aACC,OAAO,KAAK,SACV,oBAAC,WAAD;GACE,WAAW,YAAY;GAEvB,OAAO,cAAc;GACrB,OAAO,KAAK;GAEX,UAAA,KAAK;EACG,GALJ,KAAK,GAKD,CACZ,CACK;;AAEd;AAEA,KAAK,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.mjs

@@ -3,7 +3,7 @@ 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 from "clsx";
+import clsx$1 from "clsx";
 import { Tabs } from "@base-ui/react/tabs";
 //#region src/Tabs/atoms.tsx
 const TabsContext = createContext({
@@ -56,7 +56,7 @@ const TabsIndicator = ({ className, variant: variantProp, ...rest }) => {
 	const variant = variantProp ?? ctx.variant;
 	return /* @__PURE__ */ jsx(Tabs.Indicator, {
 		renderBeforeHydration: true,
-		className: styleProps(indicatorStyles(variant), clsx("lobe-tabs-indicator", className)).className,
+		className: styleProps(indicatorStyles(variant), clsx$1("lobe-tabs-indicator", className)).className,
 		...rest
 	});
 };

package/es/Tabs/atoms.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"atoms.mjs","names":["BaseUITabs"],"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,GAAG,KAAK,uBAAuB,SAAS,CAAC,CAAC,CAAC;EAE/E,GAAI;CACL,CAAA;AAEL;AAEA,cAAc,cAAc"}
+{"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/style.d.mts

@@ -5,8 +5,8 @@ export declare const tabsStyles: {
   panel: string;
   tab: string;
   list: string;
-  root: string;
   indicator: string;
+  root: string;
   indicatorPoint: string;
   indicatorRounded: string;
   indicatorSquare: string;

package/es/Tag/Tag.mjs

@@ -7,7 +7,7 @@ import { styles } from "./style.mjs";
 import { colorsPreset, colorsPresetSystem, presetColors, presetSystemColors } from "./utils.mjs";
 import { memo, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import { X } from "lucide-react";
 //#region src/Tag/Tag.tsx
 const variantStyles = {
@@ -64,7 +64,7 @@ const Tag = memo(({ children, className, classNames, closable, closeIcon, color,
 			variantStyles[variant],
 			styles[size],
 			shape === "round" && [styles.round, roundSizeStyles[size]]
-		], clsx("lobe-tag", className, classNames?.root), {
+		], clsx$1("lobe-tag", className, classNames?.root), {
 			background: colors.backgroundColor,
 			borderColor: colors.borderColor,
 			color: colors.textColor,

package/es/Tag/Tag.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.mjs","names":[],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport clsx from 'clsx';\nimport { X } from 'lucide-react';\nimport { memo, useMemo, useState } from 'react';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\nimport { stylish } from '@/styles/stylex/stylish';\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nimport { styles } from './style';\nimport type { TagProps } from './type';\nimport { colorsPreset, colorsPresetSystem, presetColors, presetSystemColors } from './utils';\n\nconst variantStyles = {\n  borderless: stylish.variantBorderlessWithoutHover,\n  filled: stylish.variantFilledWithoutHover,\n  outlined: stylish.variantOutlinedWithoutHover,\n  solid: stylish.variantFilledWithoutHover,\n};\n\nconst roundSizeStyles = {\n  large: styles.roundLarge,\n  middle: styles.roundMiddle,\n  small: styles.roundSmall,\n};\n\nconst Tag = memo<TagProps>(\n  ({\n    children,\n    className,\n    classNames,\n    closable,\n    closeIcon,\n    color,\n    icon,\n    onClick,\n    onClose,\n    ref,\n    shape = 'normal',\n    size = 'middle',\n    style,\n    styles: customStyles,\n    variant = 'filled',\n    ...rest\n  }) => {\n    const [visible, setVisible] = useState(true);\n\n    const colors = useMemo(() => {\n      let textColor = cssVar.colorTextSecondary;\n      let backgroundColor;\n      let borderColor;\n      const isBorderless = variant === 'borderless';\n      const isFilled = variant === 'filled';\n      const isSolid = variant === 'solid';\n      const isPresetColor = color && presetColors.includes(color);\n      const isPresetSystemColors = color && presetSystemColors.has(color);\n      const isHexColor = color && color.startsWith('#');\n\n      if (isPresetColor) {\n        const solidBgColor = colorsPreset(color);\n        textColor = isSolid ? safeReadableColor(solidBgColor) : colorsPreset(color, 'active');\n        backgroundColor = isSolid\n          ? solidBgColor\n          : isBorderless\n            ? 'transparent'\n            : colorsPreset(color, 'fillTertiary');\n        borderColor = isSolid\n          ? solidBgColor\n          : colorsPreset(color, isFilled ? 'fillQuaternary' : 'fillTertiary');\n      }\n      if (isPresetSystemColors) {\n        const solidBgColor = colorsPresetSystem(color);\n        textColor = isSolid ? safeReadableColor(solidBgColor) : colorsPresetSystem(color);\n        backgroundColor = isSolid\n          ? solidBgColor\n          : isBorderless\n            ? 'transparent'\n            : colorsPresetSystem(color, 'fillTertiary');\n        borderColor = isSolid\n          ? solidBgColor\n          : colorsPresetSystem(color, isFilled ? 'fillQuaternary' : 'fillTertiary');\n      }\n      if (isHexColor) {\n        textColor = isSolid\n          ? safeReadableColor(color)\n          : isBorderless\n            ? color\n            : cssVar.colorBgLayout;\n        backgroundColor = isSolid ? color : isBorderless ? 'transparent' : color;\n        borderColor = isSolid ? color : borderColor;\n      }\n\n      return {\n        backgroundColor,\n        borderColor,\n        textColor,\n      };\n    }, [color, variant]);\n\n    if (!visible) return null;\n\n    return (\n      <span\n        ref={ref}\n        {...styleProps(\n          [\n            styles.root,\n            variantStyles[variant],\n            styles[size],\n            shape === 'round' && [styles.round, roundSizeStyles[size]],\n          ],\n          clsx('lobe-tag', className, classNames?.root),\n          {\n            background: colors.backgroundColor,\n            borderColor: colors.borderColor,\n            color: colors.textColor,\n            cursor: onClick ? 'pointer' : undefined,\n            ...style,\n            ...customStyles?.root,\n          },\n        )}\n        onClick={onClick}\n        {...rest}\n      >\n        {icon}\n        {children}\n        {closable && (\n          <button\n            aria-label=\"Close\"\n            {...styleProps(styles.close, classNames?.closeIcon, customStyles?.closeIcon)}\n            type=\"button\"\n            onClick={(e) => {\n              e.stopPropagation();\n              onClose?.(e);\n              setVisible(false);\n            }}\n          >\n            {closeIcon ?? <X size={10} />}\n          </button>\n        )}\n      </span>\n    );\n  },\n);\n\nTag.displayName = 'Tag';\n\nexport default Tag;\n"],"mappings":";;;;;;;;;;;;AAiBA,MAAM,gBAAgB;CACpB,YAAY,QAAQ;CACpB,QAAQ,QAAQ;CAChB,UAAU,QAAQ;CAClB,OAAO,QAAQ;AACjB;AAEA,MAAM,kBAAkB;CACtB,OAAO,OAAO;CACd,QAAQ,OAAO;CACf,OAAO,OAAO;AAChB;AAEA,MAAM,MAAM,MACT,EACC,UACA,WACA,YACA,UACA,WACA,OACA,MACA,SACA,SACA,KACA,QAAQ,UACR,OAAO,UACP,OACA,QAAQ,cACR,UAAU,UACV,GAAG,WACC;CACJ,MAAM,CAAC,SAAS,cAAc,SAAS,IAAI;CAE3C,MAAM,SAAS,cAAc;EAC3B,IAAI,YAAY,OAAO;EACvB,IAAI;EACJ,IAAI;EACJ,MAAM,eAAe,YAAY;EACjC,MAAM,WAAW,YAAY;EAC7B,MAAM,UAAU,YAAY;EAC5B,MAAM,gBAAgB,SAAS,aAAa,SAAS,KAAK;EAC1D,MAAM,uBAAuB,SAAS,mBAAmB,IAAI,KAAK;EAClE,MAAM,aAAa,SAAS,MAAM,WAAW,GAAG;EAEhD,IAAI,eAAe;GACjB,MAAM,eAAe,aAAa,KAAK;GACvC,YAAY,UAAU,kBAAkB,YAAY,IAAI,aAAa,OAAO,QAAQ;GACpF,kBAAkB,UACd,eACA,eACE,gBACA,aAAa,OAAO,cAAc;GACxC,cAAc,UACV,eACA,aAAa,OAAO,WAAW,mBAAmB,cAAc;EACtE;EACA,IAAI,sBAAsB;GACxB,MAAM,eAAe,mBAAmB,KAAK;GAC7C,YAAY,UAAU,kBAAkB,YAAY,IAAI,mBAAmB,KAAK;GAChF,kBAAkB,UACd,eACA,eACE,gBACA,mBAAmB,OAAO,cAAc;GAC9C,cAAc,UACV,eACA,mBAAmB,OAAO,WAAW,mBAAmB,cAAc;EAC5E;EACA,IAAI,YAAY;GACd,YAAY,UACR,kBAAkB,KAAK,IACvB,eACE,QACA,OAAO;GACb,kBAAkB,UAAU,QAAQ,eAAe,gBAAgB;GACnE,cAAc,UAAU,QAAQ;EAClC;EAEA,OAAO;GACL;GACA;GACA;EACF;CACF,GAAG,CAAC,OAAO,OAAO,CAAC;CAEnB,IAAI,CAAC,SAAS,OAAO;CAErB,OACE,qBAAC,QAAD;EACO;EACL,GAAI,WACF;GACE,OAAO;GACP,cAAc;GACd,OAAO;GACP,UAAU,WAAW,CAAC,OAAO,OAAO,gBAAgB,KAAK;EAC3D,GACA,KAAK,YAAY,WAAW,YAAY,IAAI,GAC5C;GACE,YAAY,OAAO;GACnB,aAAa,OAAO;GACpB,OAAO,OAAO;GACd,QAAQ,UAAU,YAAY,KAAA;GAC9B,GAAG;GACH,GAAG,cAAc;EACnB,CACF;EACS;EACT,GAAI;EApBN,UAAA;GAsBG;GACA;GACA,YACC,oBAAC,UAAD;IACE,cAAW;IACX,GAAI,WAAW,OAAO,OAAO,YAAY,WAAW,cAAc,SAAS;IAC3E,MAAK;IACL,UAAU,MAAM;KACd,EAAE,gBAAgB;KAClB,UAAU,CAAC;KACX,WAAW,KAAK;IAClB;IAEC,UAAA,aAAa,oBAAC,GAAD,EAAG,MAAM,GAAK,CAAA;GACtB,CAAA;EAEN;;AAEV,CACF;AAEA,IAAI,cAAc"}
+{"version":3,"file":"Tag.mjs","names":["clsx"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport clsx from 'clsx';\nimport { X } from 'lucide-react';\nimport { memo, useMemo, useState } from 'react';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\nimport { stylish } from '@/styles/stylex/stylish';\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nimport { styles } from './style';\nimport type { TagProps } from './type';\nimport { colorsPreset, colorsPresetSystem, presetColors, presetSystemColors } from './utils';\n\nconst variantStyles = {\n  borderless: stylish.variantBorderlessWithoutHover,\n  filled: stylish.variantFilledWithoutHover,\n  outlined: stylish.variantOutlinedWithoutHover,\n  solid: stylish.variantFilledWithoutHover,\n};\n\nconst roundSizeStyles = {\n  large: styles.roundLarge,\n  middle: styles.roundMiddle,\n  small: styles.roundSmall,\n};\n\nconst Tag = memo<TagProps>(\n  ({\n    children,\n    className,\n    classNames,\n    closable,\n    closeIcon,\n    color,\n    icon,\n    onClick,\n    onClose,\n    ref,\n    shape = 'normal',\n    size = 'middle',\n    style,\n    styles: customStyles,\n    variant = 'filled',\n    ...rest\n  }) => {\n    const [visible, setVisible] = useState(true);\n\n    const colors = useMemo(() => {\n      let textColor = cssVar.colorTextSecondary;\n      let backgroundColor;\n      let borderColor;\n      const isBorderless = variant === 'borderless';\n      const isFilled = variant === 'filled';\n      const isSolid = variant === 'solid';\n      const isPresetColor = color && presetColors.includes(color);\n      const isPresetSystemColors = color && presetSystemColors.has(color);\n      const isHexColor = color && color.startsWith('#');\n\n      if (isPresetColor) {\n        const solidBgColor = colorsPreset(color);\n        textColor = isSolid ? safeReadableColor(solidBgColor) : colorsPreset(color, 'active');\n        backgroundColor = isSolid\n          ? solidBgColor\n          : isBorderless\n            ? 'transparent'\n            : colorsPreset(color, 'fillTertiary');\n        borderColor = isSolid\n          ? solidBgColor\n          : colorsPreset(color, isFilled ? 'fillQuaternary' : 'fillTertiary');\n      }\n      if (isPresetSystemColors) {\n        const solidBgColor = colorsPresetSystem(color);\n        textColor = isSolid ? safeReadableColor(solidBgColor) : colorsPresetSystem(color);\n        backgroundColor = isSolid\n          ? solidBgColor\n          : isBorderless\n            ? 'transparent'\n            : colorsPresetSystem(color, 'fillTertiary');\n        borderColor = isSolid\n          ? solidBgColor\n          : colorsPresetSystem(color, isFilled ? 'fillQuaternary' : 'fillTertiary');\n      }\n      if (isHexColor) {\n        textColor = isSolid\n          ? safeReadableColor(color)\n          : isBorderless\n            ? color\n            : cssVar.colorBgLayout;\n        backgroundColor = isSolid ? color : isBorderless ? 'transparent' : color;\n        borderColor = isSolid ? color : borderColor;\n      }\n\n      return {\n        backgroundColor,\n        borderColor,\n        textColor,\n      };\n    }, [color, variant]);\n\n    if (!visible) return null;\n\n    return (\n      <span\n        ref={ref}\n        {...styleProps(\n          [\n            styles.root,\n            variantStyles[variant],\n            styles[size],\n            shape === 'round' && [styles.round, roundSizeStyles[size]],\n          ],\n          clsx('lobe-tag', className, classNames?.root),\n          {\n            background: colors.backgroundColor,\n            borderColor: colors.borderColor,\n            color: colors.textColor,\n            cursor: onClick ? 'pointer' : undefined,\n            ...style,\n            ...customStyles?.root,\n          },\n        )}\n        onClick={onClick}\n        {...rest}\n      >\n        {icon}\n        {children}\n        {closable && (\n          <button\n            aria-label=\"Close\"\n            {...styleProps(styles.close, classNames?.closeIcon, customStyles?.closeIcon)}\n            type=\"button\"\n            onClick={(e) => {\n              e.stopPropagation();\n              onClose?.(e);\n              setVisible(false);\n            }}\n          >\n            {closeIcon ?? <X size={10} />}\n          </button>\n        )}\n      </span>\n    );\n  },\n);\n\nTag.displayName = 'Tag';\n\nexport default Tag;\n"],"mappings":";;;;;;;;;;;;AAiBA,MAAM,gBAAgB;CACpB,YAAY,QAAQ;CACpB,QAAQ,QAAQ;CAChB,UAAU,QAAQ;CAClB,OAAO,QAAQ;AACjB;AAEA,MAAM,kBAAkB;CACtB,OAAO,OAAO;CACd,QAAQ,OAAO;CACf,OAAO,OAAO;AAChB;AAEA,MAAM,MAAM,MACT,EACC,UACA,WACA,YACA,UACA,WACA,OACA,MACA,SACA,SACA,KACA,QAAQ,UACR,OAAO,UACP,OACA,QAAQ,cACR,UAAU,UACV,GAAG,WACC;CACJ,MAAM,CAAC,SAAS,cAAc,SAAS,IAAI;CAE3C,MAAM,SAAS,cAAc;EAC3B,IAAI,YAAY,OAAO;EACvB,IAAI;EACJ,IAAI;EACJ,MAAM,eAAe,YAAY;EACjC,MAAM,WAAW,YAAY;EAC7B,MAAM,UAAU,YAAY;EAC5B,MAAM,gBAAgB,SAAS,aAAa,SAAS,KAAK;EAC1D,MAAM,uBAAuB,SAAS,mBAAmB,IAAI,KAAK;EAClE,MAAM,aAAa,SAAS,MAAM,WAAW,GAAG;EAEhD,IAAI,eAAe;GACjB,MAAM,eAAe,aAAa,KAAK;GACvC,YAAY,UAAU,kBAAkB,YAAY,IAAI,aAAa,OAAO,QAAQ;GACpF,kBAAkB,UACd,eACA,eACE,gBACA,aAAa,OAAO,cAAc;GACxC,cAAc,UACV,eACA,aAAa,OAAO,WAAW,mBAAmB,cAAc;EACtE;EACA,IAAI,sBAAsB;GACxB,MAAM,eAAe,mBAAmB,KAAK;GAC7C,YAAY,UAAU,kBAAkB,YAAY,IAAI,mBAAmB,KAAK;GAChF,kBAAkB,UACd,eACA,eACE,gBACA,mBAAmB,OAAO,cAAc;GAC9C,cAAc,UACV,eACA,mBAAmB,OAAO,WAAW,mBAAmB,cAAc;EAC5E;EACA,IAAI,YAAY;GACd,YAAY,UACR,kBAAkB,KAAK,IACvB,eACE,QACA,OAAO;GACb,kBAAkB,UAAU,QAAQ,eAAe,gBAAgB;GACnE,cAAc,UAAU,QAAQ;EAClC;EAEA,OAAO;GACL;GACA;GACA;EACF;CACF,GAAG,CAAC,OAAO,OAAO,CAAC;CAEnB,IAAI,CAAC,SAAS,OAAO;CAErB,OACE,qBAAC,QAAD;EACO;EACL,GAAI,WACF;GACE,OAAO;GACP,cAAc;GACd,OAAO;GACP,UAAU,WAAW,CAAC,OAAO,OAAO,gBAAgB,KAAK;EAC3D,GACAA,OAAK,YAAY,WAAW,YAAY,IAAI,GAC5C;GACE,YAAY,OAAO;GACnB,aAAa,OAAO;GACpB,OAAO,OAAO;GACd,QAAQ,UAAU,YAAY,KAAA;GAC9B,GAAG;GACH,GAAG,cAAc;EACnB,CACF;EACS;EACT,GAAI;EApBN,UAAA;GAsBG;GACA;GACA,YACC,oBAAC,UAAD;IACE,cAAW;IACX,GAAI,WAAW,OAAO,OAAO,YAAY,WAAW,cAAc,SAAS;IAC3E,MAAK;IACL,UAAU,MAAM;KACd,EAAE,gBAAgB;KAClB,UAAU,CAAC;KACX,WAAW,KAAK;IAClB;IAEC,UAAA,aAAa,oBAAC,GAAD,EAAG,MAAM,GAAK,CAAA;GACtB,CAAA;EAEN;;AAEV,CACF;AAEA,IAAI,cAAc"}

package/es/Text/Text.mjs

@@ -5,7 +5,7 @@ import { textStyleArray } from "./style.mjs";
 import { useTextOverflow } from "../hooks/useTextOverflow.mjs";
 import { memo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 //#region src/Text/Text.tsx
 const InternalText = memo(({ align, as: Container = "div", children, className, classNames, code, color, delete: deleteStyle, disabled, ellipsis, fontSize, italic, lineClamp, lineHeight, mark, noWrap, ref, shiny, shinyDuration, strong, style, styles: customStyles, textDecoration, textTransform, type, underline, weight, whiteSpace, wordBreak, ...rest }) => {
 	const innerRef = useRef(null);
@@ -63,7 +63,7 @@ const InternalText = memo(({ align, as: Container = "div", children, className,
 			strong,
 			type,
 			underline
-		}), clsx(shiny && "lobe-text-shiny", className, classNames?.root)).className,
+		}), clsx$1(shiny && "lobe-text-shiny", className, classNames?.root)).className,
 		children
 	});
 	if (ellipsis && typeof ellipsis === "object" && (ellipsis.tooltip || ellipsis.tooltipWhenOverflow)) {

package/es/Text/Text.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Text.mjs","names":[],"sources":["../../src/Text/Text.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport clsx from 'clsx';\nimport { type CSSProperties, memo, type ReactNode, type RefObject, useRef } from 'react';\n\nimport { useTextOverflow } from '@/hooks/useTextOverflow';\nimport { styleProps } from '@/styles/stylex/props';\nimport Tooltip from '@/Tooltip';\n\nimport { textStyleArray } from './style';\nimport { type TextBaseProps, type TextProps } from './type';\n\ntype InternalTextProps = TextBaseProps & {\n  shiny?: boolean;\n  shinyDuration?: CSSProperties['animationDuration'];\n};\n\nconst InternalText = memo<InternalTextProps>(\n  ({\n    align,\n    as: Container = 'div',\n    children,\n    className,\n    classNames,\n    code,\n    color,\n    delete: deleteStyle,\n    disabled,\n    ellipsis,\n    fontSize,\n    italic,\n    lineClamp,\n    lineHeight,\n    mark,\n    noWrap,\n    ref,\n    shiny,\n    shinyDuration,\n    strong,\n    style,\n    styles: customStyles,\n    textDecoration,\n    textTransform,\n    type,\n    underline,\n    weight,\n    whiteSpace,\n    wordBreak,\n    ...rest\n  }) => {\n    const innerRef = useRef<HTMLElement>(null);\n    const isOverflow = useTextOverflow(innerRef, ellipsis, children);\n\n    const isMultiEllipsis = typeof ellipsis === 'object' && !!ellipsis.rows && ellipsis.rows > 1;\n    const tooltipWhenOverflow = typeof ellipsis === 'object' && ellipsis.tooltipWhenOverflow;\n\n    const setNodeRef = (node: HTMLElement | null) => {\n      innerRef.current = node;\n      if (typeof ref === 'function') ref(node as HTMLDivElement);\n      else if (ref) (ref as RefObject<HTMLDivElement | null>).current = node as HTMLDivElement;\n    };\n\n    const textStyle: CSSProperties = {\n      ...(color && { color }),\n      ...(weight && { fontWeight: weight }),\n      ...(lineHeight && { lineHeight }),\n      ...(textTransform && { textTransform }),\n      ...(textDecoration && { textDecoration }),\n      ...(wordBreak && { wordBreak }),\n      ...(typeof ellipsis === 'object' &&\n        ellipsis.rows && {\n          WebkitLineClamp: ellipsis.rows,\n        }),\n      ...(!ellipsis &&\n        !!lineClamp && {\n          WebkitBoxOrient: 'vertical',\n          WebkitLineClamp: lineClamp,\n          display: '-webkit-box',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n        }),\n      ...(shiny && shinyDuration && { '--shiny-duration': shinyDuration }),\n      ...(fontSize && { fontSize }),\n      ...(align && { textAlign: align }),\n      ...(!isMultiEllipsis && noWrap && { whiteSpace: 'nowrap' as const }),\n      ...(whiteSpace && { whiteSpace }),\n      ...style,\n      ...customStyles?.root,\n    };\n\n    const content = (\n      <Container\n        {...rest}\n        ref={setNodeRef}\n        style={textStyle}\n        className={\n          styleProps(\n            textStyleArray({\n              as: ['h1', 'h2', 'h3', 'h4', 'h5', 'p'].includes(Container as string)\n                ? (Container as 'h1')\n                : undefined,\n              code,\n              delete: deleteStyle,\n              disabled,\n              ellipsis: ellipsis\n                ? typeof ellipsis === 'object' && ellipsis.rows\n                  ? 'multi'\n                  : true\n                : undefined,\n              italic,\n              mark,\n              shiny,\n              strong,\n              type,\n              underline,\n            }),\n            clsx(shiny && 'lobe-text-shiny', className, classNames?.root),\n          ).className\n        }\n      >\n        {children}\n      </Container>\n    );\n\n    if (\n      ellipsis &&\n      typeof ellipsis === 'object' &&\n      (ellipsis.tooltip || ellipsis.tooltipWhenOverflow)\n    ) {\n      if (tooltipWhenOverflow && !isOverflow) return content;\n\n      const title = typeof ellipsis.tooltip === 'string' ? ellipsis.tooltip : children;\n      if (ellipsis.tooltip && typeof ellipsis.tooltip === 'object')\n        return (\n          <Tooltip {...ellipsis.tooltip} title={ellipsis.tooltip?.title || title}>\n            {content}\n          </Tooltip>\n        );\n      return <Tooltip title={title}>{content}</Tooltip>;\n    }\n\n    return content;\n  },\n);\n\nInternalText.displayName = 'Text';\n\nexport interface IText {\n  <Shiny extends boolean = boolean>(props: TextProps<Shiny>): ReactNode;\n}\n\nconst Text = InternalText as unknown as IText;\n\nexport default Text;\n"],"mappings":";;;;;;;;;AAmBA,MAAM,eAAe,MAClB,EACC,OACA,IAAI,YAAY,OAChB,UACA,WACA,YACA,MACA,OACA,QAAQ,aACR,UACA,UACA,UACA,QACA,WACA,YACA,MACA,QACA,KACA,OACA,eACA,QACA,OACA,QAAQ,cACR,gBACA,eACA,MACA,WACA,QACA,YACA,WACA,GAAG,WACC;CACJ,MAAM,WAAW,OAAoB,IAAI;CACzC,MAAM,aAAa,gBAAgB,UAAU,UAAU,QAAQ;CAE/D,MAAM,kBAAkB,OAAO,aAAa,YAAY,CAAC,CAAC,SAAS,QAAQ,SAAS,OAAO;CAC3F,MAAM,sBAAsB,OAAO,aAAa,YAAY,SAAS;CAErE,MAAM,cAAc,SAA6B;EAC/C,SAAS,UAAU;EACnB,IAAI,OAAO,QAAQ,YAAY,IAAI,IAAsB;OACpD,IAAI,KAAK,IAA0C,UAAU;CACpE;CAEA,MAAM,YAA2B;EAC/B,GAAI,SAAS,EAAE,MAAM;EACrB,GAAI,UAAU,EAAE,YAAY,OAAO;EACnC,GAAI,cAAc,EAAE,WAAW;EAC/B,GAAI,iBAAiB,EAAE,cAAc;EACrC,GAAI,kBAAkB,EAAE,eAAe;EACvC,GAAI,aAAa,EAAE,UAAU;EAC7B,GAAI,OAAO,aAAa,YACtB,SAAS,QAAQ,EACf,iBAAiB,SAAS,KAC5B;EACF,GAAI,CAAC,YACH,CAAC,CAAC,aAAa;GACb,iBAAiB;GACjB,iBAAiB;GACjB,SAAS;GACT,UAAU;GACV,cAAc;EAChB;EACF,GAAI,SAAS,iBAAiB,EAAE,oBAAoB,cAAc;EAClE,GAAI,YAAY,EAAE,SAAS;EAC3B,GAAI,SAAS,EAAE,WAAW,MAAM;EAChC,GAAI,CAAC,mBAAmB,UAAU,EAAE,YAAY,SAAkB;EAClE,GAAI,cAAc,EAAE,WAAW;EAC/B,GAAG;EACH,GAAG,cAAc;CACnB;CAEA,MAAM,UACJ,oBAAC,WAAD;EACE,GAAI;EACJ,KAAK;EACL,OAAO;EACP,WACE,WACE,eAAe;GACb,IAAI;IAAC;IAAM;IAAM;IAAM;IAAM;IAAM;GAAG,CAAC,CAAC,SAAS,SAAmB,IAC/D,YACD,KAAA;GACJ;GACA,QAAQ;GACR;GACA,UAAU,WACN,OAAO,aAAa,YAAY,SAAS,OACvC,UACA,OACF,KAAA;GACJ;GACA;GACA;GACA;GACA;GACA;EACF,CAAC,GACD,KAAK,SAAS,mBAAmB,WAAW,YAAY,IAAI,CAC9D,CAAC,CAAC;EAGH;CACQ,CAAA;CAGb,IACE,YACA,OAAO,aAAa,aACnB,SAAS,WAAW,SAAS,sBAC9B;EACA,IAAI,uBAAuB,CAAC,YAAY,OAAO;EAE/C,MAAM,QAAQ,OAAO,SAAS,YAAY,WAAW,SAAS,UAAU;EACxE,IAAI,SAAS,WAAW,OAAO,SAAS,YAAY,UAClD,OACE,oBAAC,SAAD;GAAS,GAAI,SAAS;GAAS,OAAO,SAAS,SAAS,SAAS;GAC9D,UAAA;EACM,CAAA;EAEb,OAAO,oBAAC,SAAD;GAAgB;GAAQ,UAAA;EAAiB,CAAA;CAClD;CAEA,OAAO;AACT,CACF;AAEA,aAAa,cAAc;AAM3B,MAAM,OAAO"}
+{"version":3,"file":"Text.mjs","names":["clsx"],"sources":["../../src/Text/Text.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport clsx from 'clsx';\nimport { type CSSProperties, memo, type ReactNode, type RefObject, useRef } from 'react';\n\nimport { useTextOverflow } from '@/hooks/useTextOverflow';\nimport { styleProps } from '@/styles/stylex/props';\nimport Tooltip from '@/Tooltip';\n\nimport { textStyleArray } from './style';\nimport { type TextBaseProps, type TextProps } from './type';\n\ntype InternalTextProps = TextBaseProps & {\n  shiny?: boolean;\n  shinyDuration?: CSSProperties['animationDuration'];\n};\n\nconst InternalText = memo<InternalTextProps>(\n  ({\n    align,\n    as: Container = 'div',\n    children,\n    className,\n    classNames,\n    code,\n    color,\n    delete: deleteStyle,\n    disabled,\n    ellipsis,\n    fontSize,\n    italic,\n    lineClamp,\n    lineHeight,\n    mark,\n    noWrap,\n    ref,\n    shiny,\n    shinyDuration,\n    strong,\n    style,\n    styles: customStyles,\n    textDecoration,\n    textTransform,\n    type,\n    underline,\n    weight,\n    whiteSpace,\n    wordBreak,\n    ...rest\n  }) => {\n    const innerRef = useRef<HTMLElement>(null);\n    const isOverflow = useTextOverflow(innerRef, ellipsis, children);\n\n    const isMultiEllipsis = typeof ellipsis === 'object' && !!ellipsis.rows && ellipsis.rows > 1;\n    const tooltipWhenOverflow = typeof ellipsis === 'object' && ellipsis.tooltipWhenOverflow;\n\n    const setNodeRef = (node: HTMLElement | null) => {\n      innerRef.current = node;\n      if (typeof ref === 'function') ref(node as HTMLDivElement);\n      else if (ref) (ref as RefObject<HTMLDivElement | null>).current = node as HTMLDivElement;\n    };\n\n    const textStyle: CSSProperties = {\n      ...(color && { color }),\n      ...(weight && { fontWeight: weight }),\n      ...(lineHeight && { lineHeight }),\n      ...(textTransform && { textTransform }),\n      ...(textDecoration && { textDecoration }),\n      ...(wordBreak && { wordBreak }),\n      ...(typeof ellipsis === 'object' &&\n        ellipsis.rows && {\n          WebkitLineClamp: ellipsis.rows,\n        }),\n      ...(!ellipsis &&\n        !!lineClamp && {\n          WebkitBoxOrient: 'vertical',\n          WebkitLineClamp: lineClamp,\n          display: '-webkit-box',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n        }),\n      ...(shiny && shinyDuration && { '--shiny-duration': shinyDuration }),\n      ...(fontSize && { fontSize }),\n      ...(align && { textAlign: align }),\n      ...(!isMultiEllipsis && noWrap && { whiteSpace: 'nowrap' as const }),\n      ...(whiteSpace && { whiteSpace }),\n      ...style,\n      ...customStyles?.root,\n    };\n\n    const content = (\n      <Container\n        {...rest}\n        ref={setNodeRef}\n        style={textStyle}\n        className={\n          styleProps(\n            textStyleArray({\n              as: ['h1', 'h2', 'h3', 'h4', 'h5', 'p'].includes(Container as string)\n                ? (Container as 'h1')\n                : undefined,\n              code,\n              delete: deleteStyle,\n              disabled,\n              ellipsis: ellipsis\n                ? typeof ellipsis === 'object' && ellipsis.rows\n                  ? 'multi'\n                  : true\n                : undefined,\n              italic,\n              mark,\n              shiny,\n              strong,\n              type,\n              underline,\n            }),\n            clsx(shiny && 'lobe-text-shiny', className, classNames?.root),\n          ).className\n        }\n      >\n        {children}\n      </Container>\n    );\n\n    if (\n      ellipsis &&\n      typeof ellipsis === 'object' &&\n      (ellipsis.tooltip || ellipsis.tooltipWhenOverflow)\n    ) {\n      if (tooltipWhenOverflow && !isOverflow) return content;\n\n      const title = typeof ellipsis.tooltip === 'string' ? ellipsis.tooltip : children;\n      if (ellipsis.tooltip && typeof ellipsis.tooltip === 'object')\n        return (\n          <Tooltip {...ellipsis.tooltip} title={ellipsis.tooltip?.title || title}>\n            {content}\n          </Tooltip>\n        );\n      return <Tooltip title={title}>{content}</Tooltip>;\n    }\n\n    return content;\n  },\n);\n\nInternalText.displayName = 'Text';\n\nexport interface IText {\n  <Shiny extends boolean = boolean>(props: TextProps<Shiny>): ReactNode;\n}\n\nconst Text = InternalText as unknown as IText;\n\nexport default Text;\n"],"mappings":";;;;;;;;;AAmBA,MAAM,eAAe,MAClB,EACC,OACA,IAAI,YAAY,OAChB,UACA,WACA,YACA,MACA,OACA,QAAQ,aACR,UACA,UACA,UACA,QACA,WACA,YACA,MACA,QACA,KACA,OACA,eACA,QACA,OACA,QAAQ,cACR,gBACA,eACA,MACA,WACA,QACA,YACA,WACA,GAAG,WACC;CACJ,MAAM,WAAW,OAAoB,IAAI;CACzC,MAAM,aAAa,gBAAgB,UAAU,UAAU,QAAQ;CAE/D,MAAM,kBAAkB,OAAO,aAAa,YAAY,CAAC,CAAC,SAAS,QAAQ,SAAS,OAAO;CAC3F,MAAM,sBAAsB,OAAO,aAAa,YAAY,SAAS;CAErE,MAAM,cAAc,SAA6B;EAC/C,SAAS,UAAU;EACnB,IAAI,OAAO,QAAQ,YAAY,IAAI,IAAsB;OACpD,IAAI,KAAK,IAA0C,UAAU;CACpE;CAEA,MAAM,YAA2B;EAC/B,GAAI,SAAS,EAAE,MAAM;EACrB,GAAI,UAAU,EAAE,YAAY,OAAO;EACnC,GAAI,cAAc,EAAE,WAAW;EAC/B,GAAI,iBAAiB,EAAE,cAAc;EACrC,GAAI,kBAAkB,EAAE,eAAe;EACvC,GAAI,aAAa,EAAE,UAAU;EAC7B,GAAI,OAAO,aAAa,YACtB,SAAS,QAAQ,EACf,iBAAiB,SAAS,KAC5B;EACF,GAAI,CAAC,YACH,CAAC,CAAC,aAAa;GACb,iBAAiB;GACjB,iBAAiB;GACjB,SAAS;GACT,UAAU;GACV,cAAc;EAChB;EACF,GAAI,SAAS,iBAAiB,EAAE,oBAAoB,cAAc;EAClE,GAAI,YAAY,EAAE,SAAS;EAC3B,GAAI,SAAS,EAAE,WAAW,MAAM;EAChC,GAAI,CAAC,mBAAmB,UAAU,EAAE,YAAY,SAAkB;EAClE,GAAI,cAAc,EAAE,WAAW;EAC/B,GAAG;EACH,GAAG,cAAc;CACnB;CAEA,MAAM,UACJ,oBAAC,WAAD;EACE,GAAI;EACJ,KAAK;EACL,OAAO;EACP,WACE,WACE,eAAe;GACb,IAAI;IAAC;IAAM;IAAM;IAAM;IAAM;IAAM;GAAG,CAAC,CAAC,SAAS,SAAmB,IAC/D,YACD,KAAA;GACJ;GACA,QAAQ;GACR;GACA,UAAU,WACN,OAAO,aAAa,YAAY,SAAS,OACvC,UACA,OACF,KAAA;GACJ;GACA;GACA;GACA;GACA;GACA;EACF,CAAC,GACDA,OAAK,SAAS,mBAAmB,WAAW,YAAY,IAAI,CAC9D,CAAC,CAAC;EAGH;CACQ,CAAA;CAGb,IACE,YACA,OAAO,aAAa,aACnB,SAAS,WAAW,SAAS,sBAC9B;EACA,IAAI,uBAAuB,CAAC,YAAY,OAAO;EAE/C,MAAM,QAAQ,OAAO,SAAS,YAAY,WAAW,SAAS,UAAU;EACxE,IAAI,SAAS,WAAW,OAAO,SAAS,YAAY,UAClD,OACE,oBAAC,SAAD;GAAS,GAAI,SAAS;GAAS,OAAO,SAAS,SAAS,SAAS;GAC9D,UAAA;EACM,CAAA;EAEb,OAAO,oBAAC,SAAD;GAAgB;GAAQ,UAAA;EAAiB,CAAA;CAClD;CAEA,OAAO;AACT,CACF;AAEA,aAAa,cAAc;AAM3B,MAAM,OAAO"}

package/es/Text/style.d.mts

@@ -44,4 +44,5 @@ type TextVariantProps = {
 };
 export declare const variants: (props?: TextVariantProps) => string;
 //#endregion
+export {};
 //# sourceMappingURL=style.d.mts.map

package/es/Text/style.mjs

@@ -1,5 +1,5 @@
 import { styleProps } from "../styles/stylex/props.mjs";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 //#region src/Text/style.ts
 const styles = {
 	code: {
@@ -122,7 +122,7 @@ const shinyClassName = "lobe-text-shiny";
 const classNameOf = (style) => styleProps(style).className;
 const textStyles = {
 	...Object.fromEntries(Object.entries(styles).map(([key, value]) => [key, classNameOf(value)])),
-	shiny: clsx(classNameOf(styles.shiny), shinyClassName)
+	shiny: clsx$1(classNameOf(styles.shiny), shinyClassName)
 };
 const groupStyles = { shinyGroup: "lobe-text-shiny-group" };
 const textStyleArray = (props = {}) => [
@@ -140,7 +140,7 @@ const textStyleArray = (props = {}) => [
 	props.type && styles[props.type],
 	props.underline && styles.underline
 ];
-const variants = (props = {}) => clsx(classNameOf(textStyleArray(props)), props.shiny && shinyClassName, props.class, props.className);
+const variants = (props = {}) => clsx$1(classNameOf(textStyleArray(props)), props.shiny && shinyClassName, props.class, props.className);
 //#endregion
 export { groupStyles, styles, textStyleArray, textStyles, variants };