@moduix/react 2.1.0 → 2.2.4

package/dist/components/toggle/Toggle.module.js

@@ -1,8 +1,6 @@
-import './Toggle.css';
-//#region src/components/toggle/Toggle.module.css
-var Toggle_module_default = {
-	"indicator": "aGZbbW_indicator",
-	"root": "aGZbbW_root"
+import "./Toggle_module.css";
+const Toggle_module = {
+    root: "root-FOmqpM",
+    indicator: "indicator-zhyTn2"
 };
-//#endregion
-export { Toggle_module_default as default };
+export default Toggle_module;

package/dist/components/toggle/Toggle_module.css

@@ -0,0 +1,169 @@
+@layer moduix.components {
+  .root-FOmqpM {
+    box-sizing: border-box;
+    justify-content: center;
+    align-items: center;
+    gap: var(--moduix-toggle-content-gap, var(--moduix-spacing-2));
+    min-height: var(--moduix-toggle-size-md, var(--moduix-size-md));
+    border-style: solid;
+    border-width: var(--moduix-toggle-border-width, var(--moduix-border-width-sm));
+    border-radius: var(--moduix-toggle-radius, var(--moduix-radius-md));
+    padding-block: var(--moduix-toggle-padding-y-md, var(--moduix-spacing-1));
+    padding-inline: var(--moduix-toggle-padding-x-md, var(--moduix-spacing-4));
+    color: var(--moduix-toggle-color, var(--moduix-color-foreground));
+    appearance: none;
+    font: inherit;
+    font-size: var(--moduix-toggle-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-toggle-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-toggle-line-height, var(--moduix-line-height-text-sm));
+    -webkit-user-select: none;
+    user-select: none;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: background-color var(--moduix-toggle-transition, var(--moduix-transition-default)),
+      border-color var(--moduix-toggle-transition, var(--moduix-transition-default)),
+      color var(--moduix-toggle-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-toggle-transition, var(--moduix-transition-default));
+    background-color: #0000;
+    border-color: #0000;
+    margin: 0;
+    display: inline-flex;
+  }
+
+  .root-FOmqpM:focus-visible {
+    outline: var(--moduix-toggle-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
+        solid var(--moduix-toggle-focus-ring-color, var(--moduix-color-ring));
+    outline-offset: var(--moduix-toggle-focus-ring-offset, var(--moduix-focus-ring-inset-offset));
+  }
+
+  .root-FOmqpM[data-disabled] {
+    opacity: var(--moduix-toggle-disabled-opacity, var(--moduix-opacity-disabled));
+    cursor: default;
+    pointer-events: none;
+  }
+
+  .root-FOmqpM > :where(svg), .root-FOmqpM [data-slot="toggle-indicator"] > :where(svg) {
+    width: var(--moduix-toggle-icon-size, var(--moduix-spacing-4));
+    height: var(--moduix-toggle-icon-size, var(--moduix-spacing-4));
+    flex-shrink: 0;
+    display: block;
+  }
+
+  .root-FOmqpM[data-variant="default"] {
+    border-color: var(--moduix-toggle-default-border-color, var(--moduix-color-secondary));
+    background-color: var(--moduix-toggle-default-bg, var(--moduix-color-secondary));
+    color: var(--moduix-toggle-default-color, var(--moduix-toggle-color, var(--moduix-color-secondary-foreground)));
+  }
+
+  @media (hover: hover) {
+    .root-FOmqpM[data-variant="default"][data-state="off"]:not([data-disabled]):hover {
+      background-color: var(--moduix-toggle-default-bg-hover, var(--moduix-color-accent));
+    }
+  }
+
+  .root-FOmqpM[data-variant="default"][data-state="off"]:not([data-disabled]):active {
+    background-color: var(--moduix-toggle-default-bg-active, var(--moduix-color-accent));
+  }
+
+  .root-FOmqpM[data-variant="default"][data-state="on"] {
+    border-color: var(--moduix-toggle-default-border-color-pressed, var(--moduix-color-primary));
+    background-color: var(--moduix-toggle-default-bg-pressed, var(--moduix-color-primary));
+    color: var(--moduix-toggle-default-color-pressed, var(--moduix-color-primary-foreground));
+  }
+
+  .root-FOmqpM[data-variant="outline"] {
+    border-color: var(--moduix-toggle-outline-border-color, var(--moduix-color-border));
+    background-color: var(--moduix-toggle-outline-bg, var(--moduix-color-background));
+    color: var(--moduix-toggle-outline-color, var(--moduix-toggle-color, var(--moduix-color-foreground)));
+  }
+
+  @media (hover: hover) {
+    .root-FOmqpM[data-variant="outline"][data-state="off"]:not([data-disabled]):hover {
+      background-color: var(--moduix-toggle-outline-bg-hover, var(--moduix-color-accent));
+    }
+  }
+
+  .root-FOmqpM[data-variant="outline"][data-state="off"]:not([data-disabled]):active {
+    background-color: var(--moduix-toggle-outline-bg-active, var(--moduix-color-accent));
+  }
+
+  .root-FOmqpM[data-variant="outline"][data-state="on"] {
+    border-color: var(--moduix-toggle-outline-border-color-pressed, var(--moduix-color-primary));
+    background-color: var(--moduix-toggle-outline-bg-pressed, var(--moduix-color-primary));
+    color: var(--moduix-toggle-outline-color-pressed, var(--moduix-color-primary-foreground));
+  }
+
+  .root-FOmqpM[data-variant="ghost"] {
+    border-color: var(--moduix-toggle-ghost-border-color, transparent);
+    background-color: var(--moduix-toggle-ghost-bg, transparent);
+    color: var(--moduix-toggle-ghost-color, var(--moduix-toggle-color, var(--moduix-color-foreground)));
+  }
+
+  @media (hover: hover) {
+    .root-FOmqpM[data-variant="ghost"][data-state="off"]:not([data-disabled]):hover {
+      background-color: var(--moduix-toggle-ghost-bg-hover, var(--moduix-color-accent));
+    }
+  }
+
+  .root-FOmqpM[data-variant="ghost"][data-state="off"]:not([data-disabled]):active {
+    background-color: var(--moduix-toggle-ghost-bg-active, var(--moduix-color-accent));
+  }
+
+  .root-FOmqpM[data-variant="ghost"][data-state="on"] {
+    background-color: var(--moduix-toggle-ghost-bg-pressed, var(--moduix-color-accent));
+    color: var(--moduix-toggle-ghost-color-pressed, var(--moduix-color-foreground));
+  }
+
+  .root-FOmqpM[data-size="xs"] {
+    min-height: var(--moduix-toggle-size-xs, var(--moduix-size-xs));
+    padding-block: var(--moduix-toggle-padding-y-xs, var(--moduix-spacing-0-5));
+    padding-inline: var(--moduix-toggle-padding-x-xs, var(--moduix-spacing-2-5));
+    font-size: var(--moduix-toggle-font-size-xs, var(--moduix-text-xs));
+    line-height: var(--moduix-toggle-line-height-xs, var(--moduix-line-height-text-xs));
+  }
+
+  .root-FOmqpM[data-size="sm"] {
+    min-height: var(--moduix-toggle-size-sm, var(--moduix-size-sm));
+    padding-block: var(--moduix-toggle-padding-y-sm, var(--moduix-spacing-1));
+    padding-inline: var(--moduix-toggle-padding-x-sm, var(--moduix-spacing-3));
+  }
+
+  .root-FOmqpM[data-size="lg"] {
+    min-height: var(--moduix-toggle-size-lg, var(--moduix-size-lg));
+    padding-block: var(--moduix-toggle-padding-y-lg, var(--moduix-spacing-1-5));
+    padding-inline: var(--moduix-toggle-padding-x-lg, var(--moduix-spacing-5));
+    font-size: var(--moduix-toggle-font-size-lg, var(--moduix-text-md));
+    line-height: var(--moduix-toggle-line-height-lg, var(--moduix-line-height-text-md));
+  }
+
+  .root-FOmqpM[data-size="icon-sm"], .root-FOmqpM[data-size="icon-md"], .root-FOmqpM[data-size="icon-lg"] {
+    gap: 0;
+    padding: 0;
+  }
+
+  .root-FOmqpM[data-size="icon-sm"] {
+    width: var(--moduix-toggle-size-icon-sm, var(--moduix-size-sm));
+    min-width: var(--moduix-toggle-size-icon-sm, var(--moduix-size-sm));
+    height: var(--moduix-toggle-size-icon-sm, var(--moduix-size-sm));
+  }
+
+  .root-FOmqpM[data-size="icon-md"] {
+    width: var(--moduix-toggle-size-icon-md, var(--moduix-size-md));
+    min-width: var(--moduix-toggle-size-icon-md, var(--moduix-size-md));
+    height: var(--moduix-toggle-size-icon-md, var(--moduix-size-md));
+  }
+
+  .root-FOmqpM[data-size="icon-lg"] {
+    width: var(--moduix-toggle-size-icon-lg, var(--moduix-size-lg));
+    min-width: var(--moduix-toggle-size-icon-lg, var(--moduix-size-lg));
+    height: var(--moduix-toggle-size-icon-lg, var(--moduix-size-lg));
+  }
+
+  .indicator-zhyTn2 {
+    color: inherit;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+}
+

package/dist/components/toggle/index.d.ts

@@ -1,2 +1,2 @@
-import { Toggle, useToggleContext } from "./Toggle.js";
-export { Toggle, useToggleContext };
+export { Toggle, useToggleContext } from './Toggle.js';
+export type { ToggleRootProps, ToggleSize, ToggleVariant } from './Toggle.js';

package/dist/components/toggle/index.js

@@ -0,0 +1 @@
+export { Toggle, useToggleContext } from "./Toggle.js";

package/dist/components/toggle-group/ToggleGroup.d.ts

@@ -1,26 +1,24 @@
-import { ComponentProps } from "react";
-import { ToggleGroup, useToggleGroup, useToggleGroupContext } from "@ark-ui/react/toggle-group";
-
-//#region src/components/toggle-group/ToggleGroup.d.ts
+import { ToggleGroup as ToggleGroupPrimitive, useToggleGroup, useToggleGroupContext } from '@ark-ui/react/toggle-group';
+import type { ComponentProps } from 'react';
 type ToggleVariant = 'default' | 'outline' | 'ghost';
 type ToggleSize = 'xs' | 'sm' | 'md' | 'lg' | 'icon-sm' | 'icon-md' | 'icon-lg';
-type ToggleGroupRootProps = ComponentProps<typeof ToggleGroup.Root> & {
-  variant?: ToggleVariant;
-  size?: ToggleSize;
+type ToggleGroupRootProps = ComponentProps<typeof ToggleGroupPrimitive.Root> & {
+    variant?: ToggleVariant;
+    size?: ToggleSize;
 };
-type ToggleGroupRootProviderProps = ComponentProps<typeof ToggleGroup.RootProvider> & {
-  variant?: ToggleVariant;
-  size?: ToggleSize;
+type ToggleGroupRootProviderProps = ComponentProps<typeof ToggleGroupPrimitive.RootProvider> & {
+    variant?: ToggleVariant;
+    size?: ToggleSize;
 };
-type ToggleGroupItemProps = ComponentProps<typeof ToggleGroup.Item> & {
-  variant?: ToggleVariant;
-  size?: ToggleSize;
+type ToggleGroupItemProps = ComponentProps<typeof ToggleGroupPrimitive.Item> & {
+    variant?: ToggleVariant;
+    size?: ToggleSize;
 };
-declare const ToggleGroup$1: import("react").ForwardRefExoticComponent<Omit<ToggleGroupRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
-  Root: import("react").ForwardRefExoticComponent<Omit<ToggleGroupRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  RootProvider: import("react").ForwardRefExoticComponent<Omit<ToggleGroupRootProviderProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Context: (props: ToggleGroup.ContextProps) => import("react").ReactNode;
-  Item: import("react").ForwardRefExoticComponent<Omit<ToggleGroupItemProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+declare const ToggleGroup: import("react").ForwardRefExoticComponent<Omit<ToggleGroupRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<ToggleGroupRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    RootProvider: import("react").ForwardRefExoticComponent<Omit<ToggleGroupRootProviderProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Context: (props: ToggleGroupPrimitive.ContextProps) => import("react").ReactNode;
+    Item: import("react").ForwardRefExoticComponent<Omit<ToggleGroupItemProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 };
-//#endregion
-export { ToggleGroup$1 as ToggleGroup, useToggleGroup, useToggleGroupContext };
+export { ToggleGroup, useToggleGroup, useToggleGroupContext };
+export type { ToggleGroupItemProps, ToggleGroupRootProps, ToggleGroupRootProviderProps, ToggleSize, ToggleVariant, };

package/dist/components/toggle-group/ToggleGroup.js

@@ -1,63 +1,63 @@
-import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
-import Toggle_module_default from "../toggle/Toggle.module.js";
-import ToggleGroup_module_default from "./ToggleGroup.module.js";
-import { clsx } from "clsx";
-import { createContext, forwardRef, useContext } from "react";
+"use client";
 import { jsx } from "react/jsx-runtime";
 import { ToggleGroup, useToggleGroup, useToggleGroupContext } from "@ark-ui/react/toggle-group";
-//#region src/components/toggle-group/ToggleGroup.tsx
-const ToggleGroupStyleContext = createContext({
-	variant: "default",
-	size: "md"
-});
-const ToggleGroupRoot = forwardRef(function ToggleGroupRoot({ className, variant = "default", size = "md", ...props }, ref) {
-	return /* @__PURE__ */ jsx(ToggleGroupStyleContext.Provider, {
-		value: {
-			variant,
-			size
-		},
-		children: /* @__PURE__ */ jsx(ToggleGroup.Root, {
-			ref,
-			"data-slot": "toggle-group-root",
-			"data-variant": variant,
-			"data-size": size,
-			className: clsx(ToggleGroup_module_default.root, normalizeClassName(className)),
-			...props
-		})
-	});
+import { clsx } from "clsx";
+import { createContext, forwardRef, useContext } from "react";
+import { normalizeClassName } from "../../internal/normalizeClassName.js";
+import Toggle_module from "../toggle/Toggle.module.js";
+import ToggleGroup_module from "./ToggleGroup.module.js";
+const defaultToggleGroupStyles = {
+    variant: 'default',
+    size: 'md'
+};
+const ToggleGroupStyleContext = /*#__PURE__*/ createContext(defaultToggleGroupStyles);
+const ToggleGroup_ToggleGroupRoot = /*#__PURE__*/ forwardRef(function({ className, variant = 'default', size = 'md', ...props }, ref) {
+    return /*#__PURE__*/ jsx(ToggleGroupStyleContext.Provider, {
+        value: {
+            variant,
+            size
+        },
+        children: /*#__PURE__*/ jsx(ToggleGroup.Root, {
+            ...props,
+            ref: ref,
+            "data-slot": "toggle-group-root",
+            "data-variant": variant,
+            "data-size": size,
+            className: clsx(ToggleGroup_module.root, normalizeClassName(className))
+        })
+    });
 });
-const ToggleGroupRootProvider = forwardRef(function ToggleGroupRootProvider({ className, variant = "default", size = "md", ...props }, ref) {
-	return /* @__PURE__ */ jsx(ToggleGroupStyleContext.Provider, {
-		value: {
-			variant,
-			size
-		},
-		children: /* @__PURE__ */ jsx(ToggleGroup.RootProvider, {
-			ref,
-			"data-slot": "toggle-group-root-provider",
-			"data-variant": variant,
-			"data-size": size,
-			className: clsx(ToggleGroup_module_default.root, normalizeClassName(className)),
-			...props
-		})
-	});
+const ToggleGroup_ToggleGroupRootProvider = /*#__PURE__*/ forwardRef(function({ className, variant = 'default', size = 'md', ...props }, ref) {
+    return /*#__PURE__*/ jsx(ToggleGroupStyleContext.Provider, {
+        value: {
+            variant,
+            size
+        },
+        children: /*#__PURE__*/ jsx(ToggleGroup.RootProvider, {
+            ...props,
+            ref: ref,
+            "data-slot": "toggle-group-root-provider",
+            "data-variant": variant,
+            "data-size": size,
+            className: clsx(ToggleGroup_module.root, normalizeClassName(className))
+        })
+    });
 });
-const ToggleGroupItem = forwardRef(function ToggleGroupItem({ className, variant, size, ...props }, ref) {
-	const inherited = useContext(ToggleGroupStyleContext);
-	return /* @__PURE__ */ jsx(ToggleGroup.Item, {
-		ref,
-		"data-slot": "toggle-group-item",
-		"data-variant": variant ?? inherited.variant,
-		"data-size": size ?? inherited.size,
-		className: clsx(Toggle_module_default.root, ToggleGroup_module_default.item, normalizeClassName(className)),
-		...props
-	});
+const ToggleGroup_ToggleGroupItem = /*#__PURE__*/ forwardRef(function({ className, variant, size, ...props }, ref) {
+    const inherited = useContext(ToggleGroupStyleContext);
+    return /*#__PURE__*/ jsx(ToggleGroup.Item, {
+        ...props,
+        ref: ref,
+        "data-slot": "toggle-group-item",
+        "data-variant": variant ?? inherited.variant,
+        "data-size": size ?? inherited.size,
+        className: clsx(Toggle_module.root, ToggleGroup_module.item, normalizeClassName(className))
+    });
 });
-const ToggleGroup$1 = Object.assign(ToggleGroupRoot, {
-	Root: ToggleGroupRoot,
-	RootProvider: ToggleGroupRootProvider,
-	Context: ToggleGroup.Context,
-	Item: ToggleGroupItem
+const ToggleGroup_ToggleGroup = Object.assign(ToggleGroup_ToggleGroupRoot, {
+    Root: ToggleGroup_ToggleGroupRoot,
+    RootProvider: ToggleGroup_ToggleGroupRootProvider,
+    Context: ToggleGroup.Context,
+    Item: ToggleGroup_ToggleGroupItem
 });
-//#endregion
-export { ToggleGroup$1 as ToggleGroup, useToggleGroup, useToggleGroupContext };
+export { ToggleGroup_ToggleGroup as ToggleGroup, useToggleGroup, useToggleGroupContext };

package/dist/components/toggle-group/ToggleGroup.module.js

@@ -1,8 +1,6 @@
-import './ToggleGroup.css';
-//#region src/components/toggle-group/ToggleGroup.module.css
-var ToggleGroup_module_default = {
-	"item": "un9nBW_item",
-	"root": "un9nBW_root"
+import "./ToggleGroup_module.css";
+const ToggleGroup_module = {
+    root: "root-HI0WAX",
+    item: "item-RRrFoz"
 };
-//#endregion
-export { ToggleGroup_module_default as default };
+export default ToggleGroup_module;

package/dist/components/toggle-group/ToggleGroup_module.css

@@ -0,0 +1,46 @@
+@layer moduix.components {
+  .root-HI0WAX {
+    box-sizing: border-box;
+    overscroll-behavior-inline: contain;
+    align-items: center;
+    gap: var(--moduix-toggle-group-gap, var(--moduix-border-width-sm));
+    max-inline-size: 100%;
+    padding: var(--moduix-toggle-group-padding, var(--moduix-border-width-md));
+    border: var(--moduix-toggle-group-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-toggle-group-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-toggle-group-radius, var(--moduix-radius-lg));
+    background-color: var(--moduix-toggle-group-bg, var(--moduix-color-muted));
+    color: var(--moduix-toggle-group-color, var(--moduix-color-foreground));
+    display: inline-flex;
+    overflow-x: auto;
+  }
+
+  .root-HI0WAX[data-orientation="vertical"] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .root-HI0WAX[data-orientation="vertical"] > .item-RRrFoz {
+    justify-content: flex-start;
+    width: 100%;
+  }
+
+  .root-HI0WAX[data-variant="ghost"] {
+    --moduix-toggle-group-bg: var(--moduix-toggle-group-ghost-bg, transparent);
+    --moduix-toggle-group-border-color: var(--moduix-toggle-group-ghost-border-color, transparent);
+    --moduix-toggle-group-padding: var(--moduix-toggle-group-ghost-padding, 0);
+  }
+
+  .root-HI0WAX[data-variant="outline"] {
+    --moduix-toggle-group-bg: var(--moduix-toggle-group-outline-bg, var(--moduix-color-background));
+  }
+
+  .item-RRrFoz {
+    border-radius: var(--moduix-toggle-group-item-radius, var(--moduix-radius-md));
+    --moduix-toggle-default-color: var(--moduix-toggle-group-color, var(--moduix-color-foreground));
+    --moduix-toggle-ghost-color: var(--moduix-toggle-group-color, var(--moduix-color-foreground));
+    --moduix-toggle-outline-color: var(--moduix-toggle-group-color, var(--moduix-color-foreground));
+    flex: none;
+  }
+}
+

package/dist/components/toggle-group/index.d.ts

@@ -1,2 +1 @@
-import { ToggleGroup, useToggleGroup, useToggleGroupContext } from "./ToggleGroup.js";
-export { ToggleGroup, useToggleGroup, useToggleGroupContext };
+export { ToggleGroup, useToggleGroup, useToggleGroupContext } from './ToggleGroup.js';

package/dist/components/toggle-group/index.js

@@ -0,0 +1 @@
+export { ToggleGroup, useToggleGroup, useToggleGroupContext } from "./ToggleGroup.js";

package/dist/components/tooltip/Tooltip.d.ts

@@ -1,29 +1,20 @@
-import { OverlayPortalProps } from "../../lib/moduix/overlayPortal.js";
-import { ComponentProps } from "react";
-import { Tooltip, useTooltip, useTooltipContext } from "@ark-ui/react/tooltip";
-
-//#region src/components/tooltip/Tooltip.d.ts
-type TooltipRootProps = ComponentProps<typeof Tooltip.Root> & OverlayPortalProps;
-type TooltipRootProviderProps = ComponentProps<typeof Tooltip.RootProvider> & OverlayPortalProps;
-declare function TooltipRoot({
-  portalled,
-  portalRef,
-  ...props
-}: TooltipRootProps): import("react").JSX.Element;
-declare function TooltipRootProvider({
-  portalled,
-  portalRef,
-  ...props
-}: TooltipRootProviderProps): import("react").JSX.Element;
-declare const Tooltip$1: typeof TooltipRoot & {
-  Root: typeof TooltipRoot;
-  RootProvider: typeof TooltipRootProvider;
-  Trigger: import("react").ForwardRefExoticComponent<Omit<Tooltip.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  Body: import("react").ForwardRefExoticComponent<Omit<Tooltip.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Positioner: import("react").ForwardRefExoticComponent<Omit<Tooltip.PositionerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Content: import("react").ForwardRefExoticComponent<Omit<Tooltip.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Arrow: import("react").ForwardRefExoticComponent<Omit<Tooltip.ArrowProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  ArrowTip: import("react").ForwardRefExoticComponent<Omit<Tooltip.ArrowTipProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+import { Tooltip as TooltipPrimitive, useTooltip, useTooltipContext } from '@ark-ui/react/tooltip';
+import type { ComponentProps } from 'react';
+import { type OverlayPortalProps } from '../../internal/overlayPortal';
+type TooltipRootProps = ComponentProps<typeof TooltipPrimitive.Root> & OverlayPortalProps;
+type TooltipRootProviderProps = ComponentProps<typeof TooltipPrimitive.RootProvider> & OverlayPortalProps;
+declare function TooltipRoot({ lazyMount, portalled, portalRef, unmountOnExit, ...props }: TooltipRootProps): import("react").JSX.Element;
+declare function TooltipRootProvider({ lazyMount, portalled, portalRef, unmountOnExit, ...props }: TooltipRootProviderProps): import("react").JSX.Element;
+declare const Tooltip: typeof TooltipRoot & {
+    Root: typeof TooltipRoot;
+    RootProvider: typeof TooltipRootProvider;
+    Context: (props: TooltipPrimitive.ContextProps) => import("react").ReactNode;
+    Trigger: import("react").ForwardRefExoticComponent<Omit<TooltipPrimitive.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    DisabledTrigger: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    Body: import("react").ForwardRefExoticComponent<Omit<TooltipPrimitive.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Positioner: import("react").ForwardRefExoticComponent<Omit<TooltipPrimitive.PositionerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<Omit<TooltipPrimitive.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Arrow: import("react").ForwardRefExoticComponent<Omit<TooltipPrimitive.ArrowProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ArrowTip: import("react").ForwardRefExoticComponent<Omit<TooltipPrimitive.ArrowTipProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 };
-//#endregion
-export { Tooltip$1 as Tooltip, useTooltip, useTooltipContext };
+export { Tooltip, useTooltip, useTooltipContext };