@typlog/ui 0.11.3 → 0.11.5

package/dist/components.js

@@ -1,8 +1,54 @@
-import { computed, defineComponent, createBlock, openBlock, unref, normalizeClass, withCtx, createVNode, createTextVNode, toDisplayString, renderSlot, createElementBlock, mergeProps, createCommentVNode, createElementVNode, toRefs, mergeModels, ref, useModel, onMounted, onBeforeUnmount, useTemplateRef, withDirectives, isRef, vModelDynamic, vModelText, normalizeStyle, normalizeProps, guardReactiveProps, Fragment, watch, renderList, withModifiers, vModelRadio } from "vue";
-import { useForwardProps, useEmitAsProps, AvatarRoot, AvatarImage, AvatarFallback, Primitive, ScrollAreaRoot, ScrollAreaViewport, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaCorner, AlertDialogPortal, AlertDialogOverlay, AlertDialogContent, DialogTitle, DialogClose, DialogPortal, DialogOverlay, DialogContent, useForwardExpose, createContext, DropdownMenuPortal, DropdownMenuContent, DropdownMenuItem, PopoverPortal, PopoverContent, SwitchRoot, SwitchThumb, CheckboxRoot, CheckboxIndicator, Toggle, ToggleGroupRoot, ToggleGroupItem, SelectRoot, SelectPortal, SelectContent, SelectViewport, SelectTrigger, SelectValue, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, ComboboxRoot, injectComboboxRootContext as injectComboboxRootContext$1, useForwardPropsEmits as useForwardPropsEmits$1, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, RadioGroupRoot, RadioGroupItem, TabsList, TabsIndicator, TabsTrigger, EditableRoot, EditableArea, EditablePreview, EditableInput, AccordionRoot, AccordionItem, AccordionContent, AccordionTrigger, CollapsibleContent, TooltipProvider, TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow, ProgressRoot, ProgressIndicator } from "reka-ui";
-import { AlertDialogAction, AlertDialogCancel, AlertDialogDescription, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, CollapsibleRoot, CollapsibleTrigger, ComboboxEmpty, ComboboxGroup, DialogClose as DialogClose2, DialogDescription, DialogRoot, DialogTrigger, DropdownMenuRoot, DropdownMenuTrigger, PopoverClose, PopoverRoot, PopoverTrigger, RadioGroupItem as RadioGroupItem2, SelectGroup, TabsContent, TabsRoot } from "reka-ui";
+import { defineComponent, toRefs, createBlock, openBlock, unref, withCtx, createVNode, renderSlot, computed, normalizeClass, createTextVNode, toDisplayString, createElementBlock, mergeProps, createCommentVNode, createElementVNode, mergeModels, ref, useModel, onMounted, onBeforeUnmount, useTemplateRef, withDirectives, isRef, vModelDynamic, vModelText, normalizeStyle, normalizeProps, guardReactiveProps, Fragment, watch, renderList, withModifiers, vModelRadio } from "vue";
+import { createContext, TooltipProvider, Primitive, useForwardProps, useEmitAsProps, AvatarRoot, AvatarImage, AvatarFallback, ScrollAreaRoot, ScrollAreaViewport, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaCorner, AlertDialogPortal, AlertDialogOverlay, AlertDialogContent, DialogPortal, DialogOverlay, DialogContent, DialogClose, useForwardExpose, DropdownMenuPortal, DropdownMenuContent, DropdownMenuItem, PopoverPortal, PopoverContent, SwitchRoot, SwitchThumb, CheckboxRoot, CheckboxIndicator, Toggle, ToggleGroupRoot, ToggleGroupItem, SelectRoot, SelectPortal, SelectContent, SelectViewport, SelectTrigger, SelectValue, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, ComboboxRoot, injectComboboxRootContext as injectComboboxRootContext$1, useForwardPropsEmits as useForwardPropsEmits$1, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, RadioGroupRoot, RadioGroupItem, TabsList, TabsIndicator, TabsTrigger, EditableRoot, EditableArea, EditablePreview, EditableInput, AccordionRoot, AccordionItem, AccordionContent, AccordionTrigger, CollapsibleContent, TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow, ProgressRoot, ProgressIndicator } from "reka-ui";
+import { AlertDialogAction, AlertDialogCancel, AlertDialogDescription, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, CollapsibleRoot, CollapsibleTrigger, ComboboxEmpty, ComboboxGroup, DialogClose as DialogClose2, DialogDescription, DialogRoot, DialogTitle, DialogTrigger, DropdownMenuRoot, DropdownMenuTrigger, PopoverClose, PopoverRoot, PopoverTrigger, RadioGroupItem as RadioGroupItem2, SelectGroup, TabsContent, TabsRoot } from "reka-ui";
 import { Icon } from "@iconify/vue";
 import { Icon as Icon2 } from "@iconify/vue";
+const [injectThemeContext, provideThemeContext] = createContext("ThemeProvider");
+const _sfc_main$Y = /* @__PURE__ */ defineComponent({
+  __name: "ThemeProvider",
+  props: {
+    accentColor: { default: "indigo" },
+    radius: { default: "medium" },
+    grayColor: { default: "auto" },
+    scaling: { default: "100%" },
+    hasBackground: { type: Boolean, default: true },
+    asChild: { type: Boolean },
+    as: { default: "div" }
+  },
+  setup(__props) {
+    const props = __props;
+    const { accentColor, radius, grayColor, scaling, hasBackground } = toRefs(props);
+    provideThemeContext({
+      accentColor,
+      radius,
+      grayColor,
+      scaling,
+      hasBackground
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(TooltipProvider), null, {
+        default: withCtx(() => [
+          createVNode(unref(Primitive), {
+            class: "ui-root",
+            "data-accent-color": unref(accentColor),
+            "data-gray-color": unref(grayColor),
+            "data-radius": unref(radius),
+            "data-scaling": unref(scaling),
+            "data-has-background": unref(hasBackground),
+            as: props.as,
+            "as-child": props.asChild
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+          }, 8, ["data-accent-color", "data-gray-color", "data-radius", "data-scaling", "data-has-background", "as", "as-child"])
+        ]),
+        _: 3
+      });
+    };
+  }
+});
 function useForwardPropsEmits(props, emit, exclude) {
   const parsedProps = useForwardProps(props);
   const emitsAsProps = useEmitAsProps(emit);
@@ -60,7 +106,7 @@ function kebabize(str) {
 function _kebabReplace(str, ofs) {
   return (ofs ? "-" : "") + str.toLowerCase();
 }
-const _sfc_main$Y = /* @__PURE__ */ defineComponent({
+const _sfc_main$X = /* @__PURE__ */ defineComponent({
   __name: "Avatar",
   props: {
     alt: {},
@@ -112,7 +158,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$X = /* @__PURE__ */ defineComponent({
+const _sfc_main$W = /* @__PURE__ */ defineComponent({
   __name: "Badge",
   props: {
     variant: { default: "soft" },
@@ -144,7 +190,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$W = /* @__PURE__ */ defineComponent({
+const _sfc_main$V = /* @__PURE__ */ defineComponent({
   __name: "Inset",
   props: {
     side: { default: "all" },
@@ -168,7 +214,7 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$V = /* @__PURE__ */ defineComponent({
+const _sfc_main$U = /* @__PURE__ */ defineComponent({
   __name: "Card",
   props: {
     variant: { default: "surface" },
@@ -197,7 +243,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$U = /* @__PURE__ */ defineComponent({
+const _sfc_main$T = /* @__PURE__ */ defineComponent({
   __name: "CardHead",
   props: {
     color: {},
@@ -220,7 +266,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$T = /* @__PURE__ */ defineComponent({
+const _sfc_main$S = /* @__PURE__ */ defineComponent({
   __name: "Button",
   props: {
     variant: { default: "solid" },
@@ -254,7 +300,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$S = /* @__PURE__ */ defineComponent({
+const _sfc_main$R = /* @__PURE__ */ defineComponent({
   __name: "IconButton",
   props: {
     variant: {},
@@ -270,7 +316,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
     const props = __props;
     const forwarded = useForwardProps(props);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$T, mergeProps({ class: "ui-IconButton" }, unref(forwarded)), {
+      return openBlock(), createBlock(_sfc_main$S, mergeProps({ class: "ui-IconButton" }, unref(forwarded)), {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default")
         ]),
@@ -288,7 +334,7 @@ const BRAND_ICONS = {
   slack: "logos:slack-icon",
   figma: "logos:figma"
 };
-const _sfc_main$R = /* @__PURE__ */ defineComponent({
+const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   __name: "SocialButton",
   props: {
     brand: {},
@@ -326,7 +372,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$Q = /* @__PURE__ */ defineComponent({
+const _sfc_main$P = /* @__PURE__ */ defineComponent({
   __name: "ScrollArea",
   props: {
     size: { default: "1" },
@@ -390,17 +436,42 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$j = { class: "ui-DialogScroll" };
-const _hoisted_2$7 = ["data-align"];
-const _sfc_main$P = /* @__PURE__ */ defineComponent({
+const _sfc_main$O = /* @__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,
+        "data-has-background": unref(theme).hasBackground.value,
+        "as-child": ""
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["data-accent-color", "data-gray-color", "data-radius", "data-scaling", "data-has-background"]);
+    };
+  }
+});
+const _hoisted_1$j = { class: "ui-DialogWrapper" };
+const _hoisted_2$7 = { class: "ui-DialogContainer" };
+const _sfc_main$N = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
   __name: "AlertDialogContent",
   props: {
     to: {},
-    align: { default: "center" },
-    class: {},
     size: { default: "3" },
     width: {},
     minWidth: {},
@@ -434,100 +505,49 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
         to: props.to
       }, {
         default: withCtx(() => [
-          createVNode(unref(AlertDialogOverlay), { class: "ui-DialogOverlay" }, {
-            default: withCtx(() => [
-              createElementVNode("div", _hoisted_1$j, [
-                createElementVNode("div", {
-                  class: "ui-DialogScrollPadding",
-                  "data-align": props.align
-                }, [
-                  createVNode(unref(AlertDialogContent), mergeProps({
-                    class: ["ui-DialogContent", props.class],
-                    "data-size": props.size
-                  }, {
-                    ..._ctx.$attrs,
-                    ...unref(forwarded)
-                  }, {
-                    style: {
-                      width: props.width,
-                      height: props.height,
-                      minWidth: props.minWidth,
-                      maxWidth: props.maxWidth,
-                      minHeight: props.minHeight,
-                      maxHeight: props.maxHeight
-                    }
-                  }), {
-                    default: withCtx(() => [
-                      renderSlot(_ctx.$slots, "default")
-                    ]),
-                    _: 3
-                  }, 16, ["class", "data-size", "style"])
-                ], 8, _hoisted_2$7)
-              ])
-            ]),
-            _: 3
-          })
-        ]),
-        _: 3
-      }, 8, ["to"]);
-    };
-  }
-});
-const _sfc_main$O = /* @__PURE__ */ defineComponent({
-  __name: "DialogTitle",
-  props: {
-    variant: { default: "ghost" },
-    close: { type: Boolean },
-    asChild: { type: Boolean },
-    as: { default: "h2" }
-  },
-  setup(__props) {
-    const props = __props;
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$W, {
-        class: normalizeClass(["ui-DialogTitle", `r-variant-${_ctx.variant}`]),
-        side: "all"
-      }, {
-        default: withCtx(() => [
-          createVNode(unref(DialogTitle), {
-            class: "ui-DialogTitleText",
-            as: props.as
-          }, {
-            default: withCtx(() => [
-              renderSlot(_ctx.$slots, "default")
-            ]),
-            _: 3
-          }, 8, ["as"]),
-          _ctx.close ? (openBlock(), createBlock(unref(DialogClose), {
-            key: 0,
-            class: "ui-DialogTitleClose",
-            type: "button",
-            "aria-label": "Close",
-            "as-child": ""
-          }, {
+          createVNode(_sfc_main$O, null, {
             default: withCtx(() => [
-              createVNode(_sfc_main$S, {
-                color: "gray",
-                variant: "soft",
-                size: "1"
-              }, {
+              createVNode(unref(AlertDialogOverlay), { class: "ui-DialogOverlay" }, {
                 default: withCtx(() => [
-                  createVNode(unref(Icon), { icon: "lucide:x" })
+                  createElementVNode("div", _hoisted_1$j, [
+                    createElementVNode("div", _hoisted_2$7, [
+                      createVNode(unref(AlertDialogContent), mergeProps({
+                        class: ["ui-DialogContent", `r-size-${props.size}`]
+                      }, {
+                        ..._ctx.$attrs,
+                        ...unref(forwarded)
+                      }, {
+                        style: {
+                          width: props.width,
+                          height: props.height,
+                          minWidth: props.minWidth,
+                          maxWidth: props.maxWidth,
+                          minHeight: props.minHeight,
+                          maxHeight: props.maxHeight
+                        }
+                      }), {
+                        default: withCtx(() => [
+                          renderSlot(_ctx.$slots, "default")
+                        ]),
+                        _: 3
+                      }, 16, ["class", "style"])
+                    ])
+                  ])
                 ]),
-                _: 1
+                _: 3
               })
             ]),
-            _: 1
-          })) : createCommentVNode("", true)
+            _: 3
+          })
         ]),
         _: 3
-      }, 8, ["class"]);
+      }, 8, ["to"]);
     };
   }
 });
 const _hoisted_1$i = { class: "ui-DialogWrapper" };
 const _hoisted_2$6 = { class: "ui-DialogContainer" };
-const _sfc_main$N = /* @__PURE__ */ defineComponent({
+const _sfc_main$M = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -541,6 +561,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
     height: {},
     minHeight: {},
     maxHeight: {},
+    closeIcon: { type: Boolean },
     forceMount: { type: Boolean },
     disableOutsidePointerEvents: { type: Boolean },
     asChild: { type: Boolean },
@@ -560,39 +581,59 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
       "maxWidth",
       "height",
       "minHeight",
-      "maxHeight"
+      "maxHeight",
+      "closeIcon"
     ]);
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(DialogPortal), {
         to: props.to
       }, {
         default: withCtx(() => [
-          createVNode(unref(DialogOverlay), { class: "ui-DialogOverlay" }, {
+          createVNode(_sfc_main$O, null, {
             default: withCtx(() => [
-              createElementVNode("div", _hoisted_1$i, [
-                createElementVNode("div", _hoisted_2$6, [
-                  createVNode(unref(DialogContent), mergeProps({
-                    class: ["ui-DialogContent", `r-size-${props.size}`]
-                  }, {
-                    ..._ctx.$attrs,
-                    ...unref(forwarded)
-                  }, {
-                    style: {
-                      width: props.width,
-                      height: props.height,
-                      minWidth: props.minWidth,
-                      maxWidth: props.maxWidth,
-                      minHeight: props.minHeight,
-                      maxHeight: props.maxHeight
-                    }
-                  }), {
-                    default: withCtx(() => [
-                      renderSlot(_ctx.$slots, "default")
-                    ]),
-                    _: 3
-                  }, 16, ["class", "style"])
-                ])
-              ])
+              createVNode(unref(DialogOverlay), { class: "ui-DialogOverlay" }, {
+                default: withCtx(() => [
+                  createElementVNode("div", _hoisted_1$i, [
+                    createElementVNode("div", _hoisted_2$6, [
+                      createVNode(unref(DialogContent), mergeProps({
+                        class: ["ui-DialogContent", `r-size-${props.size}`]
+                      }, {
+                        ..._ctx.$attrs,
+                        ...unref(forwarded)
+                      }, {
+                        style: {
+                          width: props.width,
+                          height: props.height,
+                          minWidth: props.minWidth,
+                          maxWidth: props.maxWidth,
+                          minHeight: props.minHeight,
+                          maxHeight: props.maxHeight
+                        }
+                      }), {
+                        default: withCtx(() => [
+                          props.closeIcon ? (openBlock(), createBlock(_sfc_main$R, {
+                            key: 0,
+                            class: "ui-DialogContentClose",
+                            as: unref(DialogClose),
+                            type: "button",
+                            variant: "ghost",
+                            color: "gray",
+                            "aria-label": "Close"
+                          }, {
+                            default: withCtx(() => [
+                              createVNode(unref(Icon), { icon: "lucide:x" })
+                            ]),
+                            _: 1
+                          }, 8, ["as"])) : createCommentVNode("", true),
+                          renderSlot(_ctx.$slots, "default")
+                        ]),
+                        _: 3
+                      }, 16, ["class", "style"])
+                    ])
+                  ])
+                ]),
+                _: 3
+              })
             ]),
             _: 3
           })
@@ -602,43 +643,6 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$M = /* @__PURE__ */ defineComponent({
-  __name: "DialogHead",
-  props: {
-    title: {}
-  },
-  setup(__props) {
-    const props = __props;
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$W, {
-        class: "ui-DialogHead",
-        side: "x"
-      }, {
-        default: withCtx(() => [
-          createVNode(unref(DialogTitle), null, {
-            default: withCtx(() => [
-              createTextVNode(toDisplayString(props.title), 1)
-            ]),
-            _: 1
-          }),
-          createVNode(_sfc_main$S, {
-            as: unref(DialogClose),
-            type: "button",
-            variant: "ghost",
-            color: "gray",
-            "aria-label": "Close"
-          }, {
-            default: withCtx(() => [
-              createVNode(unref(Icon), { icon: "lucide:x" })
-            ]),
-            _: 1
-          }, 8, ["as"])
-        ]),
-        _: 1
-      });
-    };
-  }
-});
 const _hoisted_1$h = { class: "ui-MenuViewport" };
 const [injectDropdownMenuContentContext, provideDropdownMenuContentContext] = createContext("ui_DropdownMenuContent");
 const _sfc_main$L = /* @__PURE__ */ defineComponent({
@@ -691,27 +695,32 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
         to: props.to
       }, {
         default: withCtx(() => [
-          createVNode(unref(DropdownMenuContent), mergeProps({
-            ..._ctx.$attrs,
-            ...unref(forwarded)
+          createVNode(_sfc_main$O, {
+            "accent-color": props.color
           }, {
-            ref: unref(forwardRef),
-            class: "ui-PopperContent ui-MenuContent",
-            "data-accent-color": props.color,
-            "data-size": props.size
-          }), {
             default: withCtx(() => [
-              createVNode(_sfc_main$Q, { type: "auto" }, {
+              createVNode(unref(DropdownMenuContent), mergeProps({
+                ..._ctx.$attrs,
+                ...unref(forwarded)
+              }, {
+                ref: unref(forwardRef),
+                class: ["ui-PopperContent ui-MenuContent", `r-size-${props.size}`]
+              }), {
                 default: withCtx(() => [
-                  createElementVNode("div", _hoisted_1$h, [
-                    renderSlot(_ctx.$slots, "default")
-                  ])
+                  createVNode(_sfc_main$P, { type: "auto" }, {
+                    default: withCtx(() => [
+                      createElementVNode("div", _hoisted_1$h, [
+                        renderSlot(_ctx.$slots, "default")
+                      ])
+                    ]),
+                    _: 3
+                  })
                 ]),
                 _: 3
-              })
+              }, 16, ["class"])
             ]),
             _: 3
-          }, 16, ["data-accent-color", "data-size"])
+          }, 8, ["accent-color"])
         ]),
         _: 3
       }, 8, ["to"]);
@@ -795,15 +804,19 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
         to: props.to
       }, {
         default: withCtx(() => [
-          createVNode(unref(PopoverContent), mergeProps({ ..._ctx.$attrs, ...unref(forwarded) }, {
-            "data-size": props.size,
-            class: "ui-PopoverContent"
-          }), {
+          createVNode(_sfc_main$O, null, {
             default: withCtx(() => [
-              renderSlot(_ctx.$slots, "default")
+              createVNode(unref(PopoverContent), mergeProps({ ..._ctx.$attrs, ...unref(forwarded) }, {
+                class: ["ui-PopoverContent", `r-size-${props.size}`]
+              }), {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "default")
+                ]),
+                _: 3
+              }, 16, ["class"])
             ]),
             _: 3
-          }, 16, ["data-size"])
+          })
         ]),
         _: 3
       }, 8, ["to"]);
@@ -1478,53 +1491,59 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
         to: props.to
       }, {
         default: withCtx(() => [
-          createVNode(unref(SelectContent), mergeProps({ ref: unref(forwardRef) }, {
-            ..._ctx.$attrs,
-            ...unref(forwarded),
-            to: void 0,
-            variant: void 0
+          createVNode(_sfc_main$O, {
+            "accent-color": unref(context).color.value
           }, {
-            class: ["ui-SelectContent", contentClass.value],
-            "data-accent-color": unref(context).color.value
-          }), {
             default: withCtx(() => [
-              createVNode(unref(ScrollAreaRoot), {
-                type: "auto",
-                class: "ui-ScrollArea"
+              createVNode(unref(SelectContent), mergeProps({ ref: unref(forwardRef) }, {
+                ..._ctx.$attrs,
+                ...unref(forwarded),
+                to: void 0,
+                variant: void 0
               }, {
+                class: ["ui-SelectContent", contentClass.value]
+              }), {
                 default: withCtx(() => [
-                  createVNode(unref(SelectViewport), {
-                    class: "ui-SelectViewport",
-                    "as-child": ""
+                  createVNode(unref(ScrollAreaRoot), {
+                    type: "auto",
+                    class: "ui-ScrollArea"
                   }, {
                     default: withCtx(() => [
-                      createVNode(unref(ScrollAreaViewport), { class: "ui-ScrollAreaViewport" }, {
-                        default: withCtx(() => [
-                          renderSlot(_ctx.$slots, "default")
-                        ]),
-                        _: 3
-                      }),
-                      _cache[0] || (_cache[0] = createElementVNode("div", { class: "ui-ScrollAreaViewportFocusRing" }, null, -1)),
-                      createVNode(unref(ScrollAreaScrollbar), {
-                        class: "ui-ScrollAreaScrollbar",
-                        "data-size": 1,
-                        orientation: "vertical"
+                      createVNode(unref(SelectViewport), {
+                        class: "ui-SelectViewport",
+                        "as-child": ""
                       }, {
                         default: withCtx(() => [
-                          createVNode(unref(ScrollAreaThumb), { class: "ui-ScrollAreaThumb" })
+                          createVNode(unref(ScrollAreaViewport), { class: "ui-ScrollAreaViewport" }, {
+                            default: withCtx(() => [
+                              renderSlot(_ctx.$slots, "default")
+                            ]),
+                            _: 3
+                          }),
+                          _cache[0] || (_cache[0] = createElementVNode("div", { class: "ui-ScrollAreaViewportFocusRing" }, null, -1)),
+                          createVNode(unref(ScrollAreaScrollbar), {
+                            class: "ui-ScrollAreaScrollbar",
+                            "data-size": 1,
+                            orientation: "vertical"
+                          }, {
+                            default: withCtx(() => [
+                              createVNode(unref(ScrollAreaThumb), { class: "ui-ScrollAreaThumb" })
+                            ]),
+                            _: 1
+                          })
                         ]),
-                        _: 1
+                        _: 3,
+                        __: [0]
                       })
                     ]),
-                    _: 3,
-                    __: [0]
+                    _: 3
                   })
                 ]),
                 _: 3
-              })
+              }, 16, ["class"])
             ]),
             _: 3
-          }, 16, ["class", "data-accent-color"])
+          }, 8, ["accent-color"])
         ]),
         _: 3
       }, 8, ["to"]);
@@ -1875,54 +1894,60 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
         to: props.to
       }, {
         default: withCtx(() => [
-          createVNode(unref(ComboboxContent), mergeProps({ ref: unref(forwardRef) }, {
-            ..._ctx.$attrs,
-            ...unref(forwarded),
-            position: "popper",
-            to: void 0,
-            variant: void 0
+          createVNode(_sfc_main$O, {
+            "accent-color": unref(context).color.value
           }, {
-            class: ["ui-ComboboxContent", contentClass.value],
-            "data-accent-color": unref(context).color.value
-          }), {
             default: withCtx(() => [
-              createVNode(unref(ScrollAreaRoot), {
-                type: "auto",
-                class: "ui-ScrollArea"
+              createVNode(unref(ComboboxContent), mergeProps({ ref: unref(forwardRef) }, {
+                ..._ctx.$attrs,
+                ...unref(forwarded),
+                position: "popper",
+                to: void 0,
+                variant: void 0
               }, {
+                class: ["ui-ComboboxContent", contentClass.value]
+              }), {
                 default: withCtx(() => [
-                  createVNode(unref(ComboboxViewport), {
-                    class: "ui-ComboboxViewport",
-                    "as-child": ""
+                  createVNode(unref(ScrollAreaRoot), {
+                    type: "auto",
+                    class: "ui-ScrollArea"
                   }, {
                     default: withCtx(() => [
-                      createVNode(unref(ScrollAreaViewport), { class: "ui-ScrollAreaViewport" }, {
+                      createVNode(unref(ComboboxViewport), {
+                        class: "ui-ComboboxViewport",
+                        "as-child": ""
+                      }, {
                         default: withCtx(() => [
-                          renderSlot(_ctx.$slots, "default")
+                          createVNode(unref(ScrollAreaViewport), { class: "ui-ScrollAreaViewport" }, {
+                            default: withCtx(() => [
+                              renderSlot(_ctx.$slots, "default")
+                            ]),
+                            _: 3
+                          })
                         ]),
                         _: 3
+                      }),
+                      _cache[0] || (_cache[0] = createElementVNode("div", { class: "ui-ScrollAreaViewportFocusRing" }, null, -1)),
+                      createVNode(unref(ScrollAreaScrollbar), {
+                        class: "ui-ScrollAreaScrollbar",
+                        "data-size": 1,
+                        orientation: "vertical"
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(unref(ScrollAreaThumb), { class: "ui-ScrollAreaThumb" })
+                        ]),
+                        _: 1
                       })
                     ]),
-                    _: 3
-                  }),
-                  _cache[0] || (_cache[0] = createElementVNode("div", { class: "ui-ScrollAreaViewportFocusRing" }, null, -1)),
-                  createVNode(unref(ScrollAreaScrollbar), {
-                    class: "ui-ScrollAreaScrollbar",
-                    "data-size": 1,
-                    orientation: "vertical"
-                  }, {
-                    default: withCtx(() => [
-                      createVNode(unref(ScrollAreaThumb), { class: "ui-ScrollAreaThumb" })
-                    ]),
-                    _: 1
+                    _: 3,
+                    __: [0]
                   })
                 ]),
-                _: 3,
-                __: [0]
-              })
+                _: 3
+              }, 16, ["class"])
             ]),
             _: 3
-          }, 16, ["class", "data-accent-color"])
+          }, 8, ["accent-color"])
         ]),
         _: 3
       }, 8, ["to"]);
@@ -2119,7 +2144,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
         "data-high-contrast": unref(rootContext).highContrast?.value
       }, { ...unref(forwarded), asChild: false }), {
         default: withCtx(() => [
-          createVNode(_sfc_main$V, {
+          createVNode(_sfc_main$U, {
             "as-child": unref(forwarded).asChild
           }, {
             default: withCtx(() => [
@@ -2518,7 +2543,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["ui-Pagination", resetClass.value])
       }, [
-        pagination.value.prev ? (openBlock(), createBlock(_sfc_main$S, mergeProps({ key: 0 }, buttonProps.value, {
+        pagination.value.prev ? (openBlock(), createBlock(_sfc_main$R, mergeProps({ key: 0 }, buttonProps.value, {
           "aria-label": "Previous",
           onClick: _cache[0] || (_cache[0] = withModifiers(($event) => selectPage(pagination.value.prev), ["prevent"]))
         }), {
@@ -2531,7 +2556,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }, 16)) : createCommentVNode("", true),
-        createVNode(_sfc_main$T, mergeProps(buttonProps.value, {
+        createVNode(_sfc_main$S, mergeProps(buttonProps.value, {
           disabled: page.value === 1,
           "aria-current": "page",
           onClick: _cache[1] || (_cache[1] = withModifiers(($event) => selectPage(1), ["prevent"]))
@@ -2543,7 +2568,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }, 16, ["disabled"]),
-        pagination.value.hasLeftEdge ? (openBlock(), createBlock(_sfc_main$S, mergeProps({ key: 1 }, buttonProps.value, {
+        pagination.value.hasLeftEdge ? (openBlock(), createBlock(_sfc_main$R, mergeProps({ key: 1 }, buttonProps.value, {
           onClick: withModifiers(selectLeft, ["prevent"])
         }), {
           default: withCtx(() => [
@@ -2556,7 +2581,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           _: 3
         }, 16)) : createCommentVNode("", true),
         (openBlock(true), createElementBlock(Fragment, null, renderList(pagination.value.pageList, (p) => {
-          return openBlock(), createBlock(_sfc_main$T, mergeProps({ key: p }, { ref_for: true }, buttonProps.value, {
+          return openBlock(), createBlock(_sfc_main$S, mergeProps({ key: p }, { ref_for: true }, buttonProps.value, {
             disabled: p === page.value,
             "aria-current": "page",
             onClick: withModifiers(($event) => selectPage(p), ["prevent"])
@@ -2569,7 +2594,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             _: 2
           }, 1040, ["disabled", "onClick"]);
         }), 128)),
-        pagination.value.hasRightEdge ? (openBlock(), createBlock(_sfc_main$S, mergeProps({ key: 2 }, buttonProps.value, {
+        pagination.value.hasRightEdge ? (openBlock(), createBlock(_sfc_main$R, mergeProps({ key: 2 }, buttonProps.value, {
           onClick: withModifiers(selectRight, ["prevent"])
         }), {
           default: withCtx(() => [
@@ -2581,7 +2606,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }, 16)) : createCommentVNode("", true),
-        pagination.value.totalPages > 1 ? (openBlock(), createBlock(_sfc_main$T, mergeProps({ key: 3 }, buttonProps.value, {
+        pagination.value.totalPages > 1 ? (openBlock(), createBlock(_sfc_main$S, 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"]))
@@ -2595,7 +2620,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }, 16, ["disabled"])) : createCommentVNode("", true),
-        pagination.value.next ? (openBlock(), createBlock(_sfc_main$S, mergeProps({ key: 4 }, buttonProps.value, {
+        pagination.value.next ? (openBlock(), createBlock(_sfc_main$R, mergeProps({ key: 4 }, buttonProps.value, {
           "aria-label": "Next",
           onClick: _cache[3] || (_cache[3] = withModifiers(($event) => selectPage(pagination.value.next), ["prevent"]))
         }), {
@@ -2629,7 +2654,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         "data-size": props.size,
         "data-variant": props.variant
       }, [
-        createVNode(_sfc_main$Q, null, {
+        createVNode(_sfc_main$P, null, {
           default: withCtx(() => [
             createElementVNode("table", {
               class: "ui-TableContent",
@@ -2674,12 +2699,6 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   props: {
     to: {},
     content: {},
-    delayDuration: {},
-    skipDelayDuration: {},
-    disableHoverableContent: { type: Boolean },
-    disableClosingTrigger: { type: Boolean },
-    disabled: { type: Boolean },
-    ignoreNonKeyboardFocus: { type: Boolean },
     forceMount: { type: Boolean },
     ariaLabel: {},
     asChild: { type: Boolean },
@@ -2700,29 +2719,22 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(TooltipProvider), {
-        "delay-duration": props.delayDuration,
-        "disable-closing-trigger": props.disableClosingTrigger,
-        "disable-hoverable-content": props.disableHoverableContent,
-        disabled: props.disabled,
-        "ignore-non-keyboard-focus": props.ignoreNonKeyboardFocus,
-        "skip-delay-duration": props.skipDelayDuration
-      }, {
+      return openBlock(), createBlock(unref(TooltipRoot), null, {
         default: withCtx(() => [
-          createVNode(unref(TooltipRoot), null, {
+          createVNode(unref(TooltipTrigger), mergeProps({
+            as: props.as,
+            "as-child": props.asChild
+          }, _ctx.$attrs), {
             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), {
-                to: props.to
-              }, {
+              renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+          }, 16, ["as", "as-child"]),
+          createVNode(unref(TooltipPortal), {
+            to: props.to
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$O, null, {
                 default: withCtx(() => [
                   createVNode(unref(TooltipContent), {
                     class: "ui-Tooltip",
@@ -2751,13 +2763,13 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                   }, 8, ["align", "align-offset", "aria-label", "arrow-padding", "avoid-collisions", "collision-boundary", "collision-padding", "hide-when-detached", "side", "side-offset", "sticky"])
                 ]),
                 _: 3
-              }, 8, ["to"])
+              })
             ]),
             _: 3
-          })
+          }, 8, ["to"])
         ]),
         _: 3
-      }, 8, ["delay-duration", "disable-closing-trigger", "disable-hoverable-content", "disabled", "ignore-non-keyboard-focus", "skip-delay-duration"]);
+      });
     };
   }
 });
@@ -2887,16 +2899,16 @@ export {
   _sfc_main$9 as AccordionTrigger,
   AlertDialogAction,
   AlertDialogCancel,
-  _sfc_main$P as AlertDialogContent,
+  _sfc_main$N as AlertDialogContent,
   AlertDialogDescription,
   AlertDialogRoot,
   AlertDialogTitle,
   AlertDialogTrigger,
-  _sfc_main$Y as Avatar,
-  _sfc_main$X as Badge,
-  _sfc_main$T as Button,
-  _sfc_main$V as Card,
-  _sfc_main$U as CardHead,
+  _sfc_main$X as Avatar,
+  _sfc_main$W as Badge,
+  _sfc_main$S as Button,
+  _sfc_main$U as Card,
+  _sfc_main$T as CardHead,
   _sfc_main$H as Checkbox,
   _sfc_main$E as CheckboxGroupControl,
   _sfc_main$F as CheckboxGroupItem,
@@ -2914,11 +2926,10 @@ export {
   _sfc_main$n as ComboboxLabel,
   _sfc_main$r as ComboboxRoot,
   DialogClose2 as DialogClose,
-  _sfc_main$N as DialogContent,
+  _sfc_main$M as DialogContent,
   DialogDescription,
-  _sfc_main$M as DialogHead,
   DialogRoot,
-  _sfc_main$O as DialogTitle,
+  DialogTitle,
   DialogTrigger,
   _sfc_main$L as DropdownMenuContent,
   _sfc_main$K as DropdownMenuItem,
@@ -2926,9 +2937,9 @@ export {
   DropdownMenuTrigger,
   _sfc_main$f as Editable,
   Icon2 as Icon,
-  _sfc_main$S as IconButton,
+  _sfc_main$R as IconButton,
   _sfc_main as IconCircle,
-  _sfc_main$W as Inset,
+  _sfc_main$V as Inset,
   _sfc_main$7 as Pagination,
   _sfc_main$b as PlusMinusIcon,
   PopoverClose,
@@ -2944,7 +2955,7 @@ export {
   RadioGroupItem2 as RadioTabsItem,
   _sfc_main$i as RadioTabsList,
   _sfc_main$1 as SavingIndicator,
-  _sfc_main$Q as ScrollArea,
+  _sfc_main$P as ScrollArea,
   _sfc_main$w as SelectContent,
   SelectGroup,
   _sfc_main$u as SelectItem,
@@ -2953,7 +2964,7 @@ export {
   SelectSeparator,
   _sfc_main$v as SelectTrigger,
   _sfc_main$5 as Separator,
-  _sfc_main$R as SocialButton,
+  _sfc_main$Q as SocialButton,
   _sfc_main$2 as Spinner,
   _sfc_main$I as Switch,
   _sfc_main$6 as Table,
@@ -2963,6 +2974,7 @@ export {
   _sfc_main$g as TabsTrigger,
   _sfc_main$z as TextArea,
   _sfc_main$A as TextField,
+  _sfc_main$Y as ThemeProvider,
   _sfc_main$D as Toggle,
   _sfc_main$B as ToggleGroupItem,
   _sfc_main$C as ToggleGroupRoot,