@lobehub/ui 5.57.3 → 6.0.0-beta.1

package/es/Table/type.d.mts

@@ -0,0 +1,67 @@
+import { CSSProperties, HTMLAttributes, Key, ReactNode, Ref, TdHTMLAttributes } from "react";
+//#region src/Table/type.d.ts
+export type SortOrder = 'ascend' | 'descend';
+export type FilterValue = string | number | boolean;
+export interface TableColumn<T> {
+  align?: 'left' | 'center' | 'right';
+  className?: string;
+  dataIndex?: Extract<keyof T, string>;
+  defaultSortOrder?: SortOrder;
+  ellipsis?: boolean;
+  filters?: {
+    text: ReactNode;
+    value: FilterValue;
+  }[];
+  fixed?: 'left' | 'right';
+  key?: Key;
+  onCell?: (record: T, index: number) => TdHTMLAttributes<HTMLTableCellElement>;
+  onFilter?: (value: FilterValue, record: T) => boolean;
+  render?: (value: any, record: T, index: number) => ReactNode;
+  sortDirections?: SortOrder[];
+  sorter?: boolean | ((a: T, b: T) => number);
+  title?: ReactNode;
+  width?: number | string;
+}
+export interface TablePaginationConfig {
+  current?: number;
+  defaultCurrent?: number;
+  defaultPageSize?: number;
+  onChange?: (page: number, pageSize: number) => void;
+  onShowSizeChange?: (current: number, size: number) => void;
+  pageSize?: number;
+  pageSizeOptions?: number[];
+  showSizeChanger?: boolean;
+  total?: number;
+}
+export interface TableSorterResult<T> {
+  column?: TableColumn<T>;
+  columnKey?: Key;
+  order?: SortOrder;
+}
+export type TableFilters = Record<string, FilterValue[] | null>;
+export type TableSemanticName = 'body' | 'cell' | 'header' | 'row' | 'wrapper';
+export interface TableProps<T> {
+  bordered?: boolean;
+  className?: string;
+  classNames?: Partial<Record<TableSemanticName, string>>;
+  columns: TableColumn<T>[];
+  dataSource?: T[];
+  emptyText?: ReactNode;
+  loading?: boolean;
+  onChange?: (pagination: TablePaginationConfig, filters: TableFilters, sorter: TableSorterResult<T>) => void;
+  onRow?: (record: T, index: number) => HTMLAttributes<HTMLTableRowElement>;
+  pagination?: false | TablePaginationConfig;
+  ref?: Ref<HTMLDivElement>;
+  rowClassName?: string | ((record: T, index: number) => string);
+  rowKey: Extract<keyof T, string> | ((record: T) => Key);
+  scroll?: {
+    x?: number | string;
+    y?: number | string;
+  };
+  size?: 'small' | 'middle';
+  style?: CSSProperties;
+  styles?: Partial<Record<TableSemanticName, CSSProperties>>;
+  tableLayout?: 'auto' | 'fixed';
+}
+//#endregion
+//# sourceMappingURL=type.d.mts.map

package/es/Table/useTableState.mjs

@@ -0,0 +1,99 @@
+import { getColumnId } from "./toColumnDefs.mjs";
+import { useState } from "react";
+//#region src/Table/useTableState.ts
+const resolve = (updater, previous) => typeof updater === "function" ? updater(previous) : updater;
+const initialSorting = (columns) => {
+	const index = columns.findIndex((column) => column.defaultSortOrder);
+	if (index === -1) return [];
+	return [{
+		desc: columns[index].defaultSortOrder === "descend",
+		id: getColumnId(columns[index], index)
+	}];
+};
+const useTableState = ({ columns, onChange, pagination }) => {
+	const config = pagination === false ? void 0 : pagination ?? {};
+	const columnIds = columns.map((column, index) => getColumnId(column, index));
+	const [sorting, setSorting] = useState(() => initialSorting(columns));
+	const [columnFilters, setColumnFilters] = useState([]);
+	const [innerPage, setInnerPage] = useState({
+		pageIndex: (config?.defaultCurrent ?? 1) - 1,
+		pageSize: config?.defaultPageSize ?? 10
+	});
+	const page = {
+		pageIndex: config?.current === void 0 ? innerPage.pageIndex : config.current - 1,
+		pageSize: config?.pageSize ?? innerPage.pageSize
+	};
+	const toFilters = (state) => Object.fromEntries(columns.map((column, index) => [column, columnIds[index]]).filter(([column]) => column.filters?.length).map(([, id]) => [id, state.find((filter) => filter.id === id)?.value ?? null]));
+	const toSorter = (state) => {
+		const [active] = state;
+		if (!active) return {};
+		return {
+			column: columns[columnIds.indexOf(active.id)],
+			columnKey: active.id,
+			order: active.desc ? "descend" : "ascend"
+		};
+	};
+	const toPaginationArg = (next) => config ? {
+		...config,
+		current: next.pageIndex + 1,
+		pageSize: next.pageSize
+	} : {};
+	const report = (nextPage, nextFilters, nextSorting) => onChange?.(toPaginationArg(nextPage), toFilters(nextFilters), toSorter(nextSorting));
+	const changePage = (next) => {
+		setInnerPage(next);
+		const sizeChanged = next.pageSize !== page.pageSize;
+		if (sizeChanged) config?.onShowSizeChange?.(next.pageIndex + 1, next.pageSize);
+		if (sizeChanged || next.pageIndex !== page.pageIndex) config?.onChange?.(next.pageIndex + 1, next.pageSize);
+	};
+	const clampPage = (pageIndex) => {
+		if (config?.current === void 0) {
+			setInnerPage((previous) => ({
+				...previous,
+				pageIndex
+			}));
+			return;
+		}
+		config.onChange?.(pageIndex + 1, page.pageSize);
+	};
+	const onSortingChange = (updater) => {
+		const next = resolve(updater, sorting);
+		const firstPage = {
+			...page,
+			pageIndex: 0
+		};
+		setSorting(next);
+		changePage(firstPage);
+		report(firstPage, columnFilters, next);
+	};
+	const onColumnFiltersChange = (updater) => {
+		const next = resolve(updater, columnFilters);
+		const firstPage = {
+			...page,
+			pageIndex: 0
+		};
+		setColumnFilters(next);
+		changePage(firstPage);
+		report(firstPage, next, sorting);
+	};
+	const onPaginationChange = (updater) => {
+		const next = resolve(updater, page);
+		changePage(next);
+		report(next, columnFilters, sorting);
+	};
+	return {
+		clampPage,
+		columnFilters,
+		columnIds,
+		config,
+		manualSorting: columns.some((column) => column.sorter === true),
+		onColumnFiltersChange,
+		onPaginationChange,
+		onSortingChange,
+		page,
+		sorting
+	};
+};
+//#endregion
+export { useTableState };
+
+//# sourceMappingURL=useTableState.mjs.map

package/es/Table/useTableState.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableState.mjs","names":[],"sources":["../../src/Table/useTableState.ts"],"sourcesContent":["import type {\n  ColumnFiltersState,\n  PaginationState,\n  SortingState,\n  Updater,\n} from '@tanstack/react-table';\nimport { useState } from 'react';\n\nimport { getColumnId } from './toColumnDefs';\nimport type {\n  TableColumn,\n  TableFilters,\n  TablePaginationConfig,\n  TableProps,\n  TableSorterResult,\n} from './type';\n\nconst resolve = <S>(updater: Updater<S>, previous: S): S =>\n  typeof updater === 'function' ? (updater as (old: S) => S)(previous) : updater;\n\nconst initialSorting = (columns: TableColumn<any>[]): SortingState => {\n  const index = columns.findIndex((column) => column.defaultSortOrder);\n  if (index === -1) return [];\n  return [\n    { desc: columns[index].defaultSortOrder === 'descend', id: getColumnId(columns[index], index) },\n  ];\n};\n\nexport const useTableState = <T>({\n  columns,\n  onChange,\n  pagination,\n}: Pick<TableProps<T>, 'columns' | 'onChange' | 'pagination'>) => {\n  const config: TablePaginationConfig | undefined =\n    pagination === false ? undefined : (pagination ?? {});\n  const columnIds = columns.map((column, index) => getColumnId(column, index));\n\n  const [sorting, setSorting] = useState<SortingState>(() => initialSorting(columns));\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\n  const [innerPage, setInnerPage] = useState<PaginationState>({\n    pageIndex: (config?.defaultCurrent ?? 1) - 1,\n    pageSize: config?.defaultPageSize ?? 10,\n  });\n\n  const page: PaginationState = {\n    pageIndex: config?.current === undefined ? innerPage.pageIndex : config.current - 1,\n    pageSize: config?.pageSize ?? innerPage.pageSize,\n  };\n\n  const toFilters = (state: ColumnFiltersState): TableFilters =>\n    Object.fromEntries(\n      columns\n        .map((column, index) => [column, columnIds[index]] as const)\n        .filter(([column]) => column.filters?.length)\n        .map(([, id]) => [\n          id,\n          (state.find((filter) => filter.id === id)?.value as TableFilters[string]) ?? null,\n        ]),\n    );\n\n  const toSorter = (state: SortingState): TableSorterResult<T> => {\n    const [active] = state;\n    if (!active) return {};\n    const index = columnIds.indexOf(active.id);\n    return {\n      column: columns[index],\n      columnKey: active.id,\n      order: active.desc ? 'descend' : 'ascend',\n    };\n  };\n\n  const toPaginationArg = (next: PaginationState): TablePaginationConfig =>\n    config ? { ...config, current: next.pageIndex + 1, pageSize: next.pageSize } : {};\n\n  const report = (\n    nextPage: PaginationState,\n    nextFilters: ColumnFiltersState,\n    nextSorting: SortingState,\n  ) => onChange?.(toPaginationArg(nextPage), toFilters(nextFilters), toSorter(nextSorting));\n\n  const changePage = (next: PaginationState) => {\n    setInnerPage(next);\n    const sizeChanged = next.pageSize !== page.pageSize;\n    if (sizeChanged) config?.onShowSizeChange?.(next.pageIndex + 1, next.pageSize);\n    if (sizeChanged || next.pageIndex !== page.pageIndex) {\n      config?.onChange?.(next.pageIndex + 1, next.pageSize);\n    }\n  };\n\n  const clampPage = (pageIndex: number) => {\n    if (config?.current === undefined) {\n      setInnerPage((previous) => ({ ...previous, pageIndex }));\n      return;\n    }\n    config.onChange?.(pageIndex + 1, page.pageSize);\n  };\n\n  const onSortingChange = (updater: Updater<SortingState>) => {\n    const next = resolve(updater, sorting);\n    const firstPage = { ...page, pageIndex: 0 };\n    setSorting(next);\n    changePage(firstPage);\n    report(firstPage, columnFilters, next);\n  };\n\n  const onColumnFiltersChange = (updater: Updater<ColumnFiltersState>) => {\n    const next = resolve(updater, columnFilters);\n    const firstPage = { ...page, pageIndex: 0 };\n    setColumnFilters(next);\n    changePage(firstPage);\n    report(firstPage, next, sorting);\n  };\n\n  const onPaginationChange = (updater: Updater<PaginationState>) => {\n    const next = resolve(updater, page);\n    changePage(next);\n    report(next, columnFilters, sorting);\n  };\n\n  return {\n    clampPage,\n    columnFilters,\n    columnIds,\n    config,\n    manualSorting: columns.some((column) => column.sorter === true),\n    onColumnFiltersChange,\n    onPaginationChange,\n    onSortingChange,\n    page,\n    sorting,\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,55 @@
 "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 { styles } from "./style.mjs";
+import { TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab } from "./atoms.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import useControlledState from "use-merge-value";
 //#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 hasPanels = items?.some((item) => item.children != null);
+	return /* @__PURE__ */ jsxs(TabsRoot, {
+		...styleProps(styles.root, clsx(classNames?.root, className), {
+			...style,
+			...customStyles?.root
+		}),
+		orientation,
+		ref,
+		size,
+		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))]
 	});
 };
-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":[],"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"}

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 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("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"],"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"}

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