@choice-ui/react 1.3.10 → 1.3.13

package/dist/core/app/components/menus/dist/index.d.ts

@@ -104,7 +104,6 @@ interface MenusComponentProps extends react__default.ForwardRefExoticComponent<M
     SearchEmpty: typeof MenuSearchEmpty;
     Value: typeof MenuValue;
 }
-declare const MenusBase: react__default.ForwardRefExoticComponent<Omit<MenusProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
 declare const Menus: MenusComponentProps;
 
 /**
@@ -169,34 +168,6 @@ interface MenuRefsResult {
 }
 declare function useMenuRefs(config?: MenuRefsConfig): MenuRefsResult;
 
-/**
- * 菜单触摸交互 Hook
- *
- * 处理菜单组件的触摸交互逻辑：
- * - 触摸状态检测
- * - 触摸开始事件处理
- * - 指针移动事件处理
- * - 触摸相关的事件处理器
- */
-interface MenuTouchConfig {
-    /** 设置触摸状态 */
-    setTouch: (touch: boolean) => void;
-    /** 触摸状态 */
-    touch: boolean;
-}
-interface MenuTouchResult {
-    /** 获取触摸相关的引用属性 */
-    getTouchProps: () => {
-        onPointerMove: (event: React.PointerEvent) => void;
-        onTouchStart: () => void;
-    };
-    /** 指针移动事件处理器 */
-    handlePointerMove: (event: React.PointerEvent) => void;
-    /** 触摸开始事件处理器 */
-    handleTouchStart: () => void;
-}
-declare function useMenuTouch(config: MenuTouchConfig): MenuTouchResult;
-
 /**
  * 菜单滚动处理 Hook
  *
@@ -477,7 +448,6 @@ interface MenuContextType {
     variant?: "default" | "light" | "reset";
 }
 declare const MenuContext: react.Context<MenuContextType | null>;
-declare const useMenu: () => MenuContextType;
 
 interface MenuContextItemProps extends MenuItemProps {
     customActive?: boolean;
@@ -509,4 +479,4 @@ declare const MenuContextLabel: react.NamedExoticComponent<MenuLabelProps>;
 
 declare const MenuContextSubTrigger: react.MemoExoticComponent<react.ForwardRefExoticComponent<MenuItemProps & react.RefAttributes<HTMLButtonElement>>>;
 
-export { type MenuBaseRefsResult, MenuButton, MenuCheckbox, type MenuChildrenConfig, type MenuChildrenResult, MenuContext, MenuContextContent, MenuContextItem, type MenuContextItemProps, MenuContextLabel, MenuContextSubTrigger, type MenuContextType, MenuDivider, type MenuFloatingConfig, type MenuFloatingResult, MenuInput, MenuItem, type MenuItemProps, MenuLabel, type MenuLabelProps, type MenuRefsConfig, type MenuRefsResult, MenuScrollArrow, type MenuScrollConfig, type MenuScrollHeightConfig, type MenuScrollResult, MenuSearch, MenuSearchEmpty, type MenuSelectionConfig, type MenuSelectionResult, type MenuStateConfig, type MenuStateResult, type MenuTouchConfig, type MenuTouchResult, type MenuTreeConfig, type MenuTreeResult, MenuTrigger, type MenuTriggerProps, MenuValue, type MenuValueProps, Menus, MenusBase, useMenu, useMenuBaseRefs, useMenuChildren, useMenuFloating, useMenuRefs, useMenuScroll, useMenuScrollHeight, useMenuSelection, useMenuState, useMenuTouch, useMenuTree };
+export { MenuButton, MenuCheckbox, MenuContext, MenuContextContent, MenuContextItem, type MenuContextItemProps, MenuContextLabel, MenuContextSubTrigger, type MenuContextType, MenuDivider, MenuInput, MenuItem, MenuLabel, MenuScrollArrow, MenuSearch, MenuSearchEmpty, MenuTrigger, MenuValue, Menus, type MenusProps, useMenuBaseRefs, useMenuChildren, useMenuFloating, useMenuRefs, useMenuScroll, useMenuScrollHeight, useMenuSelection, useMenuState, useMenuTree };

package/dist/core/app/components/multi-select/dist/index.d.ts

@@ -74,85 +74,4 @@ interface MultiSelectComponentType extends React__default.ForwardRefExoticCompon
 }
 declare const MultiSelect: MultiSelectComponentType;
 
-interface UseMultiSelectStateProps {
-    controlledOpen?: boolean;
-    onOpenChange?: (open: boolean) => void;
-}
-declare function useMultiSelectState({ controlledOpen, onOpenChange }: UseMultiSelectStateProps): {
-    open: boolean;
-    setOpen: React$1.Dispatch<React$1.SetStateAction<boolean>>;
-    touch: boolean;
-    setTouch: React$1.Dispatch<React$1.SetStateAction<boolean>>;
-    scrollTop: number;
-    setScrollTop: React$1.Dispatch<React$1.SetStateAction<number>>;
-    activeIndex: number | null;
-    setActiveIndex: React$1.Dispatch<React$1.SetStateAction<number | null>>;
-    validationMessage: string | null;
-    setValidationMessage: React$1.Dispatch<React$1.SetStateAction<string | null>>;
-    isControlledOpen: boolean;
-};
-
-interface UseMultiSelectSelectionProps {
-    closeOnSelect?: boolean;
-    handleOpenChange: (open: boolean) => void;
-    i18n?: {
-        maxSelectionMessage?: (maxSelection: number) => string;
-        minSelectionMessage?: (minSelection: number) => string;
-    };
-    maxSelection?: number;
-    minSelection?: number;
-    onChange?: (values: string[]) => void;
-    selectableOptions: Array<{
-        disabled?: boolean;
-        element?: React.ReactElement;
-        value?: string;
-    }>;
-    setValidationMessage: (message: string | null) => void;
-    values: string[];
-}
-declare function useMultiSelectSelection({ values, onChange, selectableOptions, maxSelection, minSelection, closeOnSelect, i18n, setValidationMessage, handleOpenChange, }: UseMultiSelectSelectionProps): {
-    handleSelect: (index: number) => void;
-    handleRemove: (valueToRemove: string) => void;
-};
-
-declare function extractItemElements(children: React__default.ReactNode): React__default.ReactNode[];
-declare function processOptions(itemElements: React__default.ReactNode[]): ({
-    divider: boolean;
-    label?: undefined;
-    children?: undefined;
-    value?: undefined;
-    disabled?: undefined;
-    _originalIndex?: undefined;
-    element?: undefined;
-} | {
-    label: boolean;
-    children: any;
-    divider?: undefined;
-    value?: undefined;
-    disabled?: undefined;
-    _originalIndex?: undefined;
-    element?: undefined;
-} | {
-    value: string | undefined;
-    disabled: boolean | undefined;
-    _originalIndex: number;
-    element: React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>>;
-    children: React__default.ReactNode;
-    divider?: undefined;
-    label?: undefined;
-})[];
-declare function filterSelectableOptions(options: Array<{
-    disabled?: boolean;
-    divider?: boolean;
-    element?: React__default.ReactElement;
-    label?: boolean;
-    value?: string;
-}>): {
-    disabled?: boolean;
-    divider?: boolean;
-    element?: React__default.ReactElement;
-    label?: boolean;
-    value?: string;
-}[];
-
-export { MultiSelect, type MultiSelectProps, MultiSelectTrigger, type MultiSelectTriggerProps, type UseMultiSelectSelectionProps, type UseMultiSelectStateProps, extractItemElements, filterSelectableOptions, processOptions, useMultiSelectSelection, useMultiSelectState };
+export { MultiSelect, type MultiSelectProps, MultiSelectTrigger, type MultiSelectTriggerProps };

package/dist/core/app/components/segmented/dist/index.d.ts

@@ -26,14 +26,4 @@ declare const Segmented: react.ForwardRefExoticComponent<Omit<SegmentedProps, "r
     Item: react.MemoExoticComponent<react.ForwardRefExoticComponent<SegmentedItemProps & react.RefAttributes<HTMLLabelElement>>>;
 };
 
-interface SegmentedContextValue {
-    disabled?: boolean;
-    groupId: string;
-    onChange: (value: string) => void;
-    readOnly?: boolean;
-    value?: string;
-    variant?: "default" | "light" | "dark" | "reset";
-}
-declare function useSegmentedContext(): SegmentedContextValue;
-
-export { Segmented, type SegmentedContextValue, type SegmentedItemProps, type SegmentedProps, useSegmentedContext };
+export { Segmented, type SegmentedItemProps, type SegmentedProps };

package/dist/core/app/components/skeleton/dist/index.d.ts

@@ -1,6 +1,5 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import * as react from 'react';
-import * as tailwind_variants from 'tailwind-variants';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type SkeletonVariant = "text" | "rectangular" | "rounded" | "circular";
@@ -55,47 +54,6 @@ interface SkeletonProps extends ComponentPropsWithoutRef<"span"> {
  */
 declare const Skeleton: react.MemoExoticComponent<react.ForwardRefExoticComponent<SkeletonProps & react.RefAttributes<HTMLSpanElement>>>;
 
-declare const skeletonTv: tailwind_variants.TVReturnType<{
-    hasChildren: {
-        true: {};
-        false: {};
-    };
-    loading: {
-        true: {
-            root: string[];
-        };
-        false: {};
-    };
-}, {
-    root: string[];
-}, undefined, {
-    hasChildren: {
-        true: {};
-        false: {};
-    };
-    loading: {
-        true: {
-            root: string[];
-        };
-        false: {};
-    };
-}, {
-    root: string[];
-}, tailwind_variants.TVReturnType<{
-    hasChildren: {
-        true: {};
-        false: {};
-    };
-    loading: {
-        true: {
-            root: string[];
-        };
-        false: {};
-    };
-}, {
-    root: string[];
-}, undefined, unknown, unknown, undefined>>;
-
 interface UseSkeletonParams {
     hasChildren: boolean;
     height?: number | string;
@@ -116,4 +74,4 @@ interface SkeletonProviderProps {
 }
 declare function SkeletonProvider({ children, loading }: SkeletonProviderProps): react_jsx_runtime.JSX.Element;
 
-export { Skeleton, type SkeletonContextValue, type SkeletonProps, SkeletonProvider, type SkeletonProviderProps, type SkeletonVariant, skeletonTv, useSkeleton, useSkeletonContext };
+export { Skeleton, type SkeletonContextValue, type SkeletonProps, SkeletonProvider, type SkeletonProviderProps, useSkeleton, useSkeletonContext };

package/dist/core/app/components/tabs/dist/index.d.ts

@@ -1,35 +1,27 @@
-import { ButtonHTMLAttributes, ReactNode, HTMLProps } from 'react';
+import { HTMLProps, ReactNode } from 'react';
 import * as react from 'react';
 
-interface TabsContextValue {
-    disabled?: boolean;
-    id: string;
-    onChange: (value: string) => void;
-    readOnly?: boolean;
-    value: string;
-    variant: "default" | "light" | "dark" | "reset";
-}
-declare function useTabsContext(): TabsContextValue;
-
-interface TabItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "value"> {
+interface TabItemProps extends Omit<HTMLProps<HTMLElement>, "value" | "as"> {
+    as?: React.ElementType;
     children: ReactNode;
     disabled?: boolean;
     value: string;
 }
-declare const TabItem: react.MemoExoticComponent<react.ForwardRefExoticComponent<TabItemProps & react.RefAttributes<HTMLButtonElement>>>;
+declare const TabItem: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<TabItemProps, "ref"> & react.RefAttributes<HTMLElement>>>;
 
-interface TabsProps extends Omit<HTMLProps<HTMLDivElement>, "onChange"> {
+interface TabsProps extends Omit<HTMLProps<HTMLElement>, "onChange" | "as"> {
+    as?: React.ElementType;
     children?: ReactNode;
     className?: string;
     disabled?: boolean;
     onChange?: (value: string) => void;
     readOnly?: boolean;
     value: string;
-    variant?: "default" | "light" | "dark" | "reset";
+    variant?: "default" | "light" | "dark" | "accent" | "reset";
 }
-interface TabsComponent extends React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>> {
+interface TabsComponent extends React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLElement>> {
     Item: typeof TabItem;
 }
 declare const Tabs: TabsComponent;
 
-export { TabItem, type TabItemProps, Tabs, type TabsContextValue, type TabsProps, useTabsContext };
+export { TabItem, type TabItemProps, Tabs, type TabsProps };

package/dist/core/app/components/toggle-button/dist/index.d.ts

@@ -18,4 +18,4 @@ interface ToggleButtonProps extends Omit<HTMLProps<HTMLInputElement>, "value" |
 }
 declare const ToggleButton: react.ForwardRefExoticComponent<Omit<ToggleButtonProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
 
-export { ToggleButton };
+export { ToggleButton, type ToggleButtonProps };

package/dist/esm/components/avatar/dist/index.js

@@ -25,7 +25,7 @@ var InitialLetter = memo(function InitialLetter2({
   return /* @__PURE__ */ jsx(
     "span",
     {
-      className: "flex h-full w-full select-none items-center justify-center uppercase",
+      className: "flex h-full w-full items-center justify-center uppercase select-none",
       style: {
         fontSize: `${fontSize}px`,
         lineHeight: 1

package/dist/esm/components/code-block/dist/index.js

@@ -1,6 +1,6 @@
 import React, { memo, useState, useEffect } from "react";
 import { useEventCallback } from "usehooks-ts";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { codeToHtml } from "shiki";
 import { IconButton } from "../../icon-button/dist/index.js";
 import { FileCode, CircleCirclehecirclek, ClipboardSmall, Enlarge, ChevronUpSmall, ChevronDownSmall } from "@choiceform/icons-react";
@@ -165,10 +165,10 @@ var CodeBlock = memo(function CodeBlock2(props) {
     expandable = true,
     defaultExpanded = true,
     defaultCodeExpanded = false,
+    variant = "default",
     onExpandChange,
     onCodeExpandChange
   } = props;
-  const theme = useTheme();
   const { scrollRef, contentRef, scrollToBottom } = useStickToBottom({
     resize: "smooth",
     initial: "smooth"
@@ -233,7 +233,7 @@ var CodeBlock = memo(function CodeBlock2(props) {
       handleCopy,
       scrollRef,
       contentRef,
-      theme
+      variant
     }),
     [
       language,
@@ -250,7 +250,7 @@ var CodeBlock = memo(function CodeBlock2(props) {
       handleCopy,
       scrollRef,
       contentRef,
-      theme
+      variant
     ]
   );
   const injectedChildren = React.useMemo(() => {
@@ -274,7 +274,10 @@ var CodeBlock = memo(function CodeBlock2(props) {
     "div",
     {
       className: tcx(
-        "bg-secondary-background group relative overflow-hidden rounded-lg",
+        "group relative overflow-hidden rounded-lg",
+        variant === "default" && "bg-secondary-background",
+        variant === "light" && "bg-gray-100",
+        variant === "dark" && "bg-gray-700",
         className
       ),
       children: injectedChildren
@@ -285,14 +288,10 @@ var codeBlockCodeTv = tcv({
   base: "text-message-code w-fit min-w-full bg-transparent font-mono [&>pre]:!bg-transparent [&>pre]:px-4 [&>pre]:py-4"
 });
 var CodeBlockCode = memo(function CodeBlockCode2(props) {
-  const {
-    code,
-    language = "tsx",
-    className,
-    codeBlock: _,
-    ...rest
-  } = props;
-  const theme = useTheme();
+  const { code, language = "tsx", className, variant: variantProp, codeBlock, ...rest } = props;
+  const systemTheme = useTheme();
+  const resolvedVariant = variantProp ?? ((codeBlock == null ? void 0 : codeBlock.variant) === "default" ? void 0 : codeBlock == null ? void 0 : codeBlock.variant);
+  const theme = resolvedVariant ?? systemTheme;
   const [highlightedHtml, setHighlightedHtml] = useState(null);
   useEffect(() => {
     async function highlight() {
@@ -1072,7 +1071,7 @@ var CodeBlockFooter = memo(function CodeBlockFooter2(props) {
 var codeBlockTv = tcv({
   slots: {
     code: "overflow-hidden",
-    content: "flex w-fit flex-col overflow-clip p-4"
+    content: "flex w-fit flex-col overflow-clip p-[inherit]"
   }
 });
 function CodeBlockContent(props) {
@@ -1087,11 +1086,13 @@ function CodeBlockContent(props) {
   }
   const tv = codeBlockTv();
   const shouldLimitHeight = lineCount > lineThreshold && !codeExpanded;
-  return /* @__PURE__ */ jsx("div", { className: tcx(tv.code(), className), children: withScrollArea ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Fragment, { children: withScrollArea ? /* @__PURE__ */ jsx(
     ScrollArea,
     {
       orientation: "both",
       hoverBoundary: "none",
+      className: tcx(tv.code(), className),
+      variant: codeBlock.variant,
       children: /* @__PURE__ */ jsx(
         ScrollArea.Viewport,
         {
@@ -1108,7 +1109,8 @@ function CodeBlockContent(props) {
                 CodeBlockCode,
                 {
                   code,
-                  language
+                  language,
+                  codeBlock
                 }
               )
             }
@@ -1116,11 +1118,12 @@ function CodeBlockContent(props) {
         }
       )
     }
-  ) : /* @__PURE__ */ jsx("div", { className: tv.content(), children: /* @__PURE__ */ jsx(
+  ) : /* @__PURE__ */ jsx("div", { className: tcx(tv.content(), className), children: /* @__PURE__ */ jsx(
     CodeBlockCode,
     {
       code,
-      language
+      language,
+      codeBlock
     }
   ) }) });
 }

package/dist/esm/components/icon-button/dist/index.js

@@ -156,48 +156,47 @@ var iconButtonGroupTv = tcv({
     button: ["flex-1", "rounded-none first:rounded-l-md last:rounded-r-md", "w-full min-w-6"]
   }
 });
-var IconButton = forwardRef(
-  function IconButton2(props, ref) {
-    const {
-      className,
-      children,
-      disabled,
-      readOnly = false,
-      active,
-      loading,
-      focused,
-      variant = "default",
-      size = "default",
-      tooltip,
-      asChild,
-      onClick,
-      ...rest
-    } = props;
-    const Button = asChild ? Slot : "button";
-    const style = iconButtonTv({
-      disabled,
-      active,
-      focused,
-      loading,
-      variant,
-      size
-    });
-    const handleClick = readOnly ? void 0 : onClick;
-    const button = /* @__PURE__ */ jsx(
-      Button,
-      {
-        ...rest,
-        ref,
-        type: rest.type || "button",
-        className: tcx(style.button(), className),
-        disabled: disabled || loading,
-        onClick: handleClick,
-        children: loading ? /* @__PURE__ */ jsx(LoaderCircle, { className: "animate-spin" }) : children
-      }
-    );
-    return tooltip ? /* @__PURE__ */ jsx(Tooltip, { ...tooltip, children: button }) : button;
-  }
-);
+var IconButton = forwardRef(function IconButton2(props, ref) {
+  const {
+    as = "button",
+    className,
+    children,
+    disabled,
+    readOnly = false,
+    active,
+    loading,
+    focused,
+    variant = "default",
+    size = "default",
+    tooltip,
+    asChild,
+    onClick,
+    ...rest
+  } = props;
+  const As = asChild ? Slot : as;
+  const style = iconButtonTv({
+    disabled,
+    active,
+    focused,
+    loading,
+    variant,
+    size
+  });
+  const handleClick = readOnly ? void 0 : onClick;
+  const button = /* @__PURE__ */ jsx(
+    As,
+    {
+      ...rest,
+      ref,
+      type: rest.type || "button",
+      className: tcx(style.button(), className),
+      disabled: disabled || loading,
+      onClick: handleClick,
+      children: loading ? /* @__PURE__ */ jsx(LoaderCircle, { className: "animate-spin" }) : children
+    }
+  );
+  return tooltip ? /* @__PURE__ */ jsx(Tooltip, { ...tooltip, children: button }) : button;
+});
 IconButton.displayName = "IconButton";
 var IconButtonGroup = forwardRef((props, ref) => {
   const { children, className, variant = "solid", ...rest } = props;

package/dist/esm/components/menus/dist/index.js

@@ -1133,7 +1133,6 @@ export {
   MenuTrigger,
   MenuValue,
   Menus,
-  MenusBase,
   useMenuBaseRefs,
   useMenuScroll,
   useMenuScrollHeight,

package/dist/esm/components/multi-select/dist/index.js

@@ -64,6 +64,25 @@ var multiSelectTriggerTv = tcv({
     hasValues: false
   }
 });
+var multiSelectTv = tcv({
+  slots: {
+    validationMessage: "bg-menu-background absolute top-[calc(100%+4px)] right-0 left-0 rounded-xl px-3 py-2 text-white"
+  },
+  variants: {
+    variant: {
+      default: {
+        validationMessage: "bg-menu-background text-white"
+      },
+      light: {
+        validationMessage: "bg-white text-gray-900"
+      },
+      reset: {}
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
 var MultiSelectTrigger = memo(
   forwardRef((props, ref) => {
     const {
@@ -406,6 +425,7 @@ var MultiSelectComponent = memo(
       root,
       variant = "default"
     } = props;
+    const tv = multiSelectTv();
     const [itemElements, triggerElement, contentElement] = useMemo(() => {
       if (!children) return [[], null, null];
       const childrenArray = Children.toArray(children);
@@ -798,7 +818,7 @@ var MultiSelectComponent = memo(
                               },
                               dir
                             )),
-                            showValidationMessage && validationMessage && /* @__PURE__ */ jsx("div", { className: "text-secondary-foreground px-3 py-2", children: validationMessage })
+                            showValidationMessage && validationMessage && /* @__PURE__ */ jsx("div", { className: tv.validationMessage({ variant }), children: validationMessage })
                           ]
                         }
                       )
@@ -832,10 +852,5 @@ var MultiSelect2 = Object.assign(BaseMultiSelect, {
 MultiSelect2.displayName = "MultiSelect";
 export {
   MultiSelect2 as MultiSelect,
-  MultiSelectTrigger,
-  extractItemElements,
-  filterSelectableOptions,
-  processOptions,
-  useMultiSelectSelection,
-  useMultiSelectState
+  MultiSelectTrigger
 };

package/dist/esm/components/segmented/dist/index.js

@@ -364,6 +364,5 @@ var Segmented = Object.assign(SegmentedForwardRef, {
   Item: SegmentedItem
 });
 export {
-  Segmented,
-  useSegmentedContext
+  Segmented
 };

package/dist/esm/components/tabs/dist/index.js

@@ -27,6 +27,7 @@ var tabsTv = tcv({
       default: {},
       light: {},
       dark: {},
+      accent: {},
       reset: {}
     },
     active: {
@@ -128,6 +129,36 @@ var tabsTv = tcv({
       class: {
         tab: "text-white/50"
       }
+    },
+    // Accent
+    {
+      variant: "accent",
+      active: false,
+      class: {
+        tab: "text-default-foreground"
+      }
+    },
+    {
+      variant: "accent",
+      active: true,
+      class: {
+        tab: "bg-selected-background text-accent-foreground"
+      }
+    },
+    {
+      variant: "accent",
+      disabled: false,
+      active: false,
+      class: {
+        tab: "hover:bg-secondary-background"
+      }
+    },
+    {
+      variant: "accent",
+      disabled: true,
+      class: {
+        tab: "text-secondary-foreground"
+      }
     }
   ],
   defaultVariants: {
@@ -138,6 +169,7 @@ var tabsTv = tcv({
 });
 var TabItem = memo(
   forwardRef(function TabItem2({
+    as = "button",
     children,
     value,
     disabled,
@@ -183,8 +215,9 @@ var TabItem = memo(
         onKeyDown(e);
       }
     });
+    const As = as ?? "button";
     return /* @__PURE__ */ jsx(
-      "button",
+      As,
       {
         ref,
         role: "tab",
@@ -217,6 +250,7 @@ var TabItem = memo(
 TabItem.displayName = "TabItem";
 var TabsRoot = forwardRef(function Tabs(props, ref) {
   const {
+    as = "div",
     value: valueProp,
     onChange,
     className,
@@ -232,6 +266,8 @@ var TabsRoot = forwardRef(function Tabs(props, ref) {
     if (readOnly) return;
     onChange == null ? void 0 : onChange(newValue);
   });
+  const As = as ?? "div";
+  const divProps = As === "div" ? { role: "tablist" } : {};
   const tv = tabsTv({ variant });
   return /* @__PURE__ */ jsx(
     TabsContext.Provider,
@@ -245,14 +281,14 @@ var TabsRoot = forwardRef(function Tabs(props, ref) {
         id
       },
       children: /* @__PURE__ */ jsx(
-        "div",
+        As,
         {
           ref,
-          role: "tablist",
           "aria-orientation": "horizontal",
           "aria-disabled": disabled,
           "aria-label": ariaLabel || "Tabs",
           className: tcx(tv.root(), className),
+          ...divProps,
           ...rest,
           children
         }
@@ -265,6 +301,5 @@ var Tabs2 = TabsRoot;
 Tabs2.Item = TabItem;
 export {
   TabItem,
-  Tabs2 as Tabs,
-  useTabsContext
+  Tabs2 as Tabs
 };