@typlog/ui 0.11.2 → 0.11.4

package/dist/components.js

@@ -1,8 +1,52 @@
-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, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogClose, 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, DialogTitle as DialogTitle2, 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$X = /* @__PURE__ */ defineComponent({
+  __name: "ThemeProvider",
+  props: {
+    accentColor: { default: "indigo" },
+    radius: { default: "medium" },
+    grayColor: { default: "auto" },
+    scaling: { default: "100%" },
+    asChild: { type: Boolean },
+    as: { default: "div" }
+  },
+  setup(__props) {
+    const props = __props;
+    const { accentColor, radius, grayColor, scaling } = toRefs(props);
+    provideThemeContext({
+      accentColor,
+      radius,
+      grayColor,
+      scaling
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(TooltipProvider), null, {
+        default: withCtx(() => [
+          createVNode(unref(Primitive), {
+            class: "ui-root",
+            "data-is-root-theme": "",
+            "data-accent-color": props.accentColor,
+            "data-gray-color": props.grayColor,
+            "data-radius": props.radius,
+            "data-scaling": props.scaling,
+            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", "as", "as-child"])
+        ]),
+        _: 3
+      });
+    };
+  }
+});
 function useForwardPropsEmits(props, emit, exclude) {
   const parsedProps = useForwardProps(props);
   const emitsAsProps = useEmitAsProps(emit);
@@ -60,7 +104,7 @@ function kebabize(str) {
 function _kebabReplace(str, ofs) {
   return (ofs ? "-" : "") + str.toLowerCase();
 }
-const _sfc_main$X = /* @__PURE__ */ defineComponent({
+const _sfc_main$W = /* @__PURE__ */ defineComponent({
   __name: "Avatar",
   props: {
     alt: {},
@@ -112,7 +156,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$W = /* @__PURE__ */ defineComponent({
+const _sfc_main$V = /* @__PURE__ */ defineComponent({
   __name: "Badge",
   props: {
     variant: { default: "soft" },
@@ -144,32 +188,16 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$V = /* @__PURE__ */ defineComponent({
+const _sfc_main$U = /* @__PURE__ */ defineComponent({
   __name: "Inset",
   props: {
     side: { default: "all" },
-    top: { type: Boolean },
-    bottom: { type: Boolean },
-    left: { type: Boolean },
-    right: { type: Boolean },
     clip: { default: "border-box" }
   },
   setup(__props) {
     const props = __props;
     const resetClass = computed(() => {
-      const rv = [];
-      if (props.top || ["all", "y", "top"].includes(props.side)) {
-        rv.push("inset-top");
-      }
-      if (props.bottom || ["all", "y", "bottom"].includes(props.side)) {
-        rv.push("inset-bottom");
-      }
-      if (props.left || ["all", "x", "left"].includes(props.side)) {
-        rv.push("inset-left");
-      }
-      if (props.right || ["all", "x", "right"].includes(props.side)) {
-        rv.push("inset-right");
-      }
+      const rv = [`r-side-${props.side}`];
       if (props.clip) {
         rv.push(`r-clip-${props.clip}`);
       }
@@ -184,7 +212,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$U = /* @__PURE__ */ defineComponent({
+const _sfc_main$T = /* @__PURE__ */ defineComponent({
   __name: "Card",
   props: {
     variant: { default: "surface" },
@@ -213,7 +241,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$T = /* @__PURE__ */ defineComponent({
+const _sfc_main$S = /* @__PURE__ */ defineComponent({
   __name: "CardHead",
   props: {
     color: {},
@@ -236,7 +264,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$S = /* @__PURE__ */ defineComponent({
+const _sfc_main$R = /* @__PURE__ */ defineComponent({
   __name: "Button",
   props: {
     variant: { default: "solid" },
@@ -270,7 +298,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$R = /* @__PURE__ */ defineComponent({
+const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   __name: "IconButton",
   props: {
     variant: {},
@@ -286,7 +314,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
     const props = __props;
     const forwarded = useForwardProps(props);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$S, mergeProps({ class: "ui-IconButton" }, unref(forwarded)), {
+      return openBlock(), createBlock(_sfc_main$R, mergeProps({ class: "ui-IconButton" }, unref(forwarded)), {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default")
         ]),
@@ -304,7 +332,7 @@ const BRAND_ICONS = {
   slack: "logos:slack-icon",
   figma: "logos:figma"
 };
-const _sfc_main$Q = /* @__PURE__ */ defineComponent({
+const _sfc_main$P = /* @__PURE__ */ defineComponent({
   __name: "SocialButton",
   props: {
     brand: {},
@@ -342,7 +370,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$P = /* @__PURE__ */ defineComponent({
+const _sfc_main$O = /* @__PURE__ */ defineComponent({
   __name: "ScrollArea",
   props: {
     size: { default: "1" },
@@ -406,17 +434,15 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$j = { class: "ui-DialogScroll" };
-const _hoisted_2$7 = ["data-align"];
-const _sfc_main$O = /* @__PURE__ */ defineComponent({
+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: {},
@@ -431,6 +457,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
   },
   emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "openAutoFocus", "closeAutoFocus"],
   setup(__props, { emit: __emit }) {
+    const theme = injectThemeContext();
     const props = __props;
     const emits = __emit;
     const forwarded = useForwardPropsEmits(props, emits, [
@@ -450,16 +477,18 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
         to: props.to
       }, {
         default: withCtx(() => [
-          createVNode(unref(AlertDialogOverlay), { class: "ui-DialogOverlay" }, {
+          createVNode(unref(AlertDialogOverlay), {
+            class: "ui-root ui-DialogOverlay",
+            "data-accent-color": unref(theme).accentColor.value,
+            "data-gray-color": unref(theme).grayColor.value,
+            "data-radius": unref(theme).radius.value,
+            "data-scaling": unref(theme).scaling.value
+          }, {
             default: withCtx(() => [
               createElementVNode("div", _hoisted_1$j, [
-                createElementVNode("div", {
-                  class: "ui-DialogScrollPadding",
-                  "data-align": props.align
-                }, [
+                createElementVNode("div", _hoisted_2$7, [
                   createVNode(unref(AlertDialogContent), mergeProps({
-                    class: ["ui-DialogContent", props.class],
-                    "data-size": props.size
+                    class: ["ui-DialogContent", `r-size-${props.size}`]
                   }, {
                     ..._ctx.$attrs,
                     ...unref(forwarded)
@@ -477,29 +506,27 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
                       renderSlot(_ctx.$slots, "default")
                     ]),
                     _: 3
-                  }, 16, ["class", "data-size", "style"])
-                ], 8, _hoisted_2$7)
+                  }, 16, ["class", "style"])
+                ])
               ])
             ]),
             _: 3
-          })
+          }, 8, ["data-accent-color", "data-gray-color", "data-radius", "data-scaling"])
         ]),
         _: 3
       }, 8, ["to"]);
     };
   }
 });
-const _hoisted_1$i = { class: "ui-DialogScroll" };
-const _hoisted_2$6 = ["data-align"];
-const _sfc_main$N = /* @__PURE__ */ defineComponent({
+const _hoisted_1$i = { class: "ui-DialogWrapper" };
+const _hoisted_2$6 = { class: "ui-DialogContainer" };
+const _sfc_main$M = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
   __name: "DialogContent",
   props: {
     to: {},
-    align: { default: "center" },
-    class: {},
     size: { default: "3" },
     width: {},
     minWidth: {},
@@ -507,6 +534,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
     height: {},
     minHeight: {},
     maxHeight: {},
+    closeIcon: { type: Boolean },
     forceMount: { type: Boolean },
     disableOutsidePointerEvents: { type: Boolean },
     asChild: { type: Boolean },
@@ -515,6 +543,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
   emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "openAutoFocus", "closeAutoFocus"],
   setup(__props, { emit: __emit }) {
     const props = __props;
+    const theme = injectThemeContext();
     const emits = __emit;
     const forwarded = useForwardPropsEmits(props, emits, [
       "to",
@@ -526,23 +555,26 @@ 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(unref(DialogOverlay), {
+            class: "ui-root ui-DialogOverlay",
+            "data-accent-color": unref(theme).accentColor.value,
+            "data-gray-color": unref(theme).grayColor.value,
+            "data-radius": unref(theme).radius.value,
+            "data-scaling": unref(theme).scaling.value
+          }, {
             default: withCtx(() => [
               createElementVNode("div", _hoisted_1$i, [
-                createElementVNode("div", {
-                  class: "ui-DialogScrollPadding",
-                  "data-align": props.align
-                }, [
+                createElementVNode("div", _hoisted_2$6, [
                   createVNode(unref(DialogContent), mergeProps({
-                    class: ["ui-DialogContent", props.class],
-                    "data-size": props.size
+                    class: ["ui-DialogContent", `r-size-${props.size}`]
                   }, {
                     ..._ctx.$attrs,
                     ...unref(forwarded)
@@ -557,59 +589,35 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
                     }
                   }), {
                     default: withCtx(() => [
+                      props.closeIcon ? (openBlock(), createBlock(_sfc_main$Q, {
+                        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", "data-size", "style"])
-                ], 8, _hoisted_2$6)
+                  }, 16, ["class", "style"])
+                ])
               ])
             ]),
             _: 3
-          })
+          }, 8, ["data-accent-color", "data-gray-color", "data-radius", "data-scaling"])
         ]),
         _: 3
       }, 8, ["to"]);
     };
   }
 });
-const _sfc_main$M = /* @__PURE__ */ defineComponent({
-  __name: "DialogHead",
-  props: {
-    title: {}
-  },
-  setup(__props) {
-    const props = __props;
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$V, {
-        class: "ui-DialogHead",
-        side: "x"
-      }, {
-        default: withCtx(() => [
-          createVNode(unref(DialogTitle), { class: "font-semibold" }, {
-            default: withCtx(() => [
-              createTextVNode(toDisplayString(props.title), 1)
-            ]),
-            _: 1
-          }),
-          createVNode(_sfc_main$R, {
-            as: unref(DialogClose),
-            type: "button",
-            variant: "ghost",
-            color: "gray",
-            radius: "full",
-            "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({
@@ -645,6 +653,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
   },
   emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "openAutoFocus", "closeAutoFocus"],
   setup(__props, { emit: __emit }) {
+    const theme = injectThemeContext();
     const props = __props;
     const emits = __emit;
     const forwarded = useForwardPropsEmits(props, emits, [
@@ -667,12 +676,14 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
             ...unref(forwarded)
           }, {
             ref: unref(forwardRef),
-            class: "ui-PopperContent ui-MenuContent",
-            "data-accent-color": props.color,
-            "data-size": props.size
+            class: ["ui-root ui-PopperContent ui-MenuContent", `r-size-${props.size}`],
+            "data-accent-color": props.color || unref(theme).accentColor.value,
+            "data-gray-color": unref(theme).grayColor.value,
+            "data-radius": unref(theme).radius.value,
+            "data-scaling": unref(theme).scaling.value
           }), {
             default: withCtx(() => [
-              createVNode(_sfc_main$P, { type: "auto" }, {
+              createVNode(_sfc_main$O, { type: "auto" }, {
                 default: withCtx(() => [
                   createElementVNode("div", _hoisted_1$h, [
                     renderSlot(_ctx.$slots, "default")
@@ -682,7 +693,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
               })
             ]),
             _: 3
-          }, 16, ["data-accent-color", "data-size"])
+          }, 16, ["class", "data-accent-color", "data-gray-color", "data-radius", "data-scaling"])
         ]),
         _: 3
       }, 8, ["to"]);
@@ -758,6 +769,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
   },
   emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "openAutoFocus", "closeAutoFocus"],
   setup(__props, { emit: __emit }) {
+    const theme = injectThemeContext();
     const props = __props;
     const emits = __emit;
     const forwarded = useForwardPropsEmits(props, emits, ["to", "size"]);
@@ -767,14 +779,17 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
       }, {
         default: withCtx(() => [
           createVNode(unref(PopoverContent), mergeProps({ ..._ctx.$attrs, ...unref(forwarded) }, {
-            "data-size": props.size,
-            class: "ui-PopoverContent"
+            class: ["ui-root ui-PopoverContent", `r-size-${props.size}`],
+            "data-accent-color": unref(theme).accentColor.value,
+            "data-gray-color": unref(theme).grayColor.value,
+            "data-radius": unref(theme).radius.value,
+            "data-scaling": unref(theme).scaling.value
           }), {
             default: withCtx(() => [
               renderSlot(_ctx.$slots, "default")
             ]),
             _: 3
-          }, 16, ["data-size"])
+          }, 16, ["class", "data-accent-color", "data-gray-color", "data-radius", "data-scaling"])
         ]),
         _: 3
       }, 8, ["to"]);
@@ -1430,6 +1445,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     as: {}
   },
   setup(__props) {
+    const theme = injectThemeContext();
     const props = __props;
     const forwarded = useForwardProps(props);
     const { forwardRef } = useForwardExpose();
@@ -1455,8 +1471,11 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
             to: void 0,
             variant: void 0
           }, {
-            class: ["ui-SelectContent", contentClass.value],
-            "data-accent-color": unref(context).color.value
+            class: ["ui-root ui-SelectContent", contentClass.value],
+            "data-accent-color": unref(context).color.value || unref(theme).accentColor.value,
+            "data-gray-color": unref(theme).grayColor.value,
+            "data-radius": unref(theme).radius.value,
+            "data-scaling": unref(theme).scaling.value
           }), {
             default: withCtx(() => [
               createVNode(unref(ScrollAreaRoot), {
@@ -1495,7 +1514,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
               })
             ]),
             _: 3
-          }, 16, ["class", "data-accent-color"])
+          }, 16, ["class", "data-accent-color", "data-gray-color", "data-radius", "data-scaling"])
         ]),
         _: 3
       }, 8, ["to"]);
@@ -1830,6 +1849,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
   emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside"],
   setup(__props, { emit: __emit }) {
     const { forwardRef } = useForwardExpose();
+    const theme = injectThemeContext();
     const props = __props;
     const emits = __emit;
     const forwarded = useForwardPropsEmits$1(props, emits);
@@ -1853,8 +1873,11 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
             to: void 0,
             variant: void 0
           }, {
-            class: ["ui-ComboboxContent", contentClass.value],
-            "data-accent-color": unref(context).color.value
+            class: ["ui-root ui-ComboboxContent", contentClass.value],
+            "data-accent-color": unref(context).color.value || unref(theme).accentColor.value,
+            "data-gray-color": unref(theme).grayColor.value,
+            "data-radius": unref(theme).radius.value,
+            "data-scaling": unref(theme).scaling.value
           }), {
             default: withCtx(() => [
               createVNode(unref(ScrollAreaRoot), {
@@ -1893,7 +1916,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
               })
             ]),
             _: 3
-          }, 16, ["class", "data-accent-color"])
+          }, 16, ["class", "data-accent-color", "data-gray-color", "data-radius", "data-scaling"])
         ]),
         _: 3
       }, 8, ["to"]);
@@ -2090,7 +2113,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
         "data-high-contrast": unref(rootContext).highContrast?.value
       }, { ...unref(forwarded), asChild: false }), {
         default: withCtx(() => [
-          createVNode(_sfc_main$U, {
+          createVNode(_sfc_main$T, {
             "as-child": unref(forwarded).asChild
           }, {
             default: withCtx(() => [
@@ -2489,7 +2512,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["ui-Pagination", resetClass.value])
       }, [
-        pagination.value.prev ? (openBlock(), createBlock(_sfc_main$R, mergeProps({ key: 0 }, buttonProps.value, {
+        pagination.value.prev ? (openBlock(), createBlock(_sfc_main$Q, mergeProps({ key: 0 }, buttonProps.value, {
           "aria-label": "Previous",
           onClick: _cache[0] || (_cache[0] = withModifiers(($event) => selectPage(pagination.value.prev), ["prevent"]))
         }), {
@@ -2502,7 +2525,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }, 16)) : createCommentVNode("", true),
-        createVNode(_sfc_main$S, mergeProps(buttonProps.value, {
+        createVNode(_sfc_main$R, mergeProps(buttonProps.value, {
           disabled: page.value === 1,
           "aria-current": "page",
           onClick: _cache[1] || (_cache[1] = withModifiers(($event) => selectPage(1), ["prevent"]))
@@ -2514,7 +2537,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }, 16, ["disabled"]),
-        pagination.value.hasLeftEdge ? (openBlock(), createBlock(_sfc_main$R, mergeProps({ key: 1 }, buttonProps.value, {
+        pagination.value.hasLeftEdge ? (openBlock(), createBlock(_sfc_main$Q, mergeProps({ key: 1 }, buttonProps.value, {
           onClick: withModifiers(selectLeft, ["prevent"])
         }), {
           default: withCtx(() => [
@@ -2527,7 +2550,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$S, mergeProps({ key: p }, { ref_for: true }, buttonProps.value, {
+          return openBlock(), createBlock(_sfc_main$R, mergeProps({ key: p }, { ref_for: true }, buttonProps.value, {
             disabled: p === page.value,
             "aria-current": "page",
             onClick: withModifiers(($event) => selectPage(p), ["prevent"])
@@ -2540,7 +2563,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             _: 2
           }, 1040, ["disabled", "onClick"]);
         }), 128)),
-        pagination.value.hasRightEdge ? (openBlock(), createBlock(_sfc_main$R, mergeProps({ key: 2 }, buttonProps.value, {
+        pagination.value.hasRightEdge ? (openBlock(), createBlock(_sfc_main$Q, mergeProps({ key: 2 }, buttonProps.value, {
           onClick: withModifiers(selectRight, ["prevent"])
         }), {
           default: withCtx(() => [
@@ -2552,7 +2575,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }, 16)) : createCommentVNode("", true),
-        pagination.value.totalPages > 1 ? (openBlock(), createBlock(_sfc_main$S, mergeProps({ key: 3 }, buttonProps.value, {
+        pagination.value.totalPages > 1 ? (openBlock(), createBlock(_sfc_main$R, 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"]))
@@ -2566,7 +2589,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }, 16, ["disabled"])) : createCommentVNode("", true),
-        pagination.value.next ? (openBlock(), createBlock(_sfc_main$R, mergeProps({ key: 4 }, buttonProps.value, {
+        pagination.value.next ? (openBlock(), createBlock(_sfc_main$Q, mergeProps({ key: 4 }, buttonProps.value, {
           "aria-label": "Next",
           onClick: _cache[3] || (_cache[3] = withModifiers(($event) => selectPage(pagination.value.next), ["prevent"]))
         }), {
@@ -2600,7 +2623,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         "data-size": props.size,
         "data-variant": props.variant
       }, [
-        createVNode(_sfc_main$P, null, {
+        createVNode(_sfc_main$O, null, {
           default: withCtx(() => [
             createElementVNode("table", {
               class: "ui-TableContent",
@@ -2645,12 +2668,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 },
@@ -2670,65 +2687,58 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
+    const theme = injectThemeContext();
     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(unref(TooltipContent), {
+                class: "ui-root ui-Tooltip",
+                "data-accent-color": unref(theme).accentColor.value,
+                "data-gray-color": unref(theme).grayColor.value,
+                "data-radius": unref(theme).radius.value,
+                "data-scaling": unref(theme).scaling.value,
+                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
               }, {
                 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
-                  }, {
-                    default: withCtx(() => [
-                      renderSlot(_ctx.$slots, "content", {}, () => [
-                        createElementVNode("p", {
-                          class: "ui-TooltipText",
-                          textContent: toDisplayString(props.content)
-                        }, null, 8, _hoisted_1$2)
-                      ]),
-                      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"])
+                  renderSlot(_ctx.$slots, "content", {}, () => [
+                    createElementVNode("p", {
+                      class: "ui-TooltipText",
+                      textContent: toDisplayString(props.content)
+                    }, null, 8, _hoisted_1$2)
+                  ]),
+                  createVNode(unref(TooltipArrow), { class: "ui-TooltipArrow" })
                 ]),
                 _: 3
-              }, 8, ["to"])
+              }, 8, ["data-accent-color", "data-gray-color", "data-radius", "data-scaling", "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, ["delay-duration", "disable-closing-trigger", "disable-hoverable-content", "disabled", "ignore-non-keyboard-focus", "skip-delay-duration"]);
+      });
     };
   }
 });
@@ -2858,16 +2868,16 @@ export {
   _sfc_main$9 as AccordionTrigger,
   AlertDialogAction,
   AlertDialogCancel,
-  _sfc_main$O as AlertDialogContent,
+  _sfc_main$N as AlertDialogContent,
   AlertDialogDescription,
   AlertDialogRoot,
   AlertDialogTitle,
   AlertDialogTrigger,
-  _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$W as Avatar,
+  _sfc_main$V as Badge,
+  _sfc_main$R as Button,
+  _sfc_main$T as Card,
+  _sfc_main$S as CardHead,
   _sfc_main$H as Checkbox,
   _sfc_main$E as CheckboxGroupControl,
   _sfc_main$F as CheckboxGroupItem,
@@ -2885,11 +2895,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,
-  DialogTitle2 as DialogTitle,
+  DialogTitle,
   DialogTrigger,
   _sfc_main$L as DropdownMenuContent,
   _sfc_main$K as DropdownMenuItem,
@@ -2897,9 +2906,9 @@ export {
   DropdownMenuTrigger,
   _sfc_main$f as Editable,
   Icon2 as Icon,
-  _sfc_main$R as IconButton,
+  _sfc_main$Q as IconButton,
   _sfc_main as IconCircle,
-  _sfc_main$V as Inset,
+  _sfc_main$U as Inset,
   _sfc_main$7 as Pagination,
   _sfc_main$b as PlusMinusIcon,
   PopoverClose,
@@ -2915,7 +2924,7 @@ export {
   RadioGroupItem2 as RadioTabsItem,
   _sfc_main$i as RadioTabsList,
   _sfc_main$1 as SavingIndicator,
-  _sfc_main$P as ScrollArea,
+  _sfc_main$O as ScrollArea,
   _sfc_main$w as SelectContent,
   SelectGroup,
   _sfc_main$u as SelectItem,
@@ -2924,7 +2933,7 @@ export {
   SelectSeparator,
   _sfc_main$v as SelectTrigger,
   _sfc_main$5 as Separator,
-  _sfc_main$Q as SocialButton,
+  _sfc_main$P as SocialButton,
   _sfc_main$2 as Spinner,
   _sfc_main$I as Switch,
   _sfc_main$6 as Table,
@@ -2934,6 +2943,7 @@ export {
   _sfc_main$g as TabsTrigger,
   _sfc_main$z as TextArea,
   _sfc_main$A as TextField,
+  _sfc_main$X as ThemeProvider,
   _sfc_main$D as Toggle,
   _sfc_main$B as ToggleGroupItem,
   _sfc_main$C as ToggleGroupRoot,