@lobehub/ui 5.15.17 → 5.16.0

package/es/Tabs/Tabs.mjs

@@ -8,21 +8,13 @@ import { MoreHorizontalIcon } from "lucide-react";
 //#region src/Tabs/Tabs.tsx
 const Tabs$1 = ({ className, compact, variant = "rounded", items, classNames, ...rest }) => {
 	const hasContent = items?.some((item) => !!item.children);
-	const mergedClassNames = typeof classNames === "function" ? (info) => {
-		const resolved = classNames(info);
-		return {
-			...resolved,
-			popup: {
-				root: styles.dropdown,
-				...resolved?.popup
-			}
-		};
-	} : {
+	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: {
-			root: styles.dropdown,
-			...classNames?.popup
-		}
+		popup: popupClassNames
 	};
 	return /* @__PURE__ */ jsx(Tabs, {
 		className: cx(variants({

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 '@/ActionIcon';\n\nimport { styles, variants } from './style';\nimport type { TabsProps } from './type';\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 mergedClassNames: TabsProps['classNames'] =\n    typeof classNames === 'function'\n      ? (info) => {\n          const resolved = classNames(info);\n\n          return {\n            ...resolved,\n            popup: {\n              root: styles.dropdown,\n              ...resolved?.popup,\n            },\n          };\n        }\n      : {\n          ...classNames,\n          popup: {\n            root: styles.dropdown,\n            ...classNames?.popup,\n          },\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":";;;;;;;;AAYA,MAAMA,UAAuB,EAC3B,WACA,SACA,UAAU,WACV,OACA,YACA,GAAG,WACC;CACJ,MAAM,aAAa,OAAO,MAAM,SAAS,CAAC,CAAC,KAAK,SAAS;CACzD,MAAM,mBACJ,OAAO,eAAe,cACjB,SAAS;EACR,MAAM,WAAW,WAAW,KAAK;AAEjC,SAAO;GACL,GAAG;GACH,OAAO;IACL,MAAM,OAAO;IACb,GAAG,UAAU;IACd;GACF;KAEH;EACE,GAAG;EACH,OAAO;GACL,MAAM,OAAO;GACb,GAAG,YAAY;GAChB;EACF;AAEP,QACE,oBAACC,MAAD;EACE,WAAW,GAAG,SAAS;GAAE;GAAS,YAAY;GAAY;GAAS,CAAC,EAAE,UAAU;EACzE;EACP,GAAI;EACJ,YAAY;EACZ,MAAM;GACJ,MAAM,oBAAC,YAAD,EAAY,MAAM,oBAAsB,CAAA;GAC9C,GAAG,MAAM;GACV;EACD,CAAA;;AAIN,OAAK,cAAc"}
+{"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 '@/ActionIcon';\n\nimport { styles, variants } from './style';\nimport type { TabsProps } from './type';\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":";;;;;;;;AAYA,MAAMA,UAAuB,EAC3B,WACA,SACA,UAAU,WACV,OACA,YACA,GAAG,WACC;CACJ,MAAM,aAAa,OAAO,MAAM,SAAS,CAAC,CAAC,KAAK,SAAS;CACzD,MAAM,kBAAkB;EACtB,MAAM,OAAO;EACb,GAAI,OAAO,eAAe,aAAa,KAAA,IAAY,YAAY;EAChE;CACD,MAAM,mBACJ,OAAO,eAAe,aAClB,OAAO,QAAQ,SAA2C,WAAW,KAAK,EAAE,EAC1E,OAAO,iBACR,CAAC,GACF;EACE,GAAG;EACH,OAAO;EACR;AAEP,QACE,oBAACC,MAAD;EACE,WAAW,GAAG,SAAS;GAAE;GAAS,YAAY;GAAY;GAAS,CAAC,EAAE,UAAU;EACzE;EACP,GAAI;EACJ,YAAY;EACZ,MAAM;GACJ,MAAM,oBAAC,YAAD,EAAY,MAAM,oBAAsB,CAAA;GAC9C,GAAG,MAAM;GACV;EACD,CAAA;;AAIN,OAAK,cAAc"}

package/es/base-ui/Tabs/Tabs.d.mts

@@ -0,0 +1,8 @@
+import { TabsProps } from "./type.mjs";
+import { FC } from "react";
+
+//#region src/base-ui/Tabs/Tabs.d.ts
+declare const Tabs: FC<TabsProps>;
+//#endregion
+export { Tabs };
+//# sourceMappingURL=Tabs.d.mts.map

package/es/base-ui/Tabs/Tabs.mjs

@@ -0,0 +1,54 @@
+"use client";
+import { styles } from "./style.mjs";
+import { TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab } from "./atoms.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import useMergeState from "use-merge-value";
+//#region src/base-ui/Tabs/Tabs.tsx
+const Tabs = ({ activeKey, className, classNames, defaultActiveKey, items, onChange, orientation = "horizontal", ref, size = "middle", style, styles: customStyles, variant = "rounded" }) => {
+	const [value, setValue] = useMergeState(defaultActiveKey ?? null, {
+		defaultValue: defaultActiveKey,
+		onChange: (next) => {
+			if (next != null) onChange?.(next);
+		},
+		value: activeKey
+	});
+	const hasPanels = items?.some((item) => item.children != null);
+	return /* @__PURE__ */ jsxs(TabsRoot, {
+		className: cx(styles.root, classNames?.root, className),
+		orientation,
+		ref,
+		size,
+		style: {
+			...style,
+			...customStyles?.root
+		},
+		value,
+		variant,
+		onValueChange: (next) => setValue(next ?? null),
+		children: [/* @__PURE__ */ jsxs(TabsList, {
+			className: cx(classNames?.list),
+			style: customStyles?.list,
+			children: [/* @__PURE__ */ jsx(TabsIndicator, {
+				className: cx(classNames?.indicator),
+				style: customStyles?.indicator
+			}), items?.map((item) => /* @__PURE__ */ jsxs(TabsTab, {
+				className: cx(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: cx(classNames?.panel),
+			style: customStyles?.panel,
+			value: item.key,
+			children: item.children
+		}, item.key))]
+	});
+};
+Tabs.displayName = "Tabs";
+//#endregion
+export { Tabs as default };
+
+//# sourceMappingURL=Tabs.mjs.map

package/es/base-ui/Tabs/Tabs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.mjs","names":["useControlledState"],"sources":["../../../src/base-ui/Tabs/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC } from 'react';\nimport useControlledState from 'use-merge-value';\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 [value, setValue] = useControlledState<string | null>(defaultActiveKey ?? null, {\n    defaultValue: defaultActiveKey,\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      className={cx(styles.root, classNames?.root, className)}\n      orientation={orientation}\n      ref={ref}\n      size={size}\n      style={{ ...style, ...customStyles?.root }}\n      value={value}\n      variant={variant}\n      onValueChange={(next) => setValue(next ?? null)}\n    >\n      <TabsList className={cx(classNames?.list)} style={customStyles?.list}>\n        <TabsIndicator className={cx(classNames?.indicator)} style={customStyles?.indicator} />\n        {items?.map((item) => (\n          <TabsTab\n            className={cx(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={cx(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":";;;;;;;AAUA,MAAM,QAAuB,EAC3B,WACA,WACA,YACA,kBACA,OACA,UACA,cAAc,cACd,KACA,OAAO,UACP,OACA,QAAQ,cACR,UAAU,gBACN;CACJ,MAAM,CAAC,OAAO,YAAYA,cAAkC,oBAAoB,MAAM;EACpF,cAAc;EACd,WAAW,SAAS;AAClB,OAAI,QAAQ,KAAM,YAAW,KAAK;;EAEpC,OAAO;EACR,CAAC;CAEF,MAAM,YAAY,OAAO,MAAM,SAAS,KAAK,YAAY,KAAK;AAE9D,QACE,qBAAC,UAAD;EACE,WAAW,GAAG,OAAO,MAAM,YAAY,MAAM,UAAU;EAC1C;EACR;EACC;EACN,OAAO;GAAE,GAAG;GAAO,GAAG,cAAc;GAAM;EACnC;EACE;EACT,gBAAgB,SAAS,SAAS,QAAQ,KAAK;YARjD,CAUE,qBAAC,UAAD;GAAU,WAAW,GAAG,YAAY,KAAK;GAAE,OAAO,cAAc;aAAhE,CACE,oBAAC,eAAD;IAAe,WAAW,GAAG,YAAY,UAAU;IAAE,OAAO,cAAc;IAAa,CAAA,EACtF,OAAO,KAAK,SACX,qBAAC,SAAD;IACE,WAAW,GAAG,YAAY,IAAI;IAC9B,UAAU,KAAK;IAEf,OAAO,cAAc;IACrB,OAAO,KAAK;cALd,CAOG,KAAK,MACL,KAAK,MACE;MANH,KAAK,IAMF,CACV,CACO;MACV,aACC,OAAO,KAAK,SACV,oBAAC,WAAD;GACE,WAAW,GAAG,YAAY,MAAM;GAEhC,OAAO,cAAc;GACrB,OAAO,KAAK;aAEX,KAAK;GACI,EALL,KAAK,IAKA,CACZ,CACK;;;AAIf,KAAK,cAAc"}

package/es/base-ui/Tabs/atoms.d.mts

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

package/es/base-ui/Tabs/atoms.mjs

@@ -0,0 +1,68 @@
+"use client";
+import { indicatorVariants, listVariants, styles, tabVariants } from "./style.mjs";
+import { createContext, use, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { Tabs } from "@base-ui/react/tabs";
+//#region src/base-ui/Tabs/atoms.tsx
+const TabsContext = createContext({
+	size: "middle",
+	variant: "rounded"
+});
+const useTabsContext = () => use(TabsContext);
+const TabsRoot = ({ children, size = "middle", variant = "rounded", ...rest }) => {
+	return /* @__PURE__ */ jsx(TabsContext, {
+		value: useMemo(() => ({
+			size,
+			variant
+		}), [size, variant]),
+		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: cx(listVariants({ variant }), 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: cx(tabVariants({
+			size,
+			variant
+		}), className),
+		...rest
+	});
+};
+TabsTab.displayName = "TabsTab";
+const TabsPanel = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx(Tabs.Panel, {
+		className: cx(styles.panel, 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: cx(indicatorVariants({ variant }), className),
+		...rest
+	});
+};
+TabsIndicator.displayName = "TabsIndicator";
+//#endregion
+export { TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab, useTabsContext };
+
+//# sourceMappingURL=atoms.mjs.map

package/es/base-ui/Tabs/atoms.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"atoms.mjs","names":["BaseUITabs"],"sources":["../../../src/base-ui/Tabs/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Tabs as BaseUITabs } from '@base-ui/react/tabs';\nimport { cx } from 'antd-style';\nimport { createContext, type FC, use, useMemo } from 'react';\n\nimport { indicatorVariants, listVariants, styles, tabVariants } 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 <BaseUITabs.List className={cx(listVariants({ variant }), className)} {...rest} />;\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 <BaseUITabs.Tab className={cx(tabVariants({ size, variant }), className)} {...rest} />;\n};\n\nTabsTab.displayName = 'TabsTab';\n\nexport const TabsPanel: FC<TabsPanelProps> = ({ className, ...rest }) => {\n  return <BaseUITabs.Panel className={cx(styles.panel, 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={cx(indicatorVariants({ variant }), className)}\n      {...rest}\n    />\n  );\n};\n\nTabsIndicator.displayName = 'TabsIndicator';\n\nexport { styles as tabsStyles } from './style';\n"],"mappings":";;;;;;;AAsBA,MAAM,cAAc,cAAgC;CAAE,MAAM;CAAU,SAAS;CAAW,CAAC;AAE3F,MAAa,uBAAuB,IAAI,YAAY;AAOpD,MAAa,YAAuC,EAClD,UACA,OAAO,UACP,UAAU,WACV,GAAG,WACC;AAGJ,QACE,oBAAC,aAAD;EAAa,OAHM,eAAe;GAAE;GAAM;GAAS,GAAG,CAAC,MAAM,QAAQ,CAGrC;YAC9B,oBAACA,KAAW,MAAZ;GAAiB,GAAI;GAAO;GAA2B,CAAA;EAC3C,CAAA;;AAIlB,SAAS,cAAc;AAEvB,MAAa,YAA+B,EAAE,WAAW,SAAS,aAAa,GAAG,WAAW;CAC3F,MAAM,MAAM,gBAAgB;CAC5B,MAAM,UAAU,eAAe,IAAI;AAEnC,QAAO,oBAACA,KAAW,MAAZ;EAAiB,WAAW,GAAG,aAAa,EAAE,SAAS,CAAC,EAAE,UAAU;EAAE,GAAI;EAAQ,CAAA;;AAG3F,SAAS,cAAc;AAEvB,MAAa,WAA6B,EACxC,WACA,MAAM,UACN,SAAS,aACT,GAAG,WACC;CACJ,MAAM,MAAM,gBAAgB;CAC5B,MAAM,OAAO,YAAY,IAAI;CAC7B,MAAM,UAAU,eAAe,IAAI;AAEnC,QAAO,oBAACA,KAAW,KAAZ;EAAgB,WAAW,GAAG,YAAY;GAAE;GAAM;GAAS,CAAC,EAAE,UAAU;EAAE,GAAI;EAAQ,CAAA;;AAG/F,QAAQ,cAAc;AAEtB,MAAa,aAAiC,EAAE,WAAW,GAAG,WAAW;AACvE,QAAO,oBAACA,KAAW,OAAZ;EAAkB,WAAW,GAAG,OAAO,OAAO,UAAU;EAAE,GAAI;EAAQ,CAAA;;AAG/E,UAAU,cAAc;AAExB,MAAa,iBAAyC,EACpD,WACA,SAAS,aACT,GAAG,WACC;CACJ,MAAM,MAAM,gBAAgB;CAC5B,MAAM,UAAU,eAAe,IAAI;AAEnC,QACE,oBAACA,KAAW,WAAZ;EACE,uBAAA;EACA,WAAW,GAAG,kBAAkB,EAAE,SAAS,CAAC,EAAE,UAAU;EACxD,GAAI;EACJ,CAAA;;AAIN,cAAc,cAAc"}

package/es/base-ui/Tabs/index.d.mts

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

package/es/base-ui/Tabs/style.d.mts

@@ -0,0 +1,20 @@
+//#region src/base-ui/Tabs/style.d.ts
+declare const styles: {
+  indicator: string;
+  indicatorPoint: string;
+  indicatorRounded: string;
+  indicatorSquare: string;
+  list: string;
+  listSquare: string;
+  panel: string;
+  root: string;
+  tab: string;
+  tabLarge: string;
+  tabMiddle: string;
+  tabPoint: string;
+  tabSmall: string;
+  tabSquare: string;
+};
+//#endregion
+export { styles };
+//# sourceMappingURL=style.d.mts.map

package/es/base-ui/Tabs/style.mjs

@@ -0,0 +1,203 @@
+import { createStaticStyles } from "antd-style";
+import { cva } from "class-variance-authority";
+//#region src/base-ui/Tabs/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	indicator: css`
+    pointer-events: none;
+
+    position: absolute;
+    z-index: 0;
+
+    transition-timing-function: ${cssVar.motionEaseOut};
+    transition-duration: 240ms;
+    transition-property: inset-inline-start, inset-block-start, width, height, transform;
+
+    @media (prefers-reduced-motion: reduce) {
+      transition-duration: 0s;
+    }
+  `,
+	indicatorPoint: css`
+    inset-block-end: 6px;
+    inset-inline-start: calc(var(--active-tab-left) + var(--active-tab-width) / 2 - 2.5px);
+
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+
+    background: ${cssVar.colorPrimary};
+  `,
+	indicatorRounded: css`
+    inset-block-start: var(--active-tab-top);
+    inset-inline-start: var(--active-tab-left);
+
+    width: var(--active-tab-width);
+    height: var(--active-tab-height);
+    border-radius: ${cssVar.borderRadius};
+
+    background: ${cssVar.colorFillSecondary};
+  `,
+	indicatorSquare: css`
+    inset-block-end: 0;
+    inset-inline-start: var(--active-tab-left);
+
+    width: var(--active-tab-width);
+    height: 2px;
+
+    background: ${cssVar.colorPrimary};
+  `,
+	list: css`
+    position: relative;
+
+    display: inline-flex;
+    flex-wrap: nowrap;
+    gap: 2px;
+    align-items: center;
+
+    &[data-orientation='vertical'] {
+      flex-direction: column;
+      align-items: stretch;
+    }
+  `,
+	listSquare: css`
+    gap: 16px;
+    box-shadow: inset 0 -1px 0 ${cssVar.colorBorderSecondary};
+
+    &[data-orientation='vertical'] {
+      box-shadow: inset -1px 0 0 ${cssVar.colorBorderSecondary};
+    }
+  `,
+	panel: css`
+    padding-block-start: 12px;
+    outline: none;
+
+    &:focus-visible {
+      border-radius: ${cssVar.borderRadius};
+      outline: 2px solid ${cssVar.colorPrimaryBorder};
+      outline-offset: 2px;
+    }
+  `,
+	root: css`
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    &[data-orientation='vertical'] {
+      flex-direction: row;
+    }
+  `,
+	tab: css`
+    cursor: pointer;
+    user-select: none;
+
+    position: relative;
+    z-index: 1;
+
+    display: inline-flex;
+    flex-shrink: 0;
+    gap: 6px;
+    align-items: center;
+    justify-content: center;
+
+    box-sizing: border-box;
+    border: 0;
+
+    font-weight: 500;
+    color: ${cssVar.colorTextSecondary};
+    white-space: nowrap;
+
+    background: transparent;
+    outline: none;
+
+    transition:
+      color 120ms ${cssVar.motionEaseOut},
+      transform 120ms ${cssVar.motionEaseOut};
+
+    &:hover:not([data-disabled]) {
+      color: ${cssVar.colorText};
+    }
+
+    &:active:not([data-disabled]) {
+      transform: scale(0.96);
+    }
+
+    &:focus-visible {
+      outline: 2px solid ${cssVar.colorPrimaryBorder};
+      outline-offset: -2px;
+    }
+
+    &[data-active] {
+      color: ${cssVar.colorPrimary};
+    }
+
+    &[data-disabled] {
+      cursor: not-allowed;
+      color: ${cssVar.colorTextDisabled};
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition-duration: 0s;
+    }
+  `,
+	tabLarge: css`
+    height: 36px;
+    padding-inline: 16px;
+    border-radius: ${cssVar.borderRadius};
+    font-size: 14px;
+  `,
+	tabMiddle: css`
+    height: 32px;
+    padding-inline: 12px;
+    border-radius: ${cssVar.borderRadius};
+    font-size: 13px;
+  `,
+	tabPoint: css`
+    padding-block-end: 6px;
+  `,
+	tabSmall: css`
+    height: 26px;
+    padding-inline: 10px;
+    border-radius: ${cssVar.borderRadius};
+    font-size: 12px;
+  `,
+	tabSquare: css`
+    border-radius: 0;
+  `
+}));
+const tabVariants = cva(styles.tab, {
+	defaultVariants: {
+		size: "middle",
+		variant: "rounded"
+	},
+	variants: {
+		size: {
+			large: styles.tabLarge,
+			middle: styles.tabMiddle,
+			small: styles.tabSmall
+		},
+		variant: {
+			point: styles.tabPoint,
+			rounded: null,
+			square: styles.tabSquare
+		}
+	}
+});
+const indicatorVariants = cva(styles.indicator, {
+	defaultVariants: { variant: "rounded" },
+	variants: { variant: {
+		point: styles.indicatorPoint,
+		rounded: styles.indicatorRounded,
+		square: styles.indicatorSquare
+	} }
+});
+const listVariants = cva(styles.list, {
+	defaultVariants: { variant: "rounded" },
+	variants: { variant: {
+		point: null,
+		rounded: null,
+		square: styles.listSquare
+	} }
+});
+//#endregion
+export { indicatorVariants, listVariants, styles, tabVariants };
+
+//# sourceMappingURL=style.mjs.map

package/es/base-ui/Tabs/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Tabs/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  indicator: css`\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 0;\n\n    transition-timing-function: ${cssVar.motionEaseOut};\n    transition-duration: 240ms;\n    transition-property: inset-inline-start, inset-block-start, width, height, transform;\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  indicatorPoint: css`\n    inset-block-end: 6px;\n    inset-inline-start: calc(var(--active-tab-left) + var(--active-tab-width) / 2 - 2.5px);\n\n    width: 5px;\n    height: 5px;\n    border-radius: 50%;\n\n    background: ${cssVar.colorPrimary};\n  `,\n  indicatorRounded: css`\n    inset-block-start: var(--active-tab-top);\n    inset-inline-start: var(--active-tab-left);\n\n    width: var(--active-tab-width);\n    height: var(--active-tab-height);\n    border-radius: ${cssVar.borderRadius};\n\n    background: ${cssVar.colorFillSecondary};\n  `,\n  indicatorSquare: css`\n    inset-block-end: 0;\n    inset-inline-start: var(--active-tab-left);\n\n    width: var(--active-tab-width);\n    height: 2px;\n\n    background: ${cssVar.colorPrimary};\n  `,\n  list: css`\n    position: relative;\n\n    display: inline-flex;\n    flex-wrap: nowrap;\n    gap: 2px;\n    align-items: center;\n\n    &[data-orientation='vertical'] {\n      flex-direction: column;\n      align-items: stretch;\n    }\n  `,\n  listSquare: css`\n    gap: 16px;\n    box-shadow: inset 0 -1px 0 ${cssVar.colorBorderSecondary};\n\n    &[data-orientation='vertical'] {\n      box-shadow: inset -1px 0 0 ${cssVar.colorBorderSecondary};\n    }\n  `,\n  panel: css`\n    padding-block-start: 12px;\n    outline: none;\n\n    &:focus-visible {\n      border-radius: ${cssVar.borderRadius};\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 2px;\n    }\n  `,\n  root: css`\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n\n    &[data-orientation='vertical'] {\n      flex-direction: row;\n    }\n  `,\n  tab: css`\n    cursor: pointer;\n    user-select: none;\n\n    position: relative;\n    z-index: 1;\n\n    display: inline-flex;\n    flex-shrink: 0;\n    gap: 6px;\n    align-items: center;\n    justify-content: center;\n\n    box-sizing: border-box;\n    border: 0;\n\n    font-weight: 500;\n    color: ${cssVar.colorTextSecondary};\n    white-space: nowrap;\n\n    background: transparent;\n    outline: none;\n\n    transition:\n      color 120ms ${cssVar.motionEaseOut},\n      transform 120ms ${cssVar.motionEaseOut};\n\n    &:hover:not([data-disabled]) {\n      color: ${cssVar.colorText};\n    }\n\n    &:active:not([data-disabled]) {\n      transform: scale(0.96);\n    }\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: -2px;\n    }\n\n    &[data-active] {\n      color: ${cssVar.colorPrimary};\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextDisabled};\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  tabLarge: css`\n    height: 36px;\n    padding-inline: 16px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 14px;\n  `,\n  tabMiddle: css`\n    height: 32px;\n    padding-inline: 12px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 13px;\n  `,\n  tabPoint: css`\n    padding-block-end: 6px;\n  `,\n  tabSmall: css`\n    height: 26px;\n    padding-inline: 10px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 12px;\n  `,\n  tabSquare: css`\n    border-radius: 0;\n  `,\n}));\n\nexport const tabVariants = cva(styles.tab, {\n  defaultVariants: {\n    size: 'middle',\n    variant: 'rounded',\n  },\n  variants: {\n    size: {\n      large: styles.tabLarge,\n      middle: styles.tabMiddle,\n      small: styles.tabSmall,\n    },\n    variant: {\n      point: styles.tabPoint,\n      rounded: null,\n      square: styles.tabSquare,\n    },\n  },\n});\n\nexport const indicatorVariants = cva(styles.indicator, {\n  defaultVariants: {\n    variant: 'rounded',\n  },\n  variants: {\n    variant: {\n      point: styles.indicatorPoint,\n      rounded: styles.indicatorRounded,\n      square: styles.indicatorSquare,\n    },\n  },\n});\n\nexport const listVariants = cva(styles.list, {\n  defaultVariants: {\n    variant: 'rounded',\n  },\n  variants: {\n    variant: {\n      point: null,\n      rounded: null,\n      square: styles.listSquare,\n    },\n  },\n});\n"],"mappings":";;;AAGA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,WAAW,GAAG;;;;;;kCAMkB,OAAO,cAAc;;;;;;;;CAQrD,gBAAgB,GAAG;;;;;;;;kBAQH,OAAO,aAAa;;CAEpC,kBAAkB,GAAG;;;;;;qBAMF,OAAO,aAAa;;kBAEvB,OAAO,mBAAmB;;CAE1C,iBAAiB,GAAG;;;;;;;kBAOJ,OAAO,aAAa;;CAEpC,MAAM,GAAG;;;;;;;;;;;;;CAaT,YAAY,GAAG;;iCAEgB,OAAO,qBAAqB;;;mCAG1B,OAAO,qBAAqB;;;CAG7D,OAAO,GAAG;;;;;uBAKW,OAAO,aAAa;2BAChB,OAAO,mBAAmB;;;;CAInD,MAAM,GAAG;;;;;;;;;CAST,KAAK,GAAG;;;;;;;;;;;;;;;;;aAiBG,OAAO,mBAAmB;;;;;;;oBAOnB,OAAO,cAAc;wBACjB,OAAO,cAAc;;;eAG9B,OAAO,UAAU;;;;;;;;2BAQL,OAAO,mBAAmB;;;;;eAKtC,OAAO,aAAa;;;;;eAKpB,OAAO,kBAAkB;;;;;;;CAOtC,UAAU,GAAG;;;qBAGM,OAAO,aAAa;;;CAGvC,WAAW,GAAG;;;qBAGK,OAAO,aAAa;;;CAGvC,UAAU,GAAG;;;CAGb,UAAU,GAAG;;;qBAGM,OAAO,aAAa;;;CAGvC,WAAW,GAAG;;;CAGf,EAAE;AAEH,MAAa,cAAc,IAAI,OAAO,KAAK;CACzC,iBAAiB;EACf,MAAM;EACN,SAAS;EACV;CACD,UAAU;EACR,MAAM;GACJ,OAAO,OAAO;GACd,QAAQ,OAAO;GACf,OAAO,OAAO;GACf;EACD,SAAS;GACP,OAAO,OAAO;GACd,SAAS;GACT,QAAQ,OAAO;GAChB;EACF;CACF,CAAC;AAEF,MAAa,oBAAoB,IAAI,OAAO,WAAW;CACrD,iBAAiB,EACf,SAAS,WACV;CACD,UAAU,EACR,SAAS;EACP,OAAO,OAAO;EACd,SAAS,OAAO;EAChB,QAAQ,OAAO;EAChB,EACF;CACF,CAAC;AAEF,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EACf,SAAS,WACV;CACD,UAAU,EACR,SAAS;EACP,OAAO;EACP,SAAS;EACT,QAAQ,OAAO;EAChB,EACF;CACF,CAAC"}

package/es/base-ui/Tabs/type.d.mts

@@ -0,0 +1,64 @@
+import { CSSProperties, ComponentProps, ReactNode, Ref } from "react";
+import { Tabs } from "@base-ui/react/tabs";
+
+//#region src/base-ui/Tabs/type.d.ts
+type TabsVariant = 'rounded' | 'square' | 'point';
+type TabsSize = 'small' | 'middle' | 'large';
+type TabsOrientation = 'horizontal' | 'vertical';
+interface TabsClassNames {
+  indicator?: string;
+  list?: string;
+  panel?: string;
+  root?: string;
+  tab?: string;
+}
+interface TabsStyles {
+  indicator?: CSSProperties;
+  list?: CSSProperties;
+  panel?: CSSProperties;
+  root?: CSSProperties;
+  tab?: CSSProperties;
+}
+interface TabsItem {
+  children?: ReactNode;
+  disabled?: boolean;
+  icon?: ReactNode;
+  key: string;
+  label: ReactNode;
+}
+type TabsRootProps = Omit<ComponentProps<typeof Tabs.Root>, 'className' | 'render'> & {
+  className?: string;
+};
+type TabsListProps = Omit<ComponentProps<typeof Tabs.List>, 'className' | 'render'> & {
+  className?: string;
+  variant?: TabsVariant;
+};
+type TabsTabProps = Omit<ComponentProps<typeof Tabs.Tab>, 'className' | 'render'> & {
+  className?: string;
+  size?: TabsSize;
+  variant?: TabsVariant;
+};
+type TabsPanelProps = Omit<ComponentProps<typeof Tabs.Panel>, 'className' | 'render'> & {
+  className?: string;
+};
+type TabsIndicatorProps = Omit<ComponentProps<typeof Tabs.Indicator>, 'className' | 'render'> & {
+  className?: string;
+  variant?: TabsVariant;
+};
+interface TabsProps {
+  activeKey?: string;
+  className?: string;
+  classNames?: TabsClassNames;
+  defaultActiveKey?: string;
+  items?: TabsItem[];
+  onChange?: (key: string) => void;
+  orientation?: TabsOrientation;
+  ref?: Ref<HTMLDivElement>;
+  size?: TabsSize;
+  style?: CSSProperties;
+  styles?: TabsStyles;
+  variant?: TabsVariant;
+}
+//#endregion
+export { TabsClassNames, TabsIndicatorProps, TabsItem, TabsListProps, TabsOrientation, TabsPanelProps, TabsProps, TabsRootProps, TabsSize, TabsStyles, TabsTabProps, TabsVariant };
+//# sourceMappingURL=type.d.mts.map

package/es/base-ui/index.d.mts

@@ -40,4 +40,8 @@ import { SwitchChangeEventHandler, SwitchClassNames, SwitchClickEventHandler, Sw
 import { styles as styles$1 } from "./Switch/style.mjs";
 import { SwitchIcon, SwitchRoot, SwitchThumb, useSwitchContext } from "./Switch/atoms.mjs";
 import { Switch } from "./Switch/Switch.mjs";
-export { BaseModalProps, Button, ButtonIconPosition, ButtonProps, ButtonShape, ButtonSize, ButtonType, type ContextMenuCheckboxItem, ContextMenuHost, type ContextMenuItem, ContextMenuTrigger, DropdownItem, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuCheckboxItemProps, DropdownMenuFooter, DropdownMenuFooterProps, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuGroupLabelProps, DropdownMenuHeader, DropdownMenuHeaderProps, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemContentProps, DropdownMenuItemDesc, DropdownMenuItemDescProps, DropdownMenuItemExtra, DropdownMenuItemExtraProps, DropdownMenuItemIcon, DropdownMenuItemIconProps, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, DropdownMenuItemLabelGroupProps, DropdownMenuItemLabelProps, DropdownMenuItemProps, DropdownMenuPlacement, DropdownMenuPopup, DropdownMenuPopupProps, DropdownMenuPortal, DropdownMenuPortalProps, DropdownMenuPositioner, DropdownMenuPositionerProps, DropdownMenuProps, DropdownMenuRoot, DropdownMenuScrollViewport, DropdownMenuScrollViewportProps, DropdownMenuSeparator, DropdownMenuSeparatorProps, DropdownMenuSubmenuArrow, DropdownMenuSubmenuArrowProps, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSubmenuTriggerProps, DropdownMenuSwitchItem, DropdownMenuSwitchItemProps, DropdownMenuSwitchItem$1 as DropdownMenuSwitchItemType, DropdownMenuTrigger, DropdownMenuTriggerProps, FloatingSheet, FloatingSheetProps, IconSpaceMode, ImperativeModalProps, Modal, ModalBackdrop, ModalBackdropProps, ModalClose, ModalCloseProps, ModalComponentProps, ModalConfirmConfig, ModalContent, ModalContentProps, ModalContext, ModalContextValue, ModalDescription, ModalDescriptionProps, ModalFooter, ModalFooterProps, ModalHeader, ModalHeaderProps, ModalHost, ModalHostProps, ModalInstance, ModalPopup, ModalPopupProps, ModalPortal, ModalPortalProps, ModalRoot, ModalRootProps, ModalSystem, ModalTitle, ModalTitleProps, ModalTrigger, ModalTriggerProps, ModalViewport, ModalViewportProps, PopoverArrow, PopoverArrowAtomProps, PopoverArrowIcon, PopoverBackdrop, PopoverBackdropProps, PopoverContextValue, PopoverGroup, PopoverPlacement, PopoverPopup, PopoverPopupAtomProps, PopoverPopupProps, PopoverPortal, PopoverPortalAtomProps, PopoverPortalProps, PopoverPositioner, PopoverPositionerAtomProps, PopoverPositionerProps, PopoverProps, PopoverProvider, PopoverRoot, PopoverTrigger, PopoverTriggerComponentProps, PopoverTriggerElement, PopoverTriggerElementProps, PopoverViewport, PopoverViewportAtomProps, ScrollArea, ScrollAreaContent, ScrollAreaContentProps, ScrollAreaCorner, ScrollAreaCornerProps, ScrollAreaProps, ScrollAreaRoot, ScrollAreaRootProps, ScrollAreaScrollbar, ScrollAreaScrollbarProps, ScrollAreaThumb, ScrollAreaThumbProps, ScrollAreaViewport, ScrollAreaViewportProps, Select, SelectArrow, SelectArrowProps, SelectBackdrop, SelectBehaviorVariant, SelectClassNames, SelectGroup, SelectGroupLabel, SelectGroupLabelProps, SelectGroupProps, SelectIcon, SelectIconProps, SelectIndicatorVariant, SelectItem, SelectItemIndicator, SelectItemIndicatorProps, SelectItemProps, SelectItemText, SelectItemTextProps, SelectList, SelectListProps, SelectOption, SelectOptionGroup, SelectOptions, SelectPopup, SelectPopupProps, SelectPortal, SelectPortalProps, SelectPositioner, SelectPositionerProps, SelectProps, SelectRoot, SelectRootChangeEventDetails, SelectScrollDownArrow, SelectScrollDownArrowProps, SelectScrollUpArrow, SelectScrollUpArrowProps, SelectSeparator, SelectSize, SelectTrigger, SelectTriggerProps, SelectValue, SelectValueProps, SelectVariant, Switch, SwitchChangeEventHandler, SwitchClassNames, SwitchClickEventHandler, SwitchContextType, SwitchIcon, SwitchIconPosition, SwitchIconProps, SwitchProps, SwitchRoot, SwitchRootProps, SwitchSize, SwitchStyles, SwitchThumb, SwitchThumbProps, type ToastAPI, ToastHost, type ToastHostProps, type ToastInstance, type ToastOptions, type ToastPosition, type ToastPromiseOptions, type ToastProps, type ToastType, Tooltip, TooltipGroup, TooltipGroupProps, TooltipPlacement, TooltipPopupComponentProps, TooltipPortalProps, TooltipPositionerProps, TooltipProps, TooltipTriggerComponentProps, backdropTransition, styles as buttonStyles, closeContextMenu, confirmModal, createModal, createModalSystem, modalMotionConfig, parseTrigger, renderDropdownMenuItems, showContextMenu, styles$1 as switchStyles, toast, updateContextMenuItems, useModalActions, useModalContext, useModalOpen, usePopoverContext, usePopoverPortalContainer, useSwitchContext, useToast };
+import { TabsClassNames, TabsIndicatorProps, TabsItem, TabsListProps, TabsOrientation, TabsPanelProps, TabsProps, TabsRootProps, TabsSize, TabsStyles, TabsTabProps, TabsVariant } from "./Tabs/type.mjs";
+import { styles as styles$2 } from "./Tabs/style.mjs";
+import { TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab, useTabsContext } from "./Tabs/atoms.mjs";
+import { Tabs } from "./Tabs/Tabs.mjs";
+export { BaseModalProps, Button, ButtonIconPosition, ButtonProps, ButtonShape, ButtonSize, ButtonType, type ContextMenuCheckboxItem, ContextMenuHost, type ContextMenuItem, ContextMenuTrigger, DropdownItem, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuCheckboxItemProps, DropdownMenuFooter, DropdownMenuFooterProps, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuGroupLabelProps, DropdownMenuHeader, DropdownMenuHeaderProps, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemContentProps, DropdownMenuItemDesc, DropdownMenuItemDescProps, DropdownMenuItemExtra, DropdownMenuItemExtraProps, DropdownMenuItemIcon, DropdownMenuItemIconProps, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, DropdownMenuItemLabelGroupProps, DropdownMenuItemLabelProps, DropdownMenuItemProps, DropdownMenuPlacement, DropdownMenuPopup, DropdownMenuPopupProps, DropdownMenuPortal, DropdownMenuPortalProps, DropdownMenuPositioner, DropdownMenuPositionerProps, DropdownMenuProps, DropdownMenuRoot, DropdownMenuScrollViewport, DropdownMenuScrollViewportProps, DropdownMenuSeparator, DropdownMenuSeparatorProps, DropdownMenuSubmenuArrow, DropdownMenuSubmenuArrowProps, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSubmenuTriggerProps, DropdownMenuSwitchItem, DropdownMenuSwitchItemProps, DropdownMenuSwitchItem$1 as DropdownMenuSwitchItemType, DropdownMenuTrigger, DropdownMenuTriggerProps, FloatingSheet, FloatingSheetProps, IconSpaceMode, ImperativeModalProps, Modal, ModalBackdrop, ModalBackdropProps, ModalClose, ModalCloseProps, ModalComponentProps, ModalConfirmConfig, ModalContent, ModalContentProps, ModalContext, ModalContextValue, ModalDescription, ModalDescriptionProps, ModalFooter, ModalFooterProps, ModalHeader, ModalHeaderProps, ModalHost, ModalHostProps, ModalInstance, ModalPopup, ModalPopupProps, ModalPortal, ModalPortalProps, ModalRoot, ModalRootProps, ModalSystem, ModalTitle, ModalTitleProps, ModalTrigger, ModalTriggerProps, ModalViewport, ModalViewportProps, PopoverArrow, PopoverArrowAtomProps, PopoverArrowIcon, PopoverBackdrop, PopoverBackdropProps, PopoverContextValue, PopoverGroup, PopoverPlacement, PopoverPopup, PopoverPopupAtomProps, PopoverPopupProps, PopoverPortal, PopoverPortalAtomProps, PopoverPortalProps, PopoverPositioner, PopoverPositionerAtomProps, PopoverPositionerProps, PopoverProps, PopoverProvider, PopoverRoot, PopoverTrigger, PopoverTriggerComponentProps, PopoverTriggerElement, PopoverTriggerElementProps, PopoverViewport, PopoverViewportAtomProps, ScrollArea, ScrollAreaContent, ScrollAreaContentProps, ScrollAreaCorner, ScrollAreaCornerProps, ScrollAreaProps, ScrollAreaRoot, ScrollAreaRootProps, ScrollAreaScrollbar, ScrollAreaScrollbarProps, ScrollAreaThumb, ScrollAreaThumbProps, ScrollAreaViewport, ScrollAreaViewportProps, Select, SelectArrow, SelectArrowProps, SelectBackdrop, SelectBehaviorVariant, SelectClassNames, SelectGroup, SelectGroupLabel, SelectGroupLabelProps, SelectGroupProps, SelectIcon, SelectIconProps, SelectIndicatorVariant, SelectItem, SelectItemIndicator, SelectItemIndicatorProps, SelectItemProps, SelectItemText, SelectItemTextProps, SelectList, SelectListProps, SelectOption, SelectOptionGroup, SelectOptions, SelectPopup, SelectPopupProps, SelectPortal, SelectPortalProps, SelectPositioner, SelectPositionerProps, SelectProps, SelectRoot, SelectRootChangeEventDetails, SelectScrollDownArrow, SelectScrollDownArrowProps, SelectScrollUpArrow, SelectScrollUpArrowProps, SelectSeparator, SelectSize, SelectTrigger, SelectTriggerProps, SelectValue, SelectValueProps, SelectVariant, Switch, SwitchChangeEventHandler, SwitchClassNames, SwitchClickEventHandler, SwitchContextType, SwitchIcon, SwitchIconPosition, SwitchIconProps, SwitchProps, SwitchRoot, SwitchRootProps, SwitchSize, SwitchStyles, SwitchThumb, SwitchThumbProps, Tabs, TabsClassNames, TabsIndicator, TabsIndicatorProps, TabsItem, TabsList, TabsListProps, TabsOrientation, TabsPanel, TabsPanelProps, TabsProps, TabsRoot, TabsRootProps, TabsSize, TabsStyles, TabsTab, TabsTabProps, TabsVariant, type ToastAPI, ToastHost, type ToastHostProps, type ToastInstance, type ToastOptions, type ToastPosition, type ToastPromiseOptions, type ToastProps, type ToastType, Tooltip, TooltipGroup, TooltipGroupProps, TooltipPlacement, TooltipPopupComponentProps, TooltipPortalProps, TooltipPositionerProps, TooltipProps, TooltipTriggerComponentProps, backdropTransition, styles as buttonStyles, closeContextMenu, confirmModal, createModal, createModalSystem, modalMotionConfig, parseTrigger, renderDropdownMenuItems, showContextMenu, styles$1 as switchStyles, styles$2 as tabsStyles, toast, updateContextMenuItems, useModalActions, useModalContext, useModalOpen, usePopoverContext, usePopoverPortalContainer, useSwitchContext, useTabsContext, useToast };

package/es/base-ui/index.mjs

@@ -28,4 +28,7 @@ import { ModalHost, confirmModal, createModal, createModalSystem } from "./Modal
 import Modal from "./Modal/Modal.mjs";
 import { SelectArrow, SelectBackdrop, SelectGroup, SelectGroupLabel, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectList, SelectPopup, SelectPortal, SelectPositioner, SelectRoot, SelectScrollDownArrow, SelectScrollUpArrow, SelectSeparator, SelectTrigger, SelectValue } from "./Select/atoms.mjs";
 import Select from "./Select/Select.mjs";
-export { Button, ContextMenuHost, ContextMenuTrigger, DropdownMenu, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuHeader, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDesc, DropdownMenuItemExtra, DropdownMenuItemIcon, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuPositioner, DropdownMenuRoot, DropdownMenuScrollViewport, DropdownMenuSeparator, DropdownMenuSubmenuArrow, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSwitchItem, DropdownMenuTrigger, FloatingSheet, Modal, ModalBackdrop, ModalClose, ModalContent, ModalContext, ModalDescription, ModalFooter, ModalHeader, ModalHost, ModalPopup, ModalPortal, ModalRoot, ModalTitle, ModalTrigger, ModalViewport, PopoverArrow, PopoverArrowIcon, PopoverBackdrop, PopoverGroup, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverProvider, PopoverRoot, PopoverTriggerElement, PopoverViewport, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, Select, SelectArrow, SelectBackdrop, SelectGroup, SelectGroupLabel, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectList, SelectPopup, SelectPortal, SelectPositioner, SelectRoot, SelectScrollDownArrow, SelectScrollUpArrow, SelectSeparator, SelectTrigger, SelectValue, Switch, SwitchIcon, SwitchRoot, SwitchThumb, ToastHost, Tooltip, TooltipGroup, backdropTransition, styles as buttonStyles, closeContextMenu, confirmModal, createModal, createModalSystem, modalMotionConfig, parseTrigger, renderDropdownMenuItems, showContextMenu, styles$1 as switchStyles, toast, updateContextMenuItems, useModalActions, useModalContext, useModalOpen, usePopoverContext, usePopoverPortalContainer, useSwitchContext, useToast };
+import { styles as styles$2 } from "./Tabs/style.mjs";
+import { TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab, useTabsContext } from "./Tabs/atoms.mjs";
+import Tabs from "./Tabs/Tabs.mjs";
+export { Button, ContextMenuHost, ContextMenuTrigger, DropdownMenu, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuHeader, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDesc, DropdownMenuItemExtra, DropdownMenuItemIcon, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuPositioner, DropdownMenuRoot, DropdownMenuScrollViewport, DropdownMenuSeparator, DropdownMenuSubmenuArrow, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSwitchItem, DropdownMenuTrigger, FloatingSheet, Modal, ModalBackdrop, ModalClose, ModalContent, ModalContext, ModalDescription, ModalFooter, ModalHeader, ModalHost, ModalPopup, ModalPortal, ModalRoot, ModalTitle, ModalTrigger, ModalViewport, PopoverArrow, PopoverArrowIcon, PopoverBackdrop, PopoverGroup, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverProvider, PopoverRoot, PopoverTriggerElement, PopoverViewport, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, Select, SelectArrow, SelectBackdrop, SelectGroup, SelectGroupLabel, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectList, SelectPopup, SelectPortal, SelectPositioner, SelectRoot, SelectScrollDownArrow, SelectScrollUpArrow, SelectSeparator, SelectTrigger, SelectValue, Switch, SwitchIcon, SwitchRoot, SwitchThumb, Tabs, TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab, ToastHost, Tooltip, TooltipGroup, backdropTransition, styles as buttonStyles, closeContextMenu, confirmModal, createModal, createModalSystem, modalMotionConfig, parseTrigger, renderDropdownMenuItems, showContextMenu, styles$1 as switchStyles, styles$2 as tabsStyles, toast, updateContextMenuItems, useModalActions, useModalContext, useModalOpen, usePopoverContext, usePopoverPortalContainer, useSwitchContext, useTabsContext, useToast };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "5.15.17",
+  "version": "5.16.0",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",