@typlog/ui 0.12.2 → 0.13.0

package/components.js

@@ -1,9 +1,11 @@
-import { defineComponent, toRefs, createBlock, openBlock, unref, withCtx, createVNode, renderSlot, markRaw, createElementBlock, createElementVNode, computed, normalizeClass, createTextVNode, toDisplayString, createCommentVNode, mergeProps, mergeModels, useTemplateRef, useModel, withDirectives, isRef, vModelDynamic, vModelText, onMounted, normalizeStyle, normalizeProps, guardReactiveProps, Fragment, ref, watch, renderList, withModifiers, vModelRadio, effectScope, createStaticVNode, resolveDynamicComponent } from "vue";
-import { createContext, TooltipProvider, Primitive, useForwardProps, useEmitAsProps, AvatarRoot, AvatarImage, AvatarFallback, ScrollAreaRoot, ScrollAreaViewport, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaCorner, injectDialogRootContext, useForwardExpose, DialogPortal, DialogOverlay, DialogContent, useForwardPropsEmits, AlertDialogPortal, AlertDialogOverlay, AlertDialogContent, DropdownMenuPortal, DropdownMenuContent, DropdownMenuItem, PopoverPortal, PopoverContent, SwitchRoot, SwitchThumb, CheckboxRoot, CheckboxIndicator, Toggle, ToggleGroupRoot, ToggleGroupItem, SelectRoot, SelectPortal, SelectContent, SelectViewport, SelectTrigger, SelectValue, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, ComboboxRoot, injectComboboxRootContext as injectComboboxRootContext$1, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxEmpty, RadioGroupRoot, RadioGroupItem, TabsList, TabsIndicator, TabsTrigger, EditableRoot, EditableArea, EditablePreview, EditableInput, AccordionRoot, useId, AccordionItem, AccordionContent, AccordionTrigger, CollapsibleRoot, CollapsibleTrigger, CollapsibleContent, ToastRoot, ToastTitle, ToastDescription, ToastAction, ToastProvider, ToastPortal, ToastViewport, TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow, ProgressRoot, ProgressIndicator } from "reka-ui";
-import { AlertDialogAction, AlertDialogCancel, AlertDialogRoot, AlertDialogTrigger, CheckboxGroupRoot, ComboboxGroup, DialogClose, DialogRoot, DialogTrigger, DropdownMenuRoot, DropdownMenuTrigger, PopoverClose, PopoverRoot, PopoverTrigger, SelectGroup, TabsContent, TabsRoot } from "reka-ui";
-import { Icon } from "@iconify/vue";
+import { defineComponent, toRefs, createBlock, openBlock, unref, withCtx, createVNode, mergeProps, renderSlot, markRaw, createElementBlock, createElementVNode, computed, normalizeClass, createTextVNode, toDisplayString, createCommentVNode, normalizeStyle, normalizeProps, guardReactiveProps, useAttrs, mergeModels, useTemplateRef, useModel, withDirectives, isRef, vModelDynamic, vModelText, onMounted, Fragment, ref, watch, renderList, withModifiers, vModelRadio, effectScope, createStaticVNode, resolveDynamicComponent } from "vue";
+import { createContext, TooltipProvider, Primitive, useForwardProps, useEmitAsProps, AvatarRoot, AvatarImage, AvatarFallback, ScrollAreaRoot, ScrollAreaViewport, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaCorner, TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow, DialogClose, injectDialogRootContext, useForwardExpose, DialogPortal, DialogOverlay, DialogContent, useForwardPropsEmits, AlertDialogPortal, AlertDialogOverlay, AlertDialogContent, DropdownMenuPortal, DropdownMenuContent, DropdownMenuItem, PopoverPortal, PopoverContent, NavigationMenuRoot, NavigationMenuViewport, NavigationMenuList, NavigationMenuIndicator, NavigationMenuLink, NavigationMenuTrigger, NavigationMenuContent, SwitchRoot, SwitchThumb, CheckboxRoot, CheckboxIndicator, Toggle, ToggleGroupRoot, ToggleGroupItem, SelectRoot, SelectPortal, SelectContent, SelectViewport, SelectTrigger, SelectValue, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, ComboboxRoot, injectComboboxRootContext as injectComboboxRootContext$1, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxEmpty, RadioGroupRoot, RadioGroupItem, TabsList, TabsIndicator, TabsTrigger, EditableRoot, EditableArea, EditablePreview, EditableInput, AccordionRoot, useId, AccordionItem, AccordionContent, AccordionTrigger, CollapsibleRoot, CollapsibleTrigger, CollapsibleContent, injectPaginationRootContext, PaginationEllipsis, PaginationRoot, PaginationList, PaginationFirst, PaginationPrev, PaginationListItem, PaginationNext, PaginationLast, ToastRoot, ToastTitle, ToastDescription, ToastAction, ToastProvider, ToastPortal, ToastViewport, ProgressRoot, ProgressIndicator } from "reka-ui";
+import { AlertDialogAction, AlertDialogCancel, AlertDialogRoot, AlertDialogTrigger, CheckboxGroupRoot, ComboboxGroup, DialogClose as DialogClose2, DialogRoot, DialogTrigger, DropdownMenuRoot, DropdownMenuTrigger, NavigationMenuItem, PopoverClose, PopoverRoot, PopoverTrigger, SelectGroup, TabsContent, TabsRoot } from "reka-ui";
 const [injectThemeContext, provideThemeContext] = createContext("ThemeProvider");
-const _sfc_main$10 = /* @__PURE__ */ defineComponent({
+const _sfc_main$17 = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "ThemeProvider",
   props: {
     accentColor: { default: "indigo" },
@@ -29,7 +31,7 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(TooltipProvider), null, {
         default: withCtx(() => [
-          createVNode(unref(Primitive), {
+          createVNode(unref(Primitive), mergeProps({
             class: "ui-root",
             "data-accent-color": unref(accentColor),
             "data-gray-color": unref(grayColor),
@@ -39,32 +41,32 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
             "data-has-background": unref(hasBackground),
             as: props.as,
             "as-child": props.asChild
-          }, {
+          }, _ctx.$attrs), {
             default: withCtx(() => [
               renderSlot(_ctx.$slots, "default")
             ]),
             _: 3
-          }, 8, ["data-accent-color", "data-gray-color", "data-radius", "data-scaling", "data-panel-background", "data-has-background", "as", "as-child"])
+          }, 16, ["data-accent-color", "data-gray-color", "data-radius", "data-scaling", "data-panel-background", "data-has-background", "as", "as-child"])
         ]),
         _: 3
       });
     };
   }
 });
-const _hoisted_1$v = {
+const _hoisted_1$A = {
   viewBox: "0 0 24 24",
   width: "1em",
   height: "1em"
 };
-function render$9(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$v, _cache[0] || (_cache[0] = [
+function render$e(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$A, [..._cache[0] || (_cache[0] = [
     createElementVNode("path", {
       fill: "currentColor",
       d: "M4 22a8 8 0 1 1 16 0h-2a6 6 0 0 0-12 0zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6s6 2.685 6 6s-2.685 6-6 6m0-2c2.21 0 4-1.79 4-4s-1.79-4-4-4s-4 1.79-4 4s1.79 4 4 4"
     }, null, -1)
-  ]));
+  ])]);
 }
-const UserIcon = markRaw({ name: "ri-user-line", render: render$9 });
+const UserIcon = markRaw({ name: "ri-user-line", render: render$e });
 function useForwardPropsWithout(props, exclude) {
   const parsedProps = useForwardProps(props);
   return computed(() => ({
@@ -111,7 +113,7 @@ function kebabize(str) {
 function _kebabReplace(str, ofs) {
   return (ofs ? "-" : "") + str.toLowerCase();
 }
-const _sfc_main$$ = /* @__PURE__ */ defineComponent({
+const _sfc_main$16 = /* @__PURE__ */ defineComponent({
   __name: "Avatar",
   props: {
     alt: {},
@@ -171,7 +173,7 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$_ = /* @__PURE__ */ defineComponent({
+const _sfc_main$15 = /* @__PURE__ */ defineComponent({
   __name: "Badge",
   props: {
     variant: { default: "soft" },
@@ -201,7 +203,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$Z = /* @__PURE__ */ defineComponent({
+const _sfc_main$14 = /* @__PURE__ */ defineComponent({
   __name: "Card",
   props: {
     variant: { default: "surface" },
@@ -228,7 +230,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$Y = /* @__PURE__ */ defineComponent({
+const _sfc_main$13 = /* @__PURE__ */ defineComponent({
   __name: "Button",
   props: {
     variant: { default: "solid" },
@@ -261,7 +263,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$X = /* @__PURE__ */ defineComponent({
+const _sfc_main$12 = /* @__PURE__ */ defineComponent({
   __name: "IconButton",
   props: {
     variant: { default: "solid" },
@@ -294,23 +296,23 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$u = {
+const _hoisted_1$z = {
   viewBox: "0 0 15 15",
   width: "1em",
   height: "1em"
 };
-function render$8(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$u, _cache[0] || (_cache[0] = [
+function render$d(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$z, [..._cache[0] || (_cache[0] = [
     createElementVNode("path", {
       fill: "currentColor",
       "fill-rule": "evenodd",
       d: "M11.782 4.032a.575.575 0 1 0-.813-.814L7.5 6.687L4.032 3.218a.575.575 0 0 0-.814.814L6.687 7.5l-3.469 3.468a.575.575 0 0 0 .814.814L7.5 8.313l3.469 3.469a.575.575 0 0 0 .813-.814L8.313 7.5z",
       "clip-rule": "evenodd"
     }, null, -1)
-  ]));
+  ])]);
 }
-const CrossIcon = markRaw({ name: "radix-icons-cross-2", render: render$8 });
-const _sfc_main$W = /* @__PURE__ */ defineComponent({
+const CrossIcon = markRaw({ name: "radix-icons-cross-2", render: render$d });
+const _sfc_main$11 = /* @__PURE__ */ defineComponent({
   __name: "CloseButton",
   props: {
     variant: { default: "ghost" },
@@ -343,7 +345,7 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$V = /* @__PURE__ */ defineComponent({
+const _sfc_main$10 = /* @__PURE__ */ defineComponent({
   __name: "ScrollArea",
   props: {
     size: { default: "1" },
@@ -401,13 +403,182 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
             "class-name": "ui-ScrollAreaCorner"
           })) : createCommentVNode("", true)
         ]),
-        _: 3,
-        __: [0]
+        _: 3
       }, 8, ["as-child", "dir", "scroll-hide-delay", "type", "data-radius"]);
     };
   }
 });
-const _sfc_main$U = /* @__PURE__ */ defineComponent({
+const _sfc_main$$ = /* @__PURE__ */ defineComponent({
+  __name: "ThemeWrapper",
+  props: {
+    accentColor: {},
+    radius: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const theme = injectThemeContext();
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Primitive), {
+        class: "ui-root",
+        "data-accent-color": props.accentColor || unref(theme).accentColor.value,
+        "data-gray-color": unref(theme).grayColor.value,
+        "data-radius": props.radius || unref(theme).radius.value,
+        "data-scaling": unref(theme).scaling.value,
+        "as-child": ""
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["data-accent-color", "data-gray-color", "data-radius", "data-scaling"]);
+    };
+  }
+});
+const _hoisted_1$y = ["textContent"];
+const _sfc_main$_ = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "Tooltip",
+  props: {
+    content: {},
+    maxWidth: { default: "360px" },
+    color: { default: "gray" },
+    defaultOpen: { type: Boolean },
+    open: { type: Boolean },
+    delayDuration: {},
+    disableHoverableContent: { type: Boolean },
+    disableClosingTrigger: { type: Boolean },
+    disabled: { type: Boolean },
+    ignoreNonKeyboardFocus: { type: Boolean },
+    forceMount: { type: Boolean },
+    ariaLabel: {},
+    asChild: { type: Boolean },
+    as: {},
+    side: { default: "top" },
+    sideOffset: { default: 4 },
+    align: {},
+    alignOffset: {},
+    avoidCollisions: { type: Boolean, default: true },
+    collisionBoundary: {},
+    collisionPadding: { default: 10 },
+    arrowPadding: {},
+    sticky: {},
+    hideWhenDetached: { type: Boolean },
+    positionStrategy: {},
+    updatePositionStrategy: {}
+  },
+  emits: ["update:open"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(TooltipRoot), {
+        open: props.open,
+        "default-open": props.defaultOpen,
+        "delay-duration": props.delayDuration,
+        "disable-hoverable-content": props.disableHoverableContent,
+        "disable-closing-trigger": props.disableClosingTrigger,
+        disabled: props.disabled,
+        "ignore-non-keyboard-focus": props.ignoreNonKeyboardFocus,
+        "onUpdate:open": _cache[0] || (_cache[0] = ($event) => emits("update:open", $event))
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(TooltipTrigger), mergeProps({
+            as: props.as,
+            "as-child": props.asChild
+          }, _ctx.$attrs), {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+          }, 16, ["as", "as-child"]),
+          createVNode(unref(TooltipPortal), null, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$$, null, {
+                default: withCtx(() => [
+                  createVNode(unref(TooltipContent), {
+                    class: "ui-Tooltip",
+                    align: props.align,
+                    "align-offset": props.alignOffset,
+                    "aria-label": props.ariaLabel,
+                    "arrow-padding": props.arrowPadding,
+                    "avoid-collisions": props.avoidCollisions,
+                    "collision-boundary": props.collisionBoundary,
+                    "collision-padding": props.collisionPadding,
+                    "hide-when-detached": props.hideWhenDetached,
+                    side: props.side,
+                    "side-offset": props.sideOffset,
+                    sticky: props.sticky,
+                    "data-accent-color": props.color,
+                    style: normalizeStyle({ maxWidth: props.maxWidth })
+                  }, {
+                    default: withCtx(() => [
+                      renderSlot(_ctx.$slots, "content", {}, () => [
+                        createElementVNode("p", {
+                          class: "ui-TooltipText",
+                          textContent: toDisplayString(props.content)
+                        }, null, 8, _hoisted_1$y)
+                      ]),
+                      createVNode(unref(TooltipArrow), { class: "ui-TooltipArrow" })
+                    ]),
+                    _: 3
+                  }, 8, ["align", "align-offset", "aria-label", "arrow-padding", "avoid-collisions", "collision-boundary", "collision-padding", "hide-when-detached", "side", "side-offset", "sticky", "data-accent-color", "style"])
+                ]),
+                _: 3
+              })
+            ]),
+            _: 3
+          })
+        ]),
+        _: 3
+      }, 8, ["open", "default-open", "delay-duration", "disable-hoverable-content", "disable-closing-trigger", "disabled", "ignore-non-keyboard-focus"]);
+    };
+  }
+});
+const _sfc_main$Z = /* @__PURE__ */ defineComponent({
+  __name: "DialogCloseButton",
+  props: {
+    tooltip: { default: "Close" },
+    variant: { default: "ghost" },
+    color: { default: "gray" },
+    radius: {},
+    size: { default: "2" },
+    highContrast: { type: Boolean, default: false },
+    disabled: { type: Boolean },
+    as: { default: "button" },
+    asChild: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const forwarded = useForwardPropsWithout(props, ["tooltip"]);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$_, {
+        content: props.tooltip,
+        "as-child": ""
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(DialogClose), {
+            class: "ui-DialogCloseButton",
+            "as-child": ""
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$12, normalizeProps(guardReactiveProps(unref(forwarded))), {
+                default: withCtx(() => [
+                  createVNode(unref(CrossIcon))
+                ]),
+                _: 1
+              }, 16)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["content"]);
+    };
+  }
+});
+const _sfc_main$Y = /* @__PURE__ */ defineComponent({
   __name: "DialogTitle",
   props: {
     asChild: { type: Boolean },
@@ -430,7 +601,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$T = /* @__PURE__ */ defineComponent({
+const _sfc_main$X = /* @__PURE__ */ defineComponent({
   __name: "DialogDescription",
   props: {
     asChild: { type: Boolean },
@@ -453,35 +624,9 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$S = /* @__PURE__ */ defineComponent({
-  __name: "ThemeWrapper",
-  props: {
-    accentColor: {},
-    radius: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const theme = injectThemeContext();
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(Primitive), {
-        class: "ui-root",
-        "data-accent-color": props.accentColor || unref(theme).accentColor.value,
-        "data-gray-color": unref(theme).grayColor.value,
-        "data-radius": props.radius || unref(theme).radius.value,
-        "data-scaling": unref(theme).scaling.value,
-        "as-child": ""
-      }, {
-        default: withCtx(() => [
-          renderSlot(_ctx.$slots, "default")
-        ]),
-        _: 3
-      }, 8, ["data-accent-color", "data-gray-color", "data-radius", "data-scaling"]);
-    };
-  }
-});
-const _hoisted_1$t = { class: "ui-DialogWrapper" };
+const _hoisted_1$x = { class: "ui-DialogWrapper" };
 const _hoisted_2$8 = { class: "ui-DialogContainer" };
-const _sfc_main$R = /* @__PURE__ */ defineComponent({
+const _sfc_main$W = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -501,11 +646,11 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(DialogPortal), null, {
         default: withCtx(() => [
-          createVNode(_sfc_main$S, null, {
+          createVNode(_sfc_main$$, null, {
             default: withCtx(() => [
               createVNode(unref(DialogOverlay), { class: "ui-DialogOverlay" }, {
                 default: withCtx(() => [
-                  createElementVNode("div", _hoisted_1$t, [
+                  createElementVNode("div", _hoisted_1$x, [
                     createElementVNode("div", _hoisted_2$8, [
                       createVNode(unref(DialogContent), mergeProps({
                         class: ["ui-DialogPopup", `r-size-${props.size}`]
@@ -532,9 +677,9 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$s = { class: "ui-DialogWrapper" };
+const _hoisted_1$w = { class: "ui-DialogWrapper" };
 const _hoisted_2$7 = { class: "ui-DialogContainer" };
-const _sfc_main$Q = /* @__PURE__ */ defineComponent({
+const _sfc_main$V = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -553,11 +698,11 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(AlertDialogPortal), null, {
         default: withCtx(() => [
-          createVNode(_sfc_main$S, null, {
+          createVNode(_sfc_main$$, null, {
             default: withCtx(() => [
               createVNode(unref(AlertDialogOverlay), { class: "ui-DialogOverlay" }, {
                 default: withCtx(() => [
-                  createElementVNode("div", _hoisted_1$s, [
+                  createElementVNode("div", _hoisted_1$w, [
                     createElementVNode("div", _hoisted_2$7, [
                       createVNode(unref(AlertDialogContent), mergeProps({ class: "ui-DialogPopup ui-AlertPopup r-size-3" }, {
                         ..._ctx.$attrs,
@@ -582,9 +727,9 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$r = { class: "ui-MenuViewport" };
+const _hoisted_1$v = { class: "ui-MenuViewport" };
 const [injectDropdownMenuContentContext, provideDropdownMenuContentContext] = createContext("ui:DropdownMenuContent");
-const _sfc_main$P = /* @__PURE__ */ defineComponent({
+const _sfc_main$U = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -634,7 +779,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(DropdownMenuPortal), null, {
         default: withCtx(() => [
-          createVNode(_sfc_main$S, {
+          createVNode(_sfc_main$$, {
             "accent-color": props.color
           }, {
             default: withCtx(() => [
@@ -646,9 +791,9 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
                 class: ["ui-PopperContent ui-MenuContent", unref(resetClass)]
               }), {
                 default: withCtx(() => [
-                  createVNode(_sfc_main$V, { type: "auto" }, {
+                  createVNode(_sfc_main$10, { type: "auto" }, {
                     default: withCtx(() => [
-                      createElementVNode("div", _hoisted_1$r, [
+                      createElementVNode("div", _hoisted_1$v, [
                         renderSlot(_ctx.$slots, "default")
                       ])
                     ]),
@@ -666,8 +811,8 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$q = ["textContent"];
-const _sfc_main$O = /* @__PURE__ */ defineComponent({
+const _hoisted_1$u = ["textContent"];
+const _sfc_main$T = /* @__PURE__ */ defineComponent({
   __name: "DropdownMenuItem",
   props: {
     color: {},
@@ -687,8 +832,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(DropdownMenuItem), mergeProps({
         class: "ui-MenuItem",
-        "data-accent-color": props.color,
-        "data-variant": unref(rootContext).variant.value,
+        "data-accent-color": props.color || unref(rootContext).color.value,
         "data-high-contrast": unref(rootContext).highContrast?.value || void 0
       }, unref(forwarded)), {
         default: withCtx(() => [
@@ -697,10 +841,10 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
             key: 0,
             class: "ui-MenuShortcut",
             textContent: toDisplayString(props.shortcut)
-          }, null, 8, _hoisted_1$q)) : createCommentVNode("", true)
+          }, null, 8, _hoisted_1$u)) : createCommentVNode("", true)
         ]),
         _: 3
-      }, 16, ["data-accent-color", "data-variant", "data-high-contrast"]);
+      }, 16, ["data-accent-color", "data-high-contrast"]);
     };
   }
 });
@@ -711,16 +855,16 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _sfc_main$N = {};
-const _hoisted_1$p = {
+const _sfc_main$S = {};
+const _hoisted_1$t = {
   class: "ui-DropdownMenuSeparator",
   "aria-hidden": "true"
 };
 function _sfc_render$2(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$p);
+  return openBlock(), createElementBlock("div", _hoisted_1$t);
 }
-const DropdownMenuSeparator = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["render", _sfc_render$2]]);
-const _sfc_main$M = /* @__PURE__ */ defineComponent({
+const DropdownMenuSeparator = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["render", _sfc_render$2]]);
+const _sfc_main$R = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -757,7 +901,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(PopoverPortal), null, {
         default: withCtx(() => [
-          createVNode(_sfc_main$S, null, {
+          createVNode(_sfc_main$$, null, {
             default: withCtx(() => [
               createVNode(unref(PopoverContent), mergeProps({ ..._ctx.$attrs, ...unref(forwarded) }, {
                 class: ["ui-PopoverPopup ui-PopperContent", `r-size-${props.size}`]
@@ -772,7 +916,190 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
           })
         ]),
         _: 3
-      });
+      });
+    };
+  }
+});
+const _sfc_main$Q = /* @__PURE__ */ defineComponent({
+  __name: "NavigationMenuRoot",
+  props: {
+    modelValue: {},
+    defaultValue: {},
+    dir: {},
+    orientation: {},
+    delayDuration: {},
+    skipDelayDuration: {},
+    disableClickTrigger: { type: Boolean },
+    disableHoverTrigger: { type: Boolean },
+    disablePointerLeaveClose: { type: Boolean },
+    unmountOnHide: { type: Boolean },
+    asChild: { type: Boolean },
+    as: {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const forwarded = useForwardPropsEmits(props, emits);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(NavigationMenuRoot), mergeProps(unref(forwarded), { class: "ui-NavigationMenuRoot" }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default"),
+          createVNode(unref(NavigationMenuViewport), { class: "ui-NavigationMenuViewport" })
+        ]),
+        _: 3
+      }, 16);
+    };
+  }
+});
+const [injectNavigationMenuListContext, provideNavigationMenuListContext] = createContext("ui:NavigationMenuList");
+const _sfc_main$P = /* @__PURE__ */ defineComponent({
+  __name: "NavigationMenuList",
+  props: {
+    color: {},
+    size: { default: "2" },
+    radius: {},
+    asChild: { type: Boolean },
+    as: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const forwarded = useForwardPropsWithout(props, ["color", "size", "radius"]);
+    const resetClass = buildPropsClass(props, ["size"]);
+    const { color, radius, size } = toRefs(props);
+    provideNavigationMenuListContext({
+      color,
+      radius,
+      size
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(NavigationMenuList), mergeProps(unref(forwarded), {
+        class: ["ui-NavigationMenuList", unref(resetClass)]
+      }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default"),
+          createVNode(unref(NavigationMenuIndicator), { class: "ui-NavigationMenuIndicator" })
+        ]),
+        _: 3
+      }, 16, ["class"]);
+    };
+  }
+});
+const _sfc_main$O = /* @__PURE__ */ defineComponent({
+  __name: "NavigationMenuLink",
+  props: {
+    color: {},
+    size: { default: "2" },
+    radius: {},
+    active: { type: Boolean },
+    asChild: { type: Boolean },
+    as: {}
+  },
+  emits: ["select"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const ctx = injectNavigationMenuListContext(null);
+    const forwarded = useForwardPropsEmitsWithout(props, emits, ["color", "size", "radius"]);
+    const resetClass = computed(() => {
+      const size = props.size || ctx?.size.value || "2";
+      return `r-size-${size}`;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(NavigationMenuLink), mergeProps({ class: "ui-NavigationMenuLink" }, unref(forwarded), {
+        class: resetClass.value,
+        "data-accent-color": props.color || unref(ctx)?.color.value,
+        "data-radius": props.radius || unref(ctx)?.radius.value
+      }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["class", "data-accent-color", "data-radius"]);
+    };
+  }
+});
+const _hoisted_1$s = {
+  viewBox: "0 0 15 15",
+  width: "1em",
+  height: "1em"
+};
+function render$c(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$s, [..._cache[0] || (_cache[0] = [
+    createElementVNode("path", {
+      fill: "currentColor",
+      "fill-rule": "evenodd",
+      d: "M4.182 6.182a.45.45 0 0 1 .636 0L7.5 8.864l2.682-2.682a.45.45 0 0 1 .636.636l-3 3a.45.45 0 0 1-.636 0l-3-3a.45.45 0 0 1 0-.636",
+      "clip-rule": "evenodd"
+    }, null, -1)
+  ])]);
+}
+const CaretDownIcon = markRaw({ name: "radix-icons-caret-down", render: render$c });
+const _sfc_main$N = /* @__PURE__ */ defineComponent({
+  __name: "NavigationMenuTrigger",
+  props: {
+    color: {},
+    size: {},
+    radius: {},
+    disabled: { type: Boolean },
+    asChild: { type: Boolean },
+    as: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const ctx = injectNavigationMenuListContext(null);
+    const forwarded = useForwardPropsWithout(props, ["color", "size", "radius"]);
+    const attrs = useAttrs();
+    const defaultAs = computed(() => {
+      if (props.as) {
+        return props.as;
+      }
+      if (attrs.href) {
+        return "a";
+      } else {
+        return forwarded.value.as;
+      }
+    });
+    const resetClass = computed(() => {
+      const size = props.size || ctx?.size.value || "2";
+      return `r-size-${size}`;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(NavigationMenuTrigger), mergeProps({ class: "ui-NavigationMenuTrigger" }, unref(forwarded), {
+        as: defaultAs.value,
+        class: resetClass.value,
+        "data-accent-color": props.color || unref(ctx)?.color.value,
+        "data-radius": props.radius || unref(ctx)?.radius.value
+      }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default"),
+          createVNode(unref(CaretDownIcon), { class: "ui-NavigationMenuTriggerArrow" })
+        ]),
+        _: 3
+      }, 16, ["as", "class", "data-accent-color", "data-radius"]);
+    };
+  }
+});
+const _sfc_main$M = /* @__PURE__ */ defineComponent({
+  __name: "NavigationMenuContent",
+  props: {
+    forceMount: { type: Boolean },
+    disableOutsidePointerEvents: { type: Boolean },
+    asChild: { type: Boolean },
+    as: {}
+  },
+  emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const forwarded = useForwardPropsEmits(props, emits);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(NavigationMenuContent), mergeProps(unref(forwarded), { class: "ui-NavigationMenuContent" }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16);
     };
   }
 });
@@ -807,14 +1134,19 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
         "data-radius": props.radius
       }), {
         default: withCtx(() => [
-          createVNode(unref(SwitchThumb), { class: "ui-SwitchThumb" })
+          createVNode(unref(SwitchThumb), { class: "ui-SwitchThumb" }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+          })
         ]),
-        _: 1
+        _: 3
       }, 16, ["class", "data-accent-color", "data-radius"]);
     };
   }
 });
-const _hoisted_1$o = {
+const _hoisted_1$r = {
   width: "9",
   height: "9",
   viewBox: "0 0 9 9",
@@ -867,7 +1199,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
             "as-child": ""
           }, {
             default: withCtx(() => [
-              (openBlock(), createElementBlock("svg", _hoisted_1$o, [
+              (openBlock(), createElementBlock("svg", _hoisted_1$r, [
                 state === "indeterminate" ? (openBlock(), createElementBlock("path", _hoisted_2$6)) : (openBlock(), createElementBlock("path", _hoisted_3$2))
               ]))
             ]),
@@ -977,7 +1309,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$n = ["data-radius", "data-accent-color"];
+const _hoisted_1$q = ["data-radius", "data-accent-color"];
 const _hoisted_2$5 = ["id", "type"];
 const _hoisted_3$1 = ["id", "type"];
 const _hoisted_4 = {
@@ -1070,11 +1402,11 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
         _ctx.$slots.right ? (openBlock(), createElementBlock("div", _hoisted_5, [
           renderSlot(_ctx.$slots, "right")
         ])) : createCommentVNode("", true)
-      ], 42, _hoisted_1$n);
+      ], 42, _hoisted_1$q);
     };
   }
 });
-const _hoisted_1$m = ["data-accent-color", "data-radius"];
+const _hoisted_1$p = ["data-accent-color", "data-radius"];
 const _sfc_main$F = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
@@ -1109,11 +1441,11 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
         }, _ctx.$attrs, { class: "ui-TextAreaInput" }), null, 16), [
           [vModelText, modelValue.value]
         ])
-      ], 10, _hoisted_1$m);
+      ], 10, _hoisted_1$p);
     };
   }
 });
-const _hoisted_1$l = ["id"];
+const _hoisted_1$o = ["id"];
 const _sfc_main$E = /* @__PURE__ */ defineComponent({
   __name: "ColorField",
   props: /* @__PURE__ */ mergeModels({
@@ -1150,7 +1482,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
             class: "ui-ColorFieldInput",
             type: "color"
-          }, null, 8, _hoisted_1$l), [
+          }, null, 8, _hoisted_1$o), [
             [vModelText, modelValue.value]
           ])
         ]),
@@ -1247,7 +1579,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(SelectPortal), null, {
         default: withCtx(() => [
-          createVNode(_sfc_main$S, {
+          createVNode(_sfc_main$$, {
             "accent-color": unref(context).color.value
           }, {
             default: withCtx(() => [
@@ -1287,8 +1619,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
                             _: 1
                           })
                         ]),
-                        _: 3,
-                        __: [0]
+                        _: 3
                       })
                     ]),
                     _: 3
@@ -1305,23 +1636,23 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$k = {
+const _hoisted_1$n = {
   viewBox: "0 0 15 15",
   width: "1em",
   height: "1em"
 };
-function render$7(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$k, _cache[0] || (_cache[0] = [
+function render$b(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$n, [..._cache[0] || (_cache[0] = [
     createElementVNode("path", {
       fill: "currentColor",
       "fill-rule": "evenodd",
       d: "M3.135 6.158a.5.5 0 0 1 .707-.023L7.5 9.565l3.658-3.43a.5.5 0 0 1 .684.73l-4 3.75a.5.5 0 0 1-.684 0l-4-3.75a.5.5 0 0 1-.023-.707",
       "clip-rule": "evenodd"
     }, null, -1)
-  ]));
+  ])]);
 }
-const ChevronDownIcon = markRaw({ name: "radix-icons-chevron-down", render: render$7 });
-const _hoisted_1$j = { class: "ui-SelectTriggerInner" };
+const ChevronDownIcon = markRaw({ name: "radix-icons-chevron-down", render: render$b });
+const _hoisted_1$m = { class: "ui-SelectTriggerInner" };
 const _sfc_main$B = /* @__PURE__ */ defineComponent({
   __name: "SelectTrigger",
   props: {
@@ -1347,7 +1678,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
         "data-radius": props.radius
       }, {
         default: withCtx(() => [
-          createElementVNode("span", _hoisted_1$j, [
+          createElementVNode("span", _hoisted_1$m, [
             createVNode(unref(SelectValue), {
               placeholder: props.placeholder
             }, {
@@ -1372,22 +1703,22 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$i = {
+const _hoisted_1$l = {
   viewBox: "0 0 15 15",
   width: "1em",
   height: "1em"
 };
-function render$6(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$i, _cache[0] || (_cache[0] = [
+function render$a(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$l, [..._cache[0] || (_cache[0] = [
     createElementVNode("path", {
       fill: "currentColor",
       "fill-rule": "evenodd",
       d: "M11.467 3.727c.289.189.37.576.181.865l-4.25 6.5a.625.625 0 0 1-.944.12l-2.75-2.5a.625.625 0 0 1 .841-.925l2.208 2.007l3.849-5.886a.625.625 0 0 1 .865-.181",
       "clip-rule": "evenodd"
     }, null, -1)
-  ]));
+  ])]);
 }
-const CheckIcon$1 = markRaw({ name: "radix-icons-check", render: render$6 });
+const CheckIcon$1 = markRaw({ name: "radix-icons-check", render: render$a });
 const _sfc_main$A = /* @__PURE__ */ defineComponent({
   __name: "SelectItem",
   props: {
@@ -1444,12 +1775,12 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
   }
 });
 const _sfc_main$y = {};
-const _hoisted_1$h = {
+const _hoisted_1$k = {
   class: "ui-SelectSeparator",
   "aria-hidden": "true"
 };
 function _sfc_render$1(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$h);
+  return openBlock(), createElementBlock("div", _hoisted_1$k);
 }
 const SelectSeparator = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["render", _sfc_render$1]]);
 const [injectComboboxRootContext, provideComboboxRootContext] = createContext("ui:ComboboxRoot");
@@ -1502,7 +1833,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$g = {
+const _hoisted_1$j = {
   key: 0,
   class: "ui-ComboboxValues"
 };
@@ -1574,7 +1905,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
         "data-multiple": unref(context).multiple.value || void 0
       }, {
         default: withCtx(() => [
-          unref(context).multiple.value ? (openBlock(), createElementBlock("div", _hoisted_1$g, [
+          unref(context).multiple.value ? (openBlock(), createElementBlock("div", _hoisted_1$j, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(values.value, (item, index) => {
               return openBlock(), createElementBlock("div", {
                 key: displayValue(item),
@@ -1672,7 +2003,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(ComboboxPortal), null, {
         default: withCtx(() => [
-          createVNode(_sfc_main$S, {
+          createVNode(_sfc_main$$, {
             "accent-color": unref(context).color.value
           }, {
             default: withCtx(() => [
@@ -1717,8 +2048,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
                         _: 1
                       })
                     ]),
-                    _: 3,
-                    __: [0]
+                    _: 3
                   })
                 ]),
                 _: 3
@@ -1794,7 +2124,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$f = ["data-accent-color"];
+const _hoisted_1$i = ["data-accent-color"];
 const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "Radio",
   props: /* @__PURE__ */ mergeModels({
@@ -1829,7 +2159,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["ui-RadioBase ui-Radio", unref(resetClass)]),
         type: "radio",
         "data-accent-color": props.color
-      }, null, 10, _hoisted_1$f)), [
+      }, null, 10, _hoisted_1$i)), [
         [vModelRadio, unref(modelValue)]
       ]);
     };
@@ -1872,7 +2202,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$e = { class: "ui-RadioGroupItem" };
+const _hoisted_1$h = { class: "ui-RadioGroupItem" };
 const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "RadioGroupItem",
   props: {
@@ -1893,7 +2223,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     const forwarded = useForwardPropsWithout(props, ["color", "size", "variant", "highContrast"]);
     const resetClass = buildPropsClass(props, ["size", "variant", "highContrast"]);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("label", _hoisted_1$e, [
+      return openBlock(), createElementBlock("label", _hoisted_1$h, [
         createVNode(unref(RadioGroupItem), mergeProps({
           class: ["ui-RadioBase ui-RadioGroupItemIndicator", unref(resetClass)],
           "data-accent-color": props.color
@@ -2041,7 +2371,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     const resetClass = buildPropsClass(props, ["variant", "size", "highContrast"]);
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(TabsList), {
-        class: normalizeClass(["ui-TabList", unref(resetClass)]),
+        class: normalizeClass(["ui-TabsList", unref(resetClass)]),
         "data-radius": props.radius,
         "data-accent-color": props.color
       }, {
@@ -2054,7 +2384,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$d = { class: "ui-TabTriggerInner" };
+const _hoisted_1$g = { class: "ui-TabTriggerInner" };
 const _hoisted_2$3 = { class: "ui-TabTriggerInnerHidden" };
 const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "TabsTrigger",
@@ -2070,7 +2400,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(TabsTrigger), mergeProps(unref(forwarded), { class: "ui-TabTrigger" }), {
         default: withCtx(() => [
-          createElementVNode("span", _hoisted_1$d, [
+          createElementVNode("span", _hoisted_1$g, [
             renderSlot(_ctx.$slots, "default")
           ]),
           createElementVNode("span", _hoisted_2$3, [
@@ -2230,23 +2560,23 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$c = {
+const _hoisted_1$f = {
   viewBox: "0 0 15 15",
   width: "1em",
   height: "1em"
 };
-function render$5(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$c, _cache[0] || (_cache[0] = [
+function render$9(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$f, [..._cache[0] || (_cache[0] = [
     createElementVNode("path", {
       fill: "currentColor",
       "fill-rule": "evenodd",
       d: "M6.158 3.135a.5.5 0 0 1 .707.023l3.75 4a.5.5 0 0 1 0 .684l-3.75 4a.5.5 0 1 1-.73-.684L9.566 7.5l-3.43-3.658a.5.5 0 0 1 .023-.707",
       "clip-rule": "evenodd"
     }, null, -1)
-  ]));
+  ])]);
 }
-const ChevronIcon = markRaw({ name: "radix-icons-chevron-right", render: render$5 });
-const _hoisted_1$b = { class: "ui-AccordionIndicator" };
+const NextIcon = markRaw({ name: "radix-icons-chevron-right", render: render$9 });
+const _hoisted_1$e = { class: "ui-AccordionIndicator" };
 const _hoisted_2$2 = {
   key: 1,
   class: "ui-AccordionIndicator-plus"
@@ -2258,20 +2588,20 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$b, [
-        _ctx.variant == "chevron" ? (openBlock(), createBlock(unref(ChevronIcon), {
+      return openBlock(), createElementBlock("div", _hoisted_1$e, [
+        _ctx.variant == "chevron" ? (openBlock(), createBlock(unref(NextIcon), {
           key: 0,
           class: "ui-AccordionIndicator-chevron"
         })) : createCommentVNode("", true),
-        _ctx.variant == "plus" ? (openBlock(), createElementBlock("div", _hoisted_2$2, _cache[0] || (_cache[0] = [
+        _ctx.variant == "plus" ? (openBlock(), createElementBlock("div", _hoisted_2$2, [..._cache[0] || (_cache[0] = [
           createElementVNode("span", { class: "ui-AccordionIndicator-plus-1" }, null, -1),
           createElementVNode("span", { class: "ui-AccordionIndicator-plus-2" }, null, -1)
-        ]))) : createCommentVNode("", true)
+        ])])) : createCommentVNode("", true)
       ]);
     };
   }
 });
-const _hoisted_1$a = { class: "ui-AccordionTriggerText" };
+const _hoisted_1$d = { class: "ui-AccordionTriggerText" };
 const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "AccordionTrigger",
   props: {
@@ -2293,7 +2623,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(AccordionTrigger), mergeProps({ class: "ui-AccordionTrigger" }, unref(forwarded)), {
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$a, [
+          createElementVNode("div", _hoisted_1$d, [
             renderSlot(_ctx.$slots, "default")
           ]),
           indicatorIcon.value !== "none" ? (openBlock(), createBlock(_sfc_main$e, {
@@ -2346,11 +2676,11 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "CollapsibleIndicator",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(ChevronIcon), { class: "ui-CollapsibleIndicator" });
+      return openBlock(), createBlock(unref(NextIcon), { class: "ui-CollapsibleIndicator" });
     };
   }
 });
-const _hoisted_1$9 = { class: "ui-CollapsibleTriggerText" };
+const _hoisted_1$c = { class: "ui-CollapsibleTriggerText" };
 const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "CollapsibleTrigger",
   props: {
@@ -2364,7 +2694,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(CollapsibleTrigger), mergeProps({ class: "ui-CollapsibleTrigger" }, unref(forwarded)), {
         default: withCtx(() => [
-          createElementVNode("span", _hoisted_1$9, [
+          createElementVNode("span", _hoisted_1$c, [
             renderSlot(_ctx.$slots, "default")
           ]),
           _ctx.indicator !== "none" ? (openBlock(), createBlock(_sfc_main$b, {
@@ -2378,9 +2708,6 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   }
 });
 const _sfc_main$9 = /* @__PURE__ */ defineComponent({
-  ...{
-    inheritAttrs: false
-  },
   __name: "CollapsibleContent",
   props: {
     forceMount: { type: Boolean },
@@ -2393,181 +2720,218 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(CollapsibleContent), mergeProps(unref(forwardedProps), { class: "ui-CollapsibleContent" }), {
         default: withCtx(() => [
-          createElementVNode("div", mergeProps({ class: "ui-CollapsibleContentInner" }, _ctx.$attrs), [
-            renderSlot(_ctx.$slots, "default")
-          ], 16)
+          renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
       }, 16);
     };
   }
 });
+const _hoisted_1$b = {
+  viewBox: "0 0 15 15",
+  width: "1em",
+  height: "1em"
+};
+function render$8(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$b, [..._cache[0] || (_cache[0] = [
+    createElementVNode("path", {
+      fill: "currentColor",
+      "fill-rule": "evenodd",
+      d: "M6.854 3.854a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L3.207 7.5zm6 0a.5.5 0 0 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L9.207 7.5z",
+      "clip-rule": "evenodd"
+    }, null, -1)
+  ])]);
+}
+const FirstIcon = markRaw({ name: "radix-icons-double-arrow-left", render: render$8 });
+const _hoisted_1$a = {
+  viewBox: "0 0 15 15",
+  width: "1em",
+  height: "1em"
+};
+function render$7(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$a, [..._cache[0] || (_cache[0] = [
+    createElementVNode("path", {
+      fill: "currentColor",
+      "fill-rule": "evenodd",
+      d: "M2.146 11.146a.5.5 0 0 0 .708.708l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 1 0-.708.708L5.793 7.5zm6 0a.5.5 0 0 0 .708.708l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 1 0-.708.708L11.793 7.5z",
+      "clip-rule": "evenodd"
+    }, null, -1)
+  ])]);
+}
+const LastIcon = markRaw({ name: "radix-icons-double-arrow-right", render: render$7 });
+const _hoisted_1$9 = {
+  viewBox: "0 0 15 15",
+  width: "1em",
+  height: "1em"
+};
+function render$6(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$9, [..._cache[0] || (_cache[0] = [
+    createElementVNode("path", {
+      fill: "currentColor",
+      "fill-rule": "evenodd",
+      d: "M8.842 3.135a.5.5 0 0 1 .023.707L5.435 7.5l3.43 3.658a.5.5 0 0 1-.73.684l-3.75-4a.5.5 0 0 1 0-.684l3.75-4a.5.5 0 0 1 .707-.023",
+      "clip-rule": "evenodd"
+    }, null, -1)
+  ])]);
+}
+const PrevIcon = markRaw({ name: "radix-icons-chevron-left", render: render$6 });
+const _hoisted_1$8 = {
+  viewBox: "0 0 15 15",
+  width: "1em",
+  height: "1em"
+};
+function render$5(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$8, [..._cache[0] || (_cache[0] = [
+    createElementVNode("path", {
+      fill: "currentColor",
+      "fill-rule": "evenodd",
+      d: "M3.625 7.5a1.125 1.125 0 1 1-2.25 0a1.125 1.125 0 0 1 2.25 0m5 0a1.125 1.125 0 1 1-2.25 0a1.125 1.125 0 0 1 2.25 0M12.5 8.625a1.125 1.125 0 1 0 0-2.25a1.125 1.125 0 0 0 0 2.25",
+      "clip-rule": "evenodd"
+    }, null, -1)
+  ])]);
+}
+const EllipsisIcon = markRaw({ name: "radix-icons-dots-horizontal", render: render$5 });
 const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  __name: "PaginationEllipsis",
+  props: {
+    items: {},
+    index: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const ellipsisPage = computed(() => {
+      if (props.index === 1) {
+        const page = props.items[props.index + 1];
+        return page.value - 1;
+      } else {
+        const page = props.items[props.index - 1];
+        return page.value + 1;
+      }
+    });
+    const ctx = injectPaginationRootContext();
+    const onSelect = () => {
+      ctx.onPageChange(ellipsisPage.value);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(PaginationEllipsis), {
+        class: "ui-PaginationEllipsis ui-Button",
+        as: "button",
+        type: "button",
+        "aria-label": ellipsisPage.value,
+        value: `Page ${ellipsisPage.value}`,
+        onClick: withModifiers(onSelect, ["prevent"])
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(EllipsisIcon))
+        ]),
+        _: 1
+      }, 8, ["aria-label", "value"]);
+    };
+  }
+});
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "Pagination",
-  props: /* @__PURE__ */ mergeModels({
-    total: {},
-    perpage: { default: 10 },
-    edge: { default: 2 },
+  props: {
+    color: { default: "gray" },
+    size: { default: "2" },
     variant: { default: "ghost" },
-    color: {},
-    radius: {},
-    size: { default: "1" },
-    highContrast: { type: Boolean },
+    navigation: { default: "all" },
+    page: {},
+    defaultPage: {},
+    itemsPerPage: { default: 10 },
+    total: {},
+    siblingCount: {},
     disabled: { type: Boolean },
-    as: {},
-    asChild: { type: Boolean }
-  }, {
-    "page": { required: true },
-    "pageModifiers": {}
-  }),
+    showEdges: { type: Boolean },
+    asChild: { type: Boolean },
+    as: {}
+  },
   emits: ["update:page"],
-  setup(__props) {
+  setup(__props, { emit: __emit }) {
     const props = __props;
-    const page = useModel(__props, "page");
+    const emits = __emit;
+    const forwarded = useForwardPropsEmitsWithout(
+      props,
+      emits,
+      ["color", "size", "variant", "navigation"]
+    );
     const resetClass = buildPropsClass(props, ["size", "variant"]);
-    const buttonProps = computed(() => {
-      return {
-        color: props.color,
-        radius: props.radius,
-        variant: props.variant,
-        size: props.size,
-        highContrast: props.highContrast,
-        disabled: props.disabled
-      };
+    const showPrevNext = computed(() => {
+      return props.navigation === "all" || props.navigation === "prev-next";
     });
-    const pagination = computed(() => {
-      const totalPages = Math.ceil(props.total / props.perpage);
-      const prevPage = page.value > 1 ? page.value - 1 : null;
-      const nextPage = page.value < totalPages ? page.value + 1 : null;
-      const pagesOverflow = 5 + props.edge * 2;
-      const hasLeftEdge = totalPages > pagesOverflow && page.value > props.edge + 3;
-      const hasRightEdge = totalPages > pagesOverflow && page.value + props.edge + 2 < totalPages;
-      const pageList = [];
-      let left = 2, right = totalPages - 1;
-      if (hasLeftEdge && !hasRightEdge) {
-        left = Math.max(4, totalPages - 2 * props.edge - 2);
-      } else if (!hasLeftEdge && hasRightEdge) {
-        right = Math.min(2 * props.edge + 3, totalPages - 1);
-      } else if (hasLeftEdge && hasRightEdge) {
-        left = page.value - props.edge;
-        right = page.value + props.edge;
-      }
-      for (let i = left; i <= right; i++) {
-        pageList.push(i);
-      }
-      return {
-        totalPages,
-        prev: prevPage,
-        next: nextPage,
-        hasLeftEdge,
-        hasRightEdge,
-        pageList
-      };
+    const showFirstLast = computed(() => {
+      return props.navigation === "all" || props.navigation === "first-last";
     });
-    const selectPage = (n) => {
-      page.value = n;
-    };
-    const selectLeft = () => {
-      selectPage(page.value - props.edge);
-    };
-    const selectRight = () => {
-      selectPage(page.value + props.edge);
-    };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["ui-Pagination", unref(resetClass)])
-      }, [
-        pagination.value.prev ? (openBlock(), createBlock(_sfc_main$X, mergeProps({ key: 0 }, buttonProps.value, {
-          "aria-label": "Previous",
-          onClick: _cache[0] || (_cache[0] = withModifiers(($event) => selectPage(pagination.value.prev), ["prevent"]))
-        }), {
-          default: withCtx(() => [
-            renderSlot(_ctx.$slots, "prev-page", {
-              page: pagination.value.prev
-            }, () => [
-              createVNode(unref(Icon), { icon: "lucide:chevron-left" })
-            ])
-          ]),
-          _: 3
-        }, 16)) : createCommentVNode("", true),
-        createVNode(_sfc_main$Y, mergeProps(buttonProps.value, {
-          disabled: page.value === 1,
-          "aria-current": "page",
-          onClick: _cache[1] || (_cache[1] = withModifiers(($event) => selectPage(1), ["prevent"]))
-        }), {
-          default: withCtx(() => [
-            renderSlot(_ctx.$slots, "page", { page: 1 }, () => [
-              _cache[4] || (_cache[4] = createTextVNode("1", -1))
-            ])
-          ]),
-          _: 3
-        }, 16, ["disabled"]),
-        pagination.value.hasLeftEdge ? (openBlock(), createBlock(_sfc_main$X, mergeProps({ key: 1 }, buttonProps.value, {
-          onClick: withModifiers(selectLeft, ["prevent"])
-        }), {
-          default: withCtx(() => [
-            renderSlot(_ctx.$slots, "prev-edge", {
-              page: page.value - _ctx.edge
-            }, () => [
-              createVNode(unref(Icon), { icon: "lucide:ellipsis" })
-            ])
-          ]),
-          _: 3
-        }, 16)) : createCommentVNode("", true),
-        (openBlock(true), createElementBlock(Fragment, null, renderList(pagination.value.pageList, (p) => {
-          return openBlock(), createBlock(_sfc_main$Y, mergeProps({ key: p }, { ref_for: true }, buttonProps.value, {
-            disabled: p === page.value,
-            "aria-current": "page",
-            onClick: withModifiers(($event) => selectPage(p), ["prevent"])
-          }), {
-            default: withCtx(() => [
-              renderSlot(_ctx.$slots, "page", { page: p }, () => [
-                createTextVNode(toDisplayString(p), 1)
-              ])
+      return openBlock(), createBlock(unref(PaginationRoot), mergeProps(unref(forwarded), {
+        class: ["ui-PaginationRoot", unref(resetClass)],
+        "data-accent-color": _ctx.color
+      }), {
+        default: withCtx(() => [
+          createVNode(unref(PaginationList), { class: "ui-PaginationList" }, {
+            default: withCtx(({ items }) => [
+              showFirstLast.value ? (openBlock(), createBlock(unref(PaginationFirst), {
+                key: 0,
+                class: normalizeClass(["ui-PaginationFirst ui-Button", unref(resetClass)])
+              }, {
+                default: withCtx(() => [
+                  createVNode(unref(FirstIcon))
+                ]),
+                _: 1
+              }, 8, ["class"])) : createCommentVNode("", true),
+              showPrevNext.value ? (openBlock(), createBlock(unref(PaginationPrev), {
+                key: 1,
+                class: normalizeClass(["ui-PaginationPrev ui-Button", unref(resetClass)])
+              }, {
+                default: withCtx(() => [
+                  createVNode(unref(PrevIcon))
+                ]),
+                _: 1
+              }, 8, ["class"])) : createCommentVNode("", true),
+              (openBlock(true), createElementBlock(Fragment, null, renderList(items, (page, index) => {
+                return openBlock(), createElementBlock(Fragment, { key: index }, [
+                  page.type === "page" ? (openBlock(), createBlock(unref(PaginationListItem), {
+                    key: 0,
+                    class: normalizeClass(["ui-PaginationListItem ui-Button", unref(resetClass)]),
+                    value: page.value
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(page.value), 1)
+                    ]),
+                    _: 2
+                  }, 1032, ["class", "value"])) : (openBlock(), createBlock(_sfc_main$8, {
+                    key: 1,
+                    items,
+                    index,
+                    class: normalizeClass(unref(resetClass)),
+                    as: "button"
+                  }, null, 8, ["items", "index", "class"]))
+                ], 64);
+              }), 128)),
+              showPrevNext.value ? (openBlock(), createBlock(unref(PaginationNext), {
+                key: 2,
+                class: normalizeClass(["ui-PaginationNext ui-Button", unref(resetClass)])
+              }, {
+                default: withCtx(() => [
+                  createVNode(unref(NextIcon))
+                ]),
+                _: 1
+              }, 8, ["class"])) : createCommentVNode("", true),
+              showFirstLast.value ? (openBlock(), createBlock(unref(PaginationLast), {
+                key: 3,
+                class: normalizeClass(["ui-PaginationLast ui-Button", unref(resetClass)])
+              }, {
+                default: withCtx(() => [
+                  createVNode(unref(LastIcon))
+                ]),
+                _: 1
+              }, 8, ["class"])) : createCommentVNode("", true)
             ]),
-            _: 2
-          }, 1040, ["disabled", "onClick"]);
-        }), 128)),
-        pagination.value.hasRightEdge ? (openBlock(), createBlock(_sfc_main$X, mergeProps({ key: 2 }, buttonProps.value, {
-          onClick: withModifiers(selectRight, ["prevent"])
-        }), {
-          default: withCtx(() => [
-            renderSlot(_ctx.$slots, "next-edge", {
-              page: page.value + _ctx.edge
-            }, () => [
-              createVNode(unref(Icon), { icon: "lucide:ellipsis" })
-            ])
-          ]),
-          _: 3
-        }, 16)) : createCommentVNode("", true),
-        pagination.value.totalPages > 1 ? (openBlock(), createBlock(_sfc_main$Y, mergeProps({ key: 3 }, buttonProps.value, {
-          disabled: pagination.value.totalPages === page.value,
-          "aria-current": "page",
-          onClick: _cache[2] || (_cache[2] = withModifiers(($event) => selectPage(pagination.value.totalPages), ["prevent"]))
-        }), {
-          default: withCtx(() => [
-            renderSlot(_ctx.$slots, "page", {
-              page: pagination.value.totalPages
-            }, () => [
-              createTextVNode(toDisplayString(pagination.value.totalPages), 1)
-            ])
-          ]),
-          _: 3
-        }, 16, ["disabled"])) : createCommentVNode("", true),
-        pagination.value.next ? (openBlock(), createBlock(_sfc_main$X, mergeProps({ key: 4 }, buttonProps.value, {
-          "aria-label": "Next",
-          onClick: _cache[3] || (_cache[3] = withModifiers(($event) => selectPage(pagination.value.next), ["prevent"]))
-        }), {
-          default: withCtx(() => [
-            renderSlot(_ctx.$slots, "next-page", {
-              page: pagination.value.next
-            }, () => [
-              createVNode(unref(Icon), { icon: "lucide:chevron-right" })
-            ])
-          ]),
-          _: 3
-        }, 16)) : createCommentVNode("", true)
-      ], 2);
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 16, ["class", "data-accent-color"]);
     };
   }
 });
@@ -2639,9 +3003,9 @@ const useToastManager = /* @__PURE__ */ createGlobalState(() => {
       if (options.error) {
         const msg = options.error(e);
         if (typeof msg === "string") {
-          update(id, { title: msg, category: "error" });
+          update(id, { duration: void 0, title: msg, category: "error" });
         } else {
-          update(id, { ...msg, category: "error" });
+          update(id, { duration: void 0, ...msg, category: "error" });
         }
       }
     });
@@ -2659,71 +3023,71 @@ const useToastManager = /* @__PURE__ */ createGlobalState(() => {
     promise
   };
 });
-const _sfc_main$7 = {};
-const _hoisted_1$8 = { class: "ui-SpinnerIcon" };
+const _sfc_main$6 = {};
+const _hoisted_1$7 = { class: "ui-SpinnerIcon" };
 function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("span", _hoisted_1$8, _cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("span", _hoisted_1$7, [..._cache[0] || (_cache[0] = [
     createStaticVNode('<span class="ui-SpinnerLeaf"></span><span class="ui-SpinnerLeaf"></span><span class="ui-SpinnerLeaf"></span><span class="ui-SpinnerLeaf"></span><span class="ui-SpinnerLeaf"></span><span class="ui-SpinnerLeaf"></span><span class="ui-SpinnerLeaf"></span><span class="ui-SpinnerLeaf"></span>', 8)
-  ]));
+  ])]);
 }
-const SpinnerIcon = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render]]);
-const _hoisted_1$7 = {
+const SpinnerIcon = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render]]);
+const _hoisted_1$6 = {
   viewBox: "0 0 24 24",
   width: "1em",
   height: "1em"
 };
 function render$4(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$7, _cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("svg", _hoisted_1$6, [..._cache[0] || (_cache[0] = [
     createElementVNode("path", {
       fill: "currentColor",
       d: "M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10m0-12.5a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3m2 5.5h-1v-4.5h-3v2h1V15h-1v2h4z"
     }, null, -1)
-  ]));
+  ])]);
 }
 const InfoIcon = markRaw({ name: "ri-information-2-fill", render: render$4 });
-const _hoisted_1$6 = {
+const _hoisted_1$5 = {
   viewBox: "0 0 24 24",
   width: "1em",
   height: "1em"
 };
 function render$3(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$6, _cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("svg", _hoisted_1$5, [..._cache[0] || (_cache[0] = [
     createElementVNode("path", {
       fill: "currentColor",
       d: "M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10m5.457-12.543L11 15.914l-4.207-4.207l1.414-1.414L11 13.086l5.043-5.043z"
     }, null, -1)
-  ]));
+  ])]);
 }
 const SuccessIcon = markRaw({ name: "ri-checkbox-circle-fill", render: render$3 });
-const _hoisted_1$5 = {
+const _hoisted_1$4 = {
   viewBox: "0 0 24 24",
   width: "1em",
   height: "1em"
 };
 function render$2(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$5, _cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("svg", _hoisted_1$4, [..._cache[0] || (_cache[0] = [
     createElementVNode("path", {
       fill: "currentColor",
       d: "m12.866 3l9.526 16.5a1 1 0 0 1-.866 1.5H2.474a1 1 0 0 1-.866-1.5L11.134 3a1 1 0 0 1 1.732 0M11 16v2h2v-2zm0-7v5h2V9z"
     }, null, -1)
-  ]));
+  ])]);
 }
 const WarningIcon = markRaw({ name: "ri-alert-fill", render: render$2 });
-const _hoisted_1$4 = {
+const _hoisted_1$3 = {
   viewBox: "0 0 24 24",
   width: "1em",
   height: "1em"
 };
 function render$1(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$4, _cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("svg", _hoisted_1$3, [..._cache[0] || (_cache[0] = [
     createElementVNode("path", {
       fill: "currentColor",
       d: "M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10m-1-7v2h2v-2zm0-8v6h2V7z"
     }, null, -1)
-  ]));
+  ])]);
 }
 const ErrorIcon = markRaw({ name: "ri-error-warning-fill", render: render$1 });
-const _hoisted_1$3 = ["data-accent-color"];
+const _hoisted_1$2 = ["data-accent-color"];
 const _hoisted_2$1 = { class: "ui-ToastContent" };
 const CATEGORY_ICONS = {
   loading: SpinnerIcon,
@@ -2739,7 +3103,7 @@ const CATEGORY_COLORS = {
   warning: "orange",
   error: "red"
 };
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "ToastItem",
   props: {
     yPosition: {},
@@ -2809,7 +3173,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
             "data-accent-color": categoryColor.value
           }, [
             (openBlock(), createBlock(resolveDynamicComponent(categoryIcon.value)))
-          ], 8, _hoisted_1$3)) : createCommentVNode("", true),
+          ], 8, _hoisted_1$2)) : createCommentVNode("", true),
           createElementVNode("div", _hoisted_2$1, [
             createVNode(unref(ToastTitle), { class: "ui-ToastTitle" }, {
               default: withCtx(() => [
@@ -2835,7 +3199,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
             onClick: _ctx.message.action.onClick
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$Y, {
+              createVNode(_sfc_main$13, {
                 variant: _ctx.message.action.variant || "soft",
                 radius: _ctx.message.action.radius,
                 size: _ctx.message.action.size || "1",
@@ -2855,7 +3219,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -2882,7 +3246,10 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       if (props.swipeDirection) {
         return props.swipeDirection;
       }
-      return xPosition.value;
+      if (xPosition.value !== "center") {
+        return xPosition.value;
+      }
+      return yPosition.value === "top" ? "up" : "down";
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(ToastProvider), normalizeProps(guardReactiveProps({ ...unref(forwarded), swipeDirection: swipeDirection.value })), {
@@ -2894,7 +3261,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
               message: msg,
               index
             }, () => [
-              (openBlock(), createBlock(_sfc_main$6, {
+              (openBlock(), createBlock(_sfc_main$5, {
                 key: msg.id,
                 message: msg,
                 index,
@@ -2905,7 +3272,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           }), 128)),
           createVNode(unref(ToastPortal), null, {
             default: withCtx(() => [
-              createVNode(_sfc_main$S, null, {
+              createVNode(_sfc_main$$, null, {
                 default: withCtx(() => [
                   createVNode(unref(ToastViewport), mergeProps({ class: "ui-ToastViewport" }, _ctx.$attrs, {
                     class: `r-size-${_ctx.size}`,
@@ -2937,9 +3304,9 @@ const toast = Object.assign(
     promise: toastManager.promise
   }
 );
-const _hoisted_1$2 = ["data-size", "data-variant"];
+const _hoisted_1$1 = ["data-size", "data-variant"];
 const _hoisted_2 = ["data-layout"];
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "Table",
   props: {
     size: { default: "2" },
@@ -2954,7 +3321,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         "data-size": props.size,
         "data-variant": props.variant
       }, [
-        createVNode(_sfc_main$V, null, {
+        createVNode(_sfc_main$10, null, {
           default: withCtx(() => [
             createElementVNode("table", {
               class: "ui-TableContent",
@@ -2965,11 +3332,11 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         })
-      ], 8, _hoisted_1$2);
+      ], 8, _hoisted_1$1);
     };
   }
 });
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "Separator",
   props: {
     as: { default: "span" },
@@ -2990,90 +3357,6 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$1 = ["textContent"];
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
-  ...{
-    inheritAttrs: false
-  },
-  __name: "Tooltip",
-  props: {
-    content: {},
-    maxWidth: { default: "360px" },
-    color: { default: "gray" },
-    forceMount: { type: Boolean },
-    ariaLabel: {},
-    asChild: { type: Boolean },
-    as: {},
-    side: { default: "top" },
-    sideOffset: { default: 4 },
-    align: {},
-    alignOffset: {},
-    avoidCollisions: { type: Boolean, default: true },
-    collisionBoundary: {},
-    collisionPadding: { default: 10 },
-    arrowPadding: {},
-    sticky: {},
-    hideWhenDetached: { type: Boolean },
-    positionStrategy: {},
-    updatePositionStrategy: {}
-  },
-  setup(__props) {
-    const props = __props;
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(TooltipRoot), null, {
-        default: withCtx(() => [
-          createVNode(unref(TooltipTrigger), mergeProps({
-            as: props.as,
-            "as-child": props.asChild
-          }, _ctx.$attrs), {
-            default: withCtx(() => [
-              renderSlot(_ctx.$slots, "default")
-            ]),
-            _: 3
-          }, 16, ["as", "as-child"]),
-          createVNode(unref(TooltipPortal), null, {
-            default: withCtx(() => [
-              createVNode(_sfc_main$S, null, {
-                default: withCtx(() => [
-                  createVNode(unref(TooltipContent), {
-                    class: "ui-Tooltip",
-                    align: props.align,
-                    "align-offset": props.alignOffset,
-                    "aria-label": props.ariaLabel,
-                    "arrow-padding": props.arrowPadding,
-                    "avoid-collisions": props.avoidCollisions,
-                    "collision-boundary": props.collisionBoundary,
-                    "collision-padding": props.collisionPadding,
-                    "hide-when-detached": props.hideWhenDetached,
-                    side: props.side,
-                    "side-offset": props.sideOffset,
-                    sticky: props.sticky,
-                    "data-accent-color": props.color,
-                    style: normalizeStyle({ maxWidth: props.maxWidth })
-                  }, {
-                    default: withCtx(() => [
-                      renderSlot(_ctx.$slots, "content", {}, () => [
-                        createElementVNode("p", {
-                          class: "ui-TooltipText",
-                          textContent: toDisplayString(props.content)
-                        }, null, 8, _hoisted_1$1)
-                      ]),
-                      createVNode(unref(TooltipArrow), { class: "ui-TooltipArrow" })
-                    ]),
-                    _: 3
-                  }, 8, ["align", "align-offset", "aria-label", "arrow-padding", "avoid-collisions", "collision-boundary", "collision-padding", "hide-when-detached", "side", "side-offset", "sticky", "data-accent-color", "style"])
-                ]),
-                _: 3
-              })
-            ]),
-            _: 3
-          })
-        ]),
-        _: 3
-      });
-    };
-  }
-});
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "Quota",
   props: {
@@ -3128,12 +3411,12 @@ const _hoisted_1 = {
   height: "1em"
 };
 function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [
     createElementVNode("path", {
       fill: "currentColor",
       d: "M4 12a8 8 0 1 1 16 0a8 8 0 0 1-16 0m8-10C6.477 2 2 6.477 2 12s4.477 10 10 10s10-4.477 10-10S17.523 2 12 2m5.457 7.457l-1.414-1.414L11 13.086l-2.793-2.793l-1.414 1.414L11 15.914z"
     }, null, -1)
-  ]));
+  ])]);
 }
 const CheckIcon = markRaw({ name: "ri-checkbox-circle-line", render });
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -3168,18 +3451,19 @@ export {
   _sfc_main$d as AccordionTrigger,
   AlertDialogAction,
   AlertDialogCancel,
-  _sfc_main$T as AlertDialogDescription,
-  _sfc_main$Q as AlertDialogPopup,
+  _sfc_main$Z as AlertDialogCancelButton,
+  _sfc_main$X as AlertDialogDescription,
+  _sfc_main$V as AlertDialogPopup,
   AlertDialogRoot,
-  _sfc_main$U as AlertDialogTitle,
+  _sfc_main$Y as AlertDialogTitle,
   AlertDialogTrigger,
-  _sfc_main$$ as Avatar,
-  _sfc_main$_ as Badge,
-  _sfc_main$Y as Button,
-  _sfc_main$Z as Card,
+  _sfc_main$16 as Avatar,
+  _sfc_main$15 as Badge,
+  _sfc_main$13 as Button,
+  _sfc_main$14 as Card,
   _sfc_main$K as Checkbox,
   CheckboxGroupRoot as CheckboxGroup,
-  _sfc_main$W as CloseButton,
+  _sfc_main$11 as CloseButton,
   _sfc_main$9 as CollapsibleContent,
   _sfc_main$b as CollapsibleIndicator,
   _sfc_main$c as CollapsibleRoot,
@@ -3192,22 +3476,29 @@ export {
   _sfc_main$u as ComboboxItem,
   _sfc_main$t as ComboboxLabel,
   _sfc_main$x as ComboboxRoot,
-  DialogClose,
-  _sfc_main$T as DialogDescription,
-  _sfc_main$R as DialogPopup,
+  DialogClose2 as DialogClose,
+  _sfc_main$Z as DialogCloseButton,
+  _sfc_main$X as DialogDescription,
+  _sfc_main$W as DialogPopup,
   DialogRoot,
-  _sfc_main$U as DialogTitle,
+  _sfc_main$Y as DialogTitle,
   DialogTrigger,
-  _sfc_main$P as DropdownMenuContent,
-  _sfc_main$O as DropdownMenuItem,
+  _sfc_main$U as DropdownMenuContent,
+  _sfc_main$T as DropdownMenuItem,
   DropdownMenuRoot,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
   _sfc_main$i as Editable,
-  _sfc_main$X as IconButton,
-  _sfc_main$8 as Pagination,
+  _sfc_main$12 as IconButton,
+  _sfc_main$M as NavigationMenuContent,
+  NavigationMenuItem,
+  _sfc_main$O as NavigationMenuLink,
+  _sfc_main$P as NavigationMenuList,
+  _sfc_main$Q as NavigationMenuRoot,
+  _sfc_main$N as NavigationMenuTrigger,
+  _sfc_main$7 as Pagination,
   PopoverClose,
-  _sfc_main$M as PopoverPopup,
+  _sfc_main$R as PopoverPopup,
   PopoverRoot,
   PopoverTrigger,
   _sfc_main$1 as Quota,
@@ -3219,7 +3510,7 @@ export {
   _sfc_main$l as RadioTabsItem,
   _sfc_main$m as RadioTabsRoot,
   _sfc_main as SavingIndicator,
-  _sfc_main$V as ScrollArea,
+  _sfc_main$10 as ScrollArea,
   _sfc_main$C as SelectContent,
   SelectGroup,
   _sfc_main$A as SelectItem,
@@ -3227,22 +3518,22 @@ export {
   _sfc_main$D as SelectRoot,
   SelectSeparator,
   _sfc_main$B as SelectTrigger,
-  _sfc_main$3 as Separator,
+  _sfc_main$2 as Separator,
   SpinnerIcon,
   _sfc_main$L as Switch,
-  _sfc_main$4 as Table,
+  _sfc_main$3 as Table,
   TabsContent,
   _sfc_main$k as TabsList,
   TabsRoot,
   _sfc_main$j as TabsTrigger,
   _sfc_main$F as TextArea,
   _sfc_main$G as TextField,
-  _sfc_main$10 as ThemeProvider,
-  _sfc_main$5 as ToastProvider,
+  _sfc_main$17 as ThemeProvider,
+  _sfc_main$4 as ToastProvider,
   _sfc_main$J as Toggle,
   _sfc_main$H as ToggleGroupItem,
   _sfc_main$I as ToggleGroupRoot,
-  _sfc_main$2 as Tooltip,
+  _sfc_main$_ as Tooltip,
   buildPropsClass,
   injectThemeContext,
   provideThemeContext,