@moduix/react 2.5.1 → 2.6.0

package/dist/components/select/Select.d.ts

@@ -1,12 +1,8 @@
 import { Select as SelectPrimitive, type SelectRootComponent as ArkSelectRootComponent, type SelectRootProviderComponent as ArkSelectRootProviderComponent, useSelect, useSelectContext, useSelectItemContext } from '@ark-ui/react/select';
 import type { ComponentProps, ReactNode } from 'react';
-import { type OverlayPortalProps } from '../../internal/overlayPortal';
-type SelectNativeFormControl = 'select' | 'input';
-type SelectRootOwnProps = OverlayPortalProps & {
-    nativeFormControl?: SelectNativeFormControl;
-};
-type SelectRootComponent = ArkSelectRootComponent<SelectRootOwnProps>;
-type SelectRootProviderComponent = ArkSelectRootProviderComponent<SelectRootOwnProps>;
+import { type OverlayPortalProps } from '../../internal/overlayPortal.js';
+type SelectRootComponent = ArkSelectRootComponent<OverlayPortalProps>;
+type SelectRootProviderComponent = ArkSelectRootProviderComponent<OverlayPortalProps>;
 type SelectFieldProps = Omit<ComponentProps<typeof SelectPrimitive.Control>, 'asChild' | 'children'> & {
     clearLabel?: string;
     indicator?: ReactNode;
@@ -16,6 +12,7 @@ declare const Select: SelectRootComponent & {
     Root: SelectRootComponent;
     RootProvider: SelectRootProviderComponent;
     Context: <T extends unknown>(props: SelectPrimitive.ContextProps<T>) => ReactNode;
+    HiddenSelect: import("react").ForwardRefExoticComponent<SelectPrimitive.HiddenSelectProps & import("react").RefAttributes<HTMLSelectElement>>;
     ItemContext: (props: SelectPrimitive.ItemContextProps) => ReactNode;
     useSelect: <T extends unknown>(props: import("@ark-ui/react/select").UseSelectProps<T>) => import("@ark-ui/react/select").UseSelectReturn<T>;
     useSelectContext: () => import("@ark-ui/react/select").UseSelectContext<any>;

package/dist/components/select/Select.js

@@ -1,43 +1,42 @@
 "use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { Select, useSelect, useSelectContext, useSelectItemContext } from "@ark-ui/react/select";
 import { clsx } from "clsx";
-import { Children, cloneElement, forwardRef } from "react";
+import { forwardRef } from "react";
 import { CheckIcon, ChevronUpDownIcon } from "../../internal/icons/ui/index.js";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
 import { CloseButton } from "../close-button/index.js";
 import Select_module from "./Select.module.js";
-const Select_SelectRoot = /*#__PURE__*/ forwardRef(function({ asChild, children, className, lazyMount = true, nativeFormControl = 'select', portalled, portalRef, unmountOnExit = true, ...props }, ref) {
+const Select_SelectRoot = /*#__PURE__*/ forwardRef(function({ asChild, children, className, lazyMount = true, portalled, portalRef, unmountOnExit = true, ...props }, ref) {
     return /*#__PURE__*/ jsx(OverlayPortalProvider, {
         portalled: portalled,
         portalRef: portalRef,
         children: /*#__PURE__*/ jsx(Select.Root, {
             ref: ref,
             "data-slot": "select-root",
-            className: clsx(Select_module.root, normalizeClassName(className)),
+            className: clsx(Select_module.root, className),
             asChild: asChild,
             lazyMount: lazyMount,
             unmountOnExit: unmountOnExit,
             ...props,
-            children: withNativeFormControl(children, asChild, nativeFormControl)
+            children: children
         })
     });
 });
-const Select_SelectRootProvider = /*#__PURE__*/ forwardRef(function({ asChild, children, className, lazyMount = true, nativeFormControl = 'select', portalled, portalRef, unmountOnExit = true, ...props }, ref) {
+const Select_SelectRootProvider = /*#__PURE__*/ forwardRef(function({ asChild, children, className, lazyMount = true, portalled, portalRef, unmountOnExit = true, ...props }, ref) {
     return /*#__PURE__*/ jsx(OverlayPortalProvider, {
         portalled: portalled,
         portalRef: portalRef,
         children: /*#__PURE__*/ jsx(Select.RootProvider, {
             ref: ref,
             "data-slot": "select-root-provider",
-            className: clsx(Select_module.root, normalizeClassName(className)),
+            className: clsx(Select_module.root, className),
             asChild: asChild,
             lazyMount: lazyMount,
             unmountOnExit: unmountOnExit,
             ...props,
-            children: withNativeFormControl(children, asChild, nativeFormControl)
+            children: children
         })
     });
 });
@@ -45,7 +44,7 @@ const Select_SelectLabel = /*#__PURE__*/ forwardRef(function({ className, ...pro
     return /*#__PURE__*/ jsx(Select.Label, {
         ref: ref,
         "data-slot": "select-label",
-        className: clsx(Select_module.label, normalizeClassName(className)),
+        className: clsx(Select_module.label, className),
         ...props
     });
 });
@@ -53,7 +52,7 @@ const Select_SelectControl = /*#__PURE__*/ forwardRef(function({ className, ...p
     return /*#__PURE__*/ jsx(Select.Control, {
         ref: ref,
         "data-slot": "select-control",
-        className: clsx(Select_module.control, normalizeClassName(className)),
+        className: clsx(Select_module.control, className),
         ...props
     });
 });
@@ -62,7 +61,7 @@ const Select_SelectTrigger = /*#__PURE__*/ forwardRef(function({ asChild, classN
         ref: ref,
         "data-slot": "select-trigger",
         asChild: asChild,
-        className: clsx(!asChild && Select_module.trigger, normalizeClassName(className)),
+        className: clsx(!asChild && Select_module.trigger, className),
         ...props
     });
 });
@@ -70,29 +69,21 @@ const Select_SelectValueText = /*#__PURE__*/ forwardRef(function({ className, ..
     return /*#__PURE__*/ jsx(Select.ValueText, {
         ref: ref,
         "data-slot": "select-value-text",
-        className: clsx(Select_module.valueText, normalizeClassName(className)),
+        className: clsx(Select_module.valueText, className),
         ...props
     });
 });
 const Select_SelectClearTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }, ref) {
-    const triggerClassName = clsx(Select_module.clearTrigger, normalizeClassName(className));
-    if (asChild) return /*#__PURE__*/ jsx(Select.ClearTrigger, {
-        ref: ref,
-        asChild: true,
-        "data-slot": "select-clear-trigger",
-        className: triggerClassName,
-        "aria-label": ariaLabel,
-        "aria-labelledby": ariaLabelledBy,
-        ...props,
-        children: children
-    });
+    const triggerClassName = clsx(Select_module.clearTrigger, className);
     return /*#__PURE__*/ jsx(Select.ClearTrigger, {
         ref: ref,
         asChild: true,
         "data-slot": "select-clear-trigger",
         className: triggerClassName,
+        "aria-label": asChild ? ariaLabel : void 0,
+        "aria-labelledby": asChild ? ariaLabelledBy : void 0,
         ...props,
-        children: /*#__PURE__*/ jsx(CloseButton.Root, {
+        children: asChild ? children : /*#__PURE__*/ jsx(CloseButton.Root, {
             "aria-label": ariaLabel ?? (null == ariaLabelledBy ? 'Clear selection' : void 0),
             "aria-labelledby": ariaLabelledBy,
             children: children
@@ -103,7 +94,7 @@ const Select_SelectIndicator = /*#__PURE__*/ forwardRef(function({ className, ch
     return /*#__PURE__*/ jsx(Select.Indicator, {
         ref: ref,
         "data-slot": "select-indicator",
-        className: clsx(Select_module.indicator, normalizeClassName(className)),
+        className: clsx(Select_module.indicator, className),
         ...props,
         children: children ?? /*#__PURE__*/ jsx(ChevronUpDownIcon, {})
     });
@@ -113,18 +104,16 @@ const Select_SelectField = /*#__PURE__*/ forwardRef(function({ clearLabel, indic
         ref: ref,
         ...props,
         children: [
-            /*#__PURE__*/ jsxs(Select_SelectTrigger, {
-                children: [
-                    /*#__PURE__*/ jsx(Select_SelectValueText, {
-                        placeholder: placeholder
-                    }),
-                    /*#__PURE__*/ jsx(Select_SelectIndicator, {
-                        children: indicator
-                    })
-                ]
+            /*#__PURE__*/ jsx(Select_SelectTrigger, {
+                children: /*#__PURE__*/ jsx(Select_SelectValueText, {
+                    placeholder: placeholder
+                })
             }),
             clearLabel && /*#__PURE__*/ jsx(Select_SelectClearTrigger, {
                 "aria-label": clearLabel
+            }),
+            /*#__PURE__*/ jsx(Select_SelectIndicator, {
+                children: indicator
             })
         ]
     });
@@ -134,7 +123,7 @@ const Select_SelectPositioner = /*#__PURE__*/ forwardRef(function({ className, .
         children: /*#__PURE__*/ jsx(Select.Positioner, {
             ref: ref,
             "data-slot": "select-positioner",
-            className: clsx(Select_module.positioner, normalizeClassName(className)),
+            className: clsx(Select_module.positioner, className),
             ...props
         })
     });
@@ -143,7 +132,7 @@ const Select_SelectContent = /*#__PURE__*/ forwardRef(function({ className, ...p
     return /*#__PURE__*/ jsx(Select.Content, {
         ref: ref,
         "data-slot": "select-content",
-        className: clsx(Select_module.content, normalizeClassName(className)),
+        className: clsx(Select_module.content, className),
         ...props
     });
 });
@@ -151,7 +140,7 @@ const Select_SelectList = /*#__PURE__*/ forwardRef(function({ className, ...prop
     return /*#__PURE__*/ jsx(Select.List, {
         ref: ref,
         "data-slot": "select-list",
-        className: clsx(Select_module.list, normalizeClassName(className)),
+        className: clsx(Select_module.list, className),
         ...props
     });
 });
@@ -159,7 +148,7 @@ const Select_SelectItemGroup = /*#__PURE__*/ forwardRef(function({ className, ..
     return /*#__PURE__*/ jsx(Select.ItemGroup, {
         ref: ref,
         "data-slot": "select-item-group",
-        className: clsx(Select_module.itemGroup, normalizeClassName(className)),
+        className: clsx(Select_module.itemGroup, className),
         ...props
     });
 });
@@ -167,7 +156,7 @@ const Select_SelectItemGroupLabel = /*#__PURE__*/ forwardRef(function({ classNam
     return /*#__PURE__*/ jsx(Select.ItemGroupLabel, {
         ref: ref,
         "data-slot": "select-item-group-label",
-        className: clsx(Select_module.itemGroupLabel, normalizeClassName(className)),
+        className: clsx(Select_module.itemGroupLabel, className),
         ...props
     });
 });
@@ -175,7 +164,7 @@ const Select_SelectItem = /*#__PURE__*/ forwardRef(function({ className, ...prop
     return /*#__PURE__*/ jsx(Select.Item, {
         ref: ref,
         "data-slot": "select-item",
-        className: clsx(Select_module.item, normalizeClassName(className)),
+        className: clsx(Select_module.item, className),
         ...props
     });
 });
@@ -183,7 +172,7 @@ const Select_SelectItemText = /*#__PURE__*/ forwardRef(function({ className, ...
     return /*#__PURE__*/ jsx(Select.ItemText, {
         ref: ref,
         "data-slot": "select-item-text",
-        className: clsx(Select_module.itemText, normalizeClassName(className)),
+        className: clsx(Select_module.itemText, className),
         ...props
     });
 });
@@ -191,56 +180,16 @@ const Select_SelectItemIndicator = /*#__PURE__*/ forwardRef(function({ className
     return /*#__PURE__*/ jsx(Select.ItemIndicator, {
         ref: ref,
         "data-slot": "select-item-indicator",
-        className: clsx(Select_module.itemIndicator, normalizeClassName(className)),
+        className: clsx(Select_module.itemIndicator, className),
         ...props,
         children: children ?? /*#__PURE__*/ jsx(CheckIcon, {})
     });
 });
-function withNativeFormControl(children, asChild, nativeFormControl) {
-    const formControl = /*#__PURE__*/ jsx(SelectFormControl, {
-        nativeFormControl: nativeFormControl
-    });
-    if (!asChild) return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            children,
-            formControl
-        ]
-    });
-    const child = Children.only(children);
-    return /*#__PURE__*/ cloneElement(child, {}, child.props.children, formControl);
-}
-function SelectFormControl({ nativeFormControl }) {
-    const select = useSelectContext();
-    if ('select' === nativeFormControl) return /*#__PURE__*/ jsx(Select.HiddenSelect, {
-        "data-slot": "select-hidden-select"
-    });
-    const hiddenSelectProps = select.getHiddenSelectProps();
-    return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            /*#__PURE__*/ jsx("select", {
-                ...hiddenSelectProps,
-                "aria-hidden": true,
-                "data-slot": "select-hidden-input-proxy",
-                name: void 0,
-                required: false
-            }),
-            select.value.map((value)=>/*#__PURE__*/ jsx("input", {
-                    type: "hidden",
-                    "data-slot": "select-hidden-input",
-                    name: hiddenSelectProps.name,
-                    form: hiddenSelectProps.form,
-                    autoComplete: hiddenSelectProps.autoComplete,
-                    disabled: hiddenSelectProps.disabled,
-                    value: value
-                }, value))
-        ]
-    });
-}
 const Select_SelectItemTextContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
         "data-slot": "select-item-text-content",
-        className: clsx(Select_module.itemTextContent, normalizeClassName(className)),
+        className: clsx(Select_module.itemTextContent, className),
         ...props
     });
 });
@@ -248,7 +197,7 @@ const Select_SelectItemTextIcon = /*#__PURE__*/ forwardRef(function({ className,
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
         "data-slot": "select-item-text-icon",
-        className: clsx(Select_module.itemTextIcon, normalizeClassName(className)),
+        className: clsx(Select_module.itemTextIcon, className),
         ...props
     });
 });
@@ -256,7 +205,7 @@ const Select_SelectItemTextLabel = /*#__PURE__*/ forwardRef(function({ className
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
         "data-slot": "select-item-text-label",
-        className: clsx(Select_module.itemTextLabel, normalizeClassName(className)),
+        className: clsx(Select_module.itemTextLabel, className),
         ...props
     });
 });
@@ -264,6 +213,7 @@ const Select_Select = Object.assign(Select_SelectRoot, {
     Root: Select_SelectRoot,
     RootProvider: Select_SelectRootProvider,
     Context: Select.Context,
+    HiddenSelect: Select.HiddenSelect,
     ItemContext: Select.ItemContext,
     useSelect: useSelect,
     useSelectContext: useSelectContext,

package/dist/components/select/Select.module.js

@@ -6,6 +6,7 @@ const Select_module = {
     trigger: "trigger-_8XyWR",
     clearTrigger: "clearTrigger-bA52Dh",
     valueText: "valueText-ZjlEZ9",
+    itemText: "itemText-yYAdr3",
     indicator: "indicator-ywAB27",
     positioner: "positioner-mCDY9D",
     content: "content-fSDhut",
@@ -17,7 +18,6 @@ const Select_module = {
     itemGroup: "itemGroup-rRI1Ej",
     itemGroupLabel: "itemGroupLabel-IeDuI7",
     item: "item-p_9W64",
-    itemText: "itemText-yYAdr3",
     itemIndicator: "itemIndicator-ONCmCH",
     itemTextContent: "itemTextContent-QMS39O",
     itemTextIcon: "itemTextIcon-gnF6sP",

package/dist/components/select/Select_module.css

@@ -103,16 +103,11 @@
     color: var(--moduix-select-placeholder-color, var(--moduix-color-muted-foreground));
   }
 
-  .trigger-_8XyWR[data-state="open"] {
-    border-color: var(--moduix-select-focus-ring-color, var(--moduix-color-ring));
-    outline-color: var(--moduix-select-focus-ring-color, var(--moduix-color-ring));
-  }
-
   .trigger-_8XyWR[data-disabled], .trigger-_8XyWR[disabled] {
     cursor: default;
   }
 
-  .trigger-_8XyWR:focus-visible {
+  .trigger-_8XyWR[data-state="open"], .trigger-_8XyWR:focus-visible {
     border-color: var(--moduix-select-focus-ring-color, var(--moduix-color-ring));
     outline-color: var(--moduix-select-focus-ring-color, var(--moduix-color-ring));
   }
@@ -126,7 +121,7 @@
     padding-inline-end: var(--moduix-select-trigger-padding-x-end, 4.25rem);
   }
 
-  .valueText-ZjlEZ9 {
+  .valueText-ZjlEZ9, .itemText-yYAdr3 {
     text-overflow: ellipsis;
     white-space: nowrap;
     flex: 1;
@@ -164,16 +159,11 @@
     cursor: default;
   }
 
-  .indicator-ywAB27[hidden] {
-    display: none;
-  }
-
   .indicator-ywAB27 {
     pointer-events: none;
   }
 
-  .trigger-_8XyWR > .indicator-ywAB27 {
-    pointer-events: auto;
+  .control-QCSm_x > .indicator-ywAB27 {
     top: 50%;
     position: absolute;
     inset-inline-end: var(--moduix-select-action-offset-right, var(--moduix-spacing-2));
@@ -181,7 +171,7 @@
   }
 
   @media (hover: hover) {
-    .trigger-_8XyWR > .indicator-ywAB27:not(:is([data-disabled], [disabled])):hover {
+    .trigger-_8XyWR:not(:is([data-disabled], [disabled])):hover ~ .indicator-ywAB27 {
       background-color: var(--moduix-select-action-bg-hover, var(--moduix-color-muted));
       color: var(--moduix-select-action-color-hover, var(--moduix-color-foreground));
     }
@@ -195,14 +185,9 @@
     --moduix-close-button-bg-hover: var(--moduix-select-action-bg-hover, var(--moduix-color-muted));
     --moduix-close-button-color: var(--moduix-select-icon-color, var(--moduix-color-muted-foreground));
     --moduix-close-button-color-hover: var(--moduix-select-action-color-hover, var(--moduix-color-foreground));
-    --moduix-close-button-transition: var(--moduix-select-transition, var(--moduix-transition-default));
     pointer-events: auto;
   }
 
-  .clearTrigger-bA52Dh[hidden] {
-    display: none;
-  }
-
   .control-QCSm_x > .clearTrigger-bA52Dh {
     top: 50%;
     position: absolute;
@@ -323,14 +308,6 @@
     opacity: var(--moduix-select-disabled-opacity, var(--moduix-opacity-disabled));
   }
 
-  .itemText-yYAdr3 {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    flex: 1;
-    min-width: 0;
-    overflow: hidden;
-  }
-
   .itemIndicator-ONCmCH {
     width: var(--moduix-select-item-indicator-size, var(--moduix-spacing-3-5));
     height: var(--moduix-select-item-indicator-size, var(--moduix-spacing-3-5));
@@ -377,10 +354,6 @@
       transition: none;
     }
 
-    .clearTrigger-bA52Dh {
-      --moduix-close-button-transition: none;
-    }
-
     .content-fSDhut[data-state] {
       animation: none;
     }

package/dist/components/separator/Separator.d.ts

@@ -1,12 +1,12 @@
 declare const Separator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
-    orientation?: "horizontal" | "vertical";
-    size?: "xs" | "sm" | "md" | "lg";
-    variant?: "solid" | "dashed" | "dotted";
+    orientation?: 'horizontal' | 'vertical';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    variant?: 'solid' | 'dashed' | 'dotted';
 } & import("react").RefAttributes<HTMLSpanElement>> & {
     Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
-        orientation?: "horizontal" | "vertical";
-        size?: "xs" | "sm" | "md" | "lg";
-        variant?: "solid" | "dashed" | "dotted";
+        orientation?: 'horizontal' | 'vertical';
+        size?: 'xs' | 'sm' | 'md' | 'lg';
+        variant?: 'solid' | 'dashed' | 'dotted';
     } & import("react").RefAttributes<HTMLSpanElement>>;
 };
 export { Separator };

package/dist/components/separator/Separator.js

@@ -2,7 +2,6 @@ import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import Separator_module from "./Separator.module.js";
 const Separator_SeparatorRoot = /*#__PURE__*/ forwardRef(function({ asChild, className, orientation = 'horizontal', role, size = 'sm', variant = 'solid', 'aria-orientation': _ariaOrientation, ...props }, ref) {
     const resolvedRole = role ?? 'separator';
@@ -18,7 +17,7 @@ const Separator_SeparatorRoot = /*#__PURE__*/ forwardRef(function({ asChild, cla
         "data-orientation": orientation,
         "data-size": size,
         "data-variant": variant,
-        className: clsx(Separator_module.root, normalizeClassName(className))
+        className: clsx(Separator_module.root, className)
     });
 });
 const Separator = Object.assign(Separator_SeparatorRoot, {

package/dist/components/sidebar/Sidebar.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentProps } from 'react';
-import { Splitter } from '../splitter';
-import { Tooltip } from '../tooltip';
+import { Splitter } from '../splitter/index.js';
+import { Tooltip } from '../tooltip/index.js';
 type SidebarSide = 'left' | 'right';
 type SidebarRootProps = Omit<ComponentProps<typeof Splitter.Root>, 'orientation' | 'panels'> & {
     panelId?: string;
@@ -14,6 +14,11 @@ declare function useSidebar(): {
     state: string;
     toggleSidebar: () => void;
 };
+declare const SidebarTooltip: ({ children, content, openDelay, closeDelay, positioning, ...props }: Omit<ComponentProps<typeof Tooltip>, 'children' | 'disabled' | 'positioning'> & {
+    children: ComponentProps<typeof Tooltip.Trigger>['children'];
+    content: ComponentProps<typeof Tooltip.Content>['children'];
+    positioning?: ComponentProps<typeof Tooltip>['positioning'];
+}) => import("react").JSX.Element;
 declare const Sidebar: import("react").ForwardRefExoticComponent<Omit<SidebarRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
     Root: import("react").ForwardRefExoticComponent<Omit<SidebarRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Panel: import("react").ForwardRefExoticComponent<Omit<SidebarPanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
@@ -22,8 +27,8 @@ declare const Sidebar: import("react").ForwardRefExoticComponent<Omit<SidebarRoo
     Trigger: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLButtonElement>>;
     Label: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
     Input: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("@ark-ui/react/field").FieldInputProps & import("react").RefAttributes<HTMLInputElement>, "size"> & {
-        size?: "xs" | "sm" | "md" | "lg" | "xl";
-        htmlSize?: ComponentProps<"input">["size"];
+        size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+        htmlSize?: ComponentProps<'input'>['size'];
     }, "ref"> & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
     Header: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>>;
     Content: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
@@ -31,27 +36,22 @@ declare const Sidebar: import("react").ForwardRefExoticComponent<Omit<SidebarRoo
     CollapsedContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
     Footer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>>;
     Separator: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
-        orientation?: "horizontal" | "vertical";
-        size?: "xs" | "sm" | "md" | "lg";
-        variant?: "solid" | "dashed" | "dotted";
+        orientation?: 'horizontal' | 'vertical';
+        size?: 'xs' | 'sm' | 'md' | 'lg';
+        variant?: 'solid' | 'dashed' | 'dotted';
     } & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
     Group: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>>;
+    GroupHeader: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
     GroupLabel: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLHeadingElement>>;
     GroupAction: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLButtonElement>>;
-    GroupContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
     NavigationList: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLUListElement>>;
     NavigationItem: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLLIElement>>;
-    Tooltip: ({ children, content, openDelay, closeDelay, positioning, ...props }: Omit<ComponentProps<typeof Tooltip>, "children" | "disabled" | "positioning"> & {
-        children: ComponentProps<typeof Tooltip.Trigger>["children"];
-        content: ComponentProps<typeof Tooltip.Content>["children"];
-        positioning?: ComponentProps<typeof Tooltip>["positioning"];
-    }) => import("react").JSX.Element;
+    Tooltip: typeof SidebarTooltip;
     NavigationButton: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
         active?: boolean;
-        size?: "sm" | "md" | "lg";
+        size?: 'sm' | 'md' | 'lg';
     } & import("react").RefAttributes<HTMLButtonElement>>;
-    NavigationAction: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLButtonElement>>;
-    NavigationBadge: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+    NavigationBadge: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
     NavigationSubList: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLUListElement>>;
     NavigationSubItem: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLLIElement>>;
     NavigationSubButton: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {