@typlog/ui 0.11.8 → 0.12.1

package/components.js

@@ -1,28 +1,29 @@
-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, injectDialogRootContext, useForwardExpose, DialogPortal, DialogOverlay, DialogContent, DialogClose, AlertDialogPortal, AlertDialogOverlay, AlertDialogContent, 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, AlertDialogRoot, AlertDialogTrigger, CollapsibleRoot, CollapsibleTrigger, ComboboxEmpty, ComboboxGroup, DialogClose as DialogClose2, 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, 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 { Icon as Icon2 } from "@iconify/vue";
 const [injectThemeContext, provideThemeContext] = createContext("ThemeProvider");
-const _sfc_main$_ = /* @__PURE__ */ defineComponent({
+const _sfc_main$$ = /* @__PURE__ */ defineComponent({
   __name: "ThemeProvider",
   props: {
     accentColor: { default: "indigo" },
     radius: { default: "medium" },
     grayColor: { default: "auto" },
     scaling: { default: "100%" },
+    panelBackground: { default: "translucent" },
     hasBackground: { type: Boolean, default: true },
     asChild: { type: Boolean },
     as: { default: "div" }
   },
   setup(__props) {
     const props = __props;
-    const { accentColor, radius, grayColor, scaling, hasBackground } = toRefs(props);
+    const { accentColor, radius, grayColor, scaling, panelBackground, hasBackground } = toRefs(props);
     provideThemeContext({
       accentColor,
       radius,
       grayColor,
       scaling,
+      panelBackground,
       hasBackground
     });
     return (_ctx, _cache) => {
@@ -34,6 +35,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
             "data-gray-color": unref(grayColor),
             "data-radius": unref(radius),
             "data-scaling": unref(scaling),
+            "data-panel-background": unref(panelBackground),
             "data-has-background": unref(hasBackground),
             as: props.as,
             "as-child": props.asChild
@@ -42,71 +44,74 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
               renderSlot(_ctx.$slots, "default")
             ]),
             _: 3
-          }, 8, ["data-accent-color", "data-gray-color", "data-radius", "data-scaling", "data-has-background", "as", "as-child"])
+          }, 8, ["data-accent-color", "data-gray-color", "data-radius", "data-scaling", "data-panel-background", "data-has-background", "as", "as-child"])
         ]),
         _: 3
       });
     };
   }
 });
-function useForwardPropsEmits(props, emit, exclude) {
+const _hoisted_1$v = {
+  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] = [
+    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 });
+function useForwardPropsWithout(props, exclude) {
   const parsedProps = useForwardProps(props);
-  const emitsAsProps = useEmitAsProps(emit);
   return computed(() => ({
-    ..._excludeProps(parsedProps.value, exclude),
-    ...emitsAsProps
+    ..._excludeProps(parsedProps.value, exclude)
   }));
 }
-function extractForwardProps(props, keys) {
-  const parsedProps = useForwardProps(props);
-  const fowarded = computed(() => _excludeProps(parsedProps.value, keys));
-  const classes = computed(() => {
-    return extractClass(parsedProps.value, keys);
-  });
-  return [fowarded, classes];
-}
-function extractForwardPropsEmits(props, emit, keys) {
+function useForwardPropsEmitsWithout(props, emit, exclude) {
   const parsedProps = useForwardProps(props);
   const emitsAsProps = useEmitAsProps(emit);
-  const fowarded = computed(() => ({
-    ..._excludeProps(parsedProps.value, keys),
+  return computed(() => ({
+    ..._excludeProps(parsedProps.value, exclude),
     ...emitsAsProps
   }));
-  const classes = computed(() => {
-    return extractClass(parsedProps.value, keys);
-  });
-  return [fowarded, classes];
-}
-function _excludeProps(props, exclude) {
-  const rv = {};
-  Object.keys(props).forEach((k) => {
-    if (exclude.indexOf(k) === -1) {
-      rv[k] = props[k];
-    }
-  });
-  return rv;
 }
-const extractClass = (props, keys) => {
-  const rv = [];
-  keys.forEach((key) => {
-    if (key !== "color" && key !== "radius") {
+const buildPropsClass = (props, keys) => {
+  return computed(() => {
+    const rv = [];
+    keys.forEach((key) => {
       const value = props[key];
+      if (key === "class") {
+        rv.push(value);
+      }
       if (value === true) {
         rv.push(`r-${kebabize(key)}`);
       } else if (value) {
         rv.push(`r-${kebabize(key)}-${value}`);
       }
+    });
+    return rv;
+  });
+};
+function _excludeProps(props, exclude) {
+  const rv = {};
+  Object.keys(props).forEach((k) => {
+    if (exclude.indexOf(k) === -1) {
+      rv[k] = props[k];
     }
   });
   return rv;
-};
+}
 function kebabize(str) {
   return str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, _kebabReplace);
 }
 function _kebabReplace(str, ofs) {
   return (ofs ? "-" : "") + str.toLowerCase();
 }
-const _sfc_main$Z = /* @__PURE__ */ defineComponent({
+const _sfc_main$_ = /* @__PURE__ */ defineComponent({
   __name: "Avatar",
   props: {
     alt: {},
@@ -119,23 +124,25 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const resetClass = computed(() => {
-      return extractClass(props, ["size", "variant"]);
-    });
+    const resetClass = buildPropsClass(props, ["size", "variant"]);
     const fallback = computed(() => {
       if (props.fallback) {
         return props.fallback;
       }
-      const symbols = props.alt.split(/\s+/).map((p) => p[0]);
-      if (props.size === "1") {
-        return symbols[0];
+      if (props.alt) {
+        const symbols = props.alt.split(/\s+/).map((p) => p[0]);
+        if (props.size === "1") {
+          return symbols[0];
+        } else {
+          return symbols.slice(0, 2).join("");
+        }
       } else {
-        return symbols.slice(0, 2).join("");
+        return "";
       }
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(AvatarRoot), {
-        class: normalizeClass(["ui-Avatar", resetClass.value]),
+        class: normalizeClass(["ui-Avatar", unref(resetClass)]),
         "data-accent-color": props.color,
         "data-radius": props.radius
       }, {
@@ -144,21 +151,27 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
             alt: props.alt,
             src: props.src || ""
           }, null, 8, ["alt", "src"]),
-          createVNode(unref(AvatarFallback), {
+          fallback.value ? (openBlock(), createBlock(unref(AvatarFallback), {
+            key: 0,
             class: normalizeClass(`r-count-${fallback.value.length}`)
           }, {
             default: withCtx(() => [
               createTextVNode(toDisplayString(fallback.value), 1)
             ]),
             _: 1
-          }, 8, ["class"])
+          }, 8, ["class"])) : (openBlock(), createBlock(unref(AvatarFallback), { key: 1 }, {
+            default: withCtx(() => [
+              createVNode(unref(UserIcon))
+            ]),
+            _: 1
+          }))
         ]),
         _: 1
       }, 8, ["class", "data-accent-color", "data-radius"]);
     };
   }
 });
-const _sfc_main$Y = /* @__PURE__ */ defineComponent({
+const _sfc_main$Z = /* @__PURE__ */ defineComponent({
   __name: "Badge",
   props: {
     variant: { default: "soft" },
@@ -171,12 +184,10 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const resetClass = computed(() => {
-      return extractClass(props, ["size", "variant", "highContrast"]);
-    });
+    const resetClass = buildPropsClass(props, ["size", "variant", "highContrast"]);
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(Primitive), {
-        class: normalizeClass(["ui-Badge", resetClass.value]),
+        class: normalizeClass(["ui-Badge", unref(resetClass)]),
         as: props.as,
         "as-child": props.asChild,
         "data-accent-color": props.color,
@@ -190,31 +201,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$X = /* @__PURE__ */ defineComponent({
-  __name: "Inset",
-  props: {
-    side: { default: "all" },
-    clip: { default: "border-box" }
-  },
-  setup(__props) {
-    const props = __props;
-    const resetClass = computed(() => {
-      const rv = [`r-side-${props.side}`];
-      if (props.clip) {
-        rv.push(`r-clip-${props.clip}`);
-      }
-      return rv;
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["ui-Inset", resetClass.value])
-      }, [
-        renderSlot(_ctx.$slots, "default")
-      ], 2);
-    };
-  }
-});
-const _sfc_main$W = /* @__PURE__ */ defineComponent({
+const _sfc_main$Y = /* @__PURE__ */ defineComponent({
   __name: "Card",
   props: {
     variant: { default: "surface" },
@@ -225,12 +212,10 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const resetClass = computed(() => {
-      return extractClass(props, ["size", "variant"]);
-    });
+    const resetClass = buildPropsClass(props, ["size", "variant"]);
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(Primitive), {
-        class: normalizeClass(["ui-Card", resetClass.value]),
+        class: normalizeClass(["ui-Card ui-BaseCard", unref(resetClass)]),
         "as-child": props.asChild,
         as: props.as,
         "data-radius": props.radius
@@ -243,30 +228,7 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$V = /* @__PURE__ */ defineComponent({
-  __name: "CardHead",
-  props: {
-    color: {},
-    asChild: { type: Boolean },
-    as: { default: "div" }
-  },
-  setup(__props) {
-    const props = __props;
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(Primitive), {
-        as: props.as,
-        class: "ui-CardHead",
-        "data-accent-color": props.color
-      }, {
-        default: withCtx(() => [
-          renderSlot(_ctx.$slots, "default")
-        ]),
-        _: 3
-      }, 8, ["as", "data-accent-color"]);
-    };
-  }
-});
-const _sfc_main$U = /* @__PURE__ */ defineComponent({
+const _sfc_main$X = /* @__PURE__ */ defineComponent({
   __name: "Button",
   props: {
     variant: { default: "solid" },
@@ -280,12 +242,10 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const resetClass = computed(() => {
-      return extractClass(props, ["size", "variant", "highContrast"]);
-    });
+    const resetClass = buildPropsClass(props, ["size", "variant", "highContrast"]);
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(Primitive), {
-        class: normalizeClass(["ui-Button", resetClass.value]),
+        class: normalizeClass(["ui-Button", unref(resetClass)]),
         "as-child": props.asChild,
         as: props.as,
         "data-accent-color": props.color,
@@ -301,85 +261,46 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$T = /* @__PURE__ */ defineComponent({
+const _sfc_main$W = /* @__PURE__ */ defineComponent({
   __name: "IconButton",
   props: {
-    variant: {},
+    variant: { default: "solid" },
     color: {},
     radius: {},
-    size: {},
-    highContrast: { type: Boolean },
-    disabled: { type: Boolean },
-    as: {},
-    asChild: { type: Boolean }
-  },
-  setup(__props) {
-    const props = __props;
-    const forwarded = useForwardProps(props);
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$U, mergeProps({ class: "ui-IconButton" }, unref(forwarded)), {
-        default: withCtx(() => [
-          renderSlot(_ctx.$slots, "default")
-        ]),
-        _: 3
-      }, 16);
-    };
-  }
-});
-const BRAND_ICONS = {
-  google: "logos:google-icon",
-  facebook: "simple-icons:facebook",
-  x: "simple-icons:x",
-  github: "simple-icons:github",
-  apple: "simple-icons:apple",
-  slack: "logos:slack-icon",
-  figma: "logos:figma"
-};
-const _sfc_main$S = /* @__PURE__ */ defineComponent({
-  __name: "SocialButton",
-  props: {
-    brand: {},
-    radius: {},
     size: { default: "2" },
+    highContrast: { type: Boolean, default: false },
     disabled: { type: Boolean },
-    asChild: { type: Boolean },
-    as: { default: "button" }
+    as: { default: "button" },
+    asChild: { type: Boolean }
   },
   setup(__props) {
     const props = __props;
-    const resetClass = computed(() => {
-      return extractClass(props, ["size", "brand"]);
-    });
-    const brandIcon = computed(() => {
-      return BRAND_ICONS[props.brand];
-    });
+    const resetClass = buildPropsClass(props, ["size", "variant", "highContrast"]);
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(Primitive), {
-        class: normalizeClass(["ui-Button ui-SocialButton", resetClass.value]),
+        class: normalizeClass(["ui-Button ui-IconButton", unref(resetClass)]),
         "as-child": props.asChild,
         as: props.as,
+        "data-accent-color": props.color,
         "data-radius": props.radius,
-        "data-disabled": props.disabled ? true : void 0
+        "data-disabled": props.disabled ? true : void 0,
+        disabled: props.disabled && props.as === "button" ? true : void 0
       }, {
         default: withCtx(() => [
-          brandIcon.value ? (openBlock(), createBlock(unref(Icon), {
-            key: 0,
-            icon: brandIcon.value
-          }, null, 8, ["icon"])) : createCommentVNode("", true),
           renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
-      }, 8, ["class", "as-child", "as", "data-radius", "data-disabled"]);
+      }, 8, ["class", "as-child", "as", "data-accent-color", "data-radius", "data-disabled", "disabled"]);
     };
   }
 });
-const _sfc_main$R = /* @__PURE__ */ defineComponent({
+const _sfc_main$V = /* @__PURE__ */ defineComponent({
   __name: "ScrollArea",
   props: {
     size: { default: "1" },
     radius: {},
     scrollbars: { default: "both" },
-    type: {},
+    type: { default: "scroll" },
     dir: {},
     scrollHideDelay: {},
     asChild: { type: Boolean },
@@ -437,7 +358,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$Q = /* @__PURE__ */ defineComponent({
+const _sfc_main$U = /* @__PURE__ */ defineComponent({
   __name: "DialogTitle",
   props: {
     asChild: { type: Boolean },
@@ -460,7 +381,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$P = /* @__PURE__ */ defineComponent({
+const _sfc_main$T = /* @__PURE__ */ defineComponent({
   __name: "DialogDescription",
   props: {
     asChild: { type: Boolean },
@@ -483,7 +404,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$O = /* @__PURE__ */ defineComponent({
+const _sfc_main$S = /* @__PURE__ */ defineComponent({
   __name: "ThemeWrapper",
   props: {
     accentColor: {},
@@ -509,23 +430,15 @@ 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({
+const _hoisted_1$u = { class: "ui-DialogWrapper" };
+const _hoisted_2$8 = { class: "ui-DialogContainer" };
+const _sfc_main$R = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
-  __name: "DialogContent",
+  __name: "DialogPopup",
   props: {
-    to: {},
-    size: { default: "3" },
-    width: {},
-    minWidth: {},
-    maxWidth: { default: "600px" },
-    height: {},
-    minHeight: {},
-    maxHeight: {},
-    closeIcon: { type: Boolean },
+    size: { default: "1" },
     forceMount: { type: Boolean },
     disableOutsidePointerEvents: { type: Boolean },
     asChild: { type: Boolean },
@@ -535,64 +448,27 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emits = __emit;
-    const forwarded = useForwardPropsEmits(props, emits, [
-      "to",
-      "align",
-      "class",
-      "size",
-      "width",
-      "minWidth",
-      "maxWidth",
-      "height",
-      "minHeight",
-      "maxHeight",
-      "closeIcon"
-    ]);
+    const forwarded = useForwardPropsEmitsWithout(props, emits, ["align", "class", "size"]);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(DialogPortal), {
-        to: props.to
-      }, {
+      return openBlock(), createBlock(unref(DialogPortal), null, {
         default: withCtx(() => [
-          createVNode(_sfc_main$O, null, {
+          createVNode(_sfc_main$S, null, {
             default: withCtx(() => [
               createVNode(unref(DialogOverlay), { class: "ui-DialogOverlay" }, {
                 default: withCtx(() => [
-                  createElementVNode("div", _hoisted_1$j, [
-                    createElementVNode("div", _hoisted_2$7, [
+                  createElementVNode("div", _hoisted_1$u, [
+                    createElementVNode("div", _hoisted_2$8, [
                       createVNode(unref(DialogContent), mergeProps({
-                        class: ["ui-DialogContent", `r-size-${props.size}`]
+                        class: ["ui-DialogPopup", `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$T, {
-                            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"])
+                      }, 16, ["class"])
                     ])
                   ])
                 ]),
@@ -603,26 +479,18 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
           })
         ]),
         _: 3
-      }, 8, ["to"]);
+      });
     };
   }
 });
-const _hoisted_1$i = { class: "ui-DialogWrapper" };
-const _hoisted_2$6 = { class: "ui-DialogContainer" };
-const _sfc_main$M = /* @__PURE__ */ defineComponent({
+const _hoisted_1$t = { class: "ui-DialogWrapper" };
+const _hoisted_2$7 = { class: "ui-DialogContainer" };
+const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
-  __name: "AlertDialogContent",
+  __name: "AlertDialogPopup",
   props: {
-    to: {},
-    size: { default: "3" },
-    width: {},
-    minWidth: {},
-    maxWidth: { default: "450px" },
-    height: {},
-    minHeight: {},
-    maxHeight: {},
     forceMount: { type: Boolean },
     disableOutsidePointerEvents: { type: Boolean },
     asChild: { type: Boolean },
@@ -632,49 +500,25 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emits = __emit;
-    const forwarded = useForwardPropsEmits(props, emits, [
-      "to",
-      "align",
-      "class",
-      "size",
-      "width",
-      "minWidth",
-      "maxWidth",
-      "height",
-      "minHeight",
-      "maxHeight"
-    ]);
+    const forwarded = useForwardPropsEmits(props, emits);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(AlertDialogPortal), {
-        to: props.to
-      }, {
+      return openBlock(), createBlock(unref(AlertDialogPortal), null, {
         default: withCtx(() => [
-          createVNode(_sfc_main$O, null, {
+          createVNode(_sfc_main$S, null, {
             default: withCtx(() => [
               createVNode(unref(AlertDialogOverlay), { class: "ui-DialogOverlay" }, {
                 default: withCtx(() => [
-                  createElementVNode("div", _hoisted_1$i, [
-                    createElementVNode("div", _hoisted_2$6, [
-                      createVNode(unref(AlertDialogContent), mergeProps({
-                        class: ["ui-DialogContent", `r-size-${props.size}`]
-                      }, {
+                  createElementVNode("div", _hoisted_1$t, [
+                    createElementVNode("div", _hoisted_2$7, [
+                      createVNode(unref(AlertDialogContent), mergeProps({ class: "ui-DialogPopup ui-AlertPopup r-size-3" }, {
                         ..._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"])
+                      }, 16)
                     ])
                   ])
                 ]),
@@ -685,19 +529,18 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
           })
         ]),
         _: 3
-      }, 8, ["to"]);
+      });
     };
   }
 });
-const _hoisted_1$h = { class: "ui-MenuViewport" };
-const [injectDropdownMenuContentContext, provideDropdownMenuContentContext] = createContext("ui_DropdownMenuContent");
-const _sfc_main$L = /* @__PURE__ */ defineComponent({
+const _hoisted_1$s = { class: "ui-MenuViewport" };
+const [injectDropdownMenuContentContext, provideDropdownMenuContentContext] = createContext("ui:DropdownMenuContent");
+const _sfc_main$P = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
   __name: "DropdownMenuContent",
   props: {
-    to: {},
     size: { default: "2" },
     variant: { default: "solid" },
     color: {},
@@ -706,8 +549,10 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     loop: { type: Boolean },
     side: {},
     sideOffset: { default: 4 },
+    sideFlip: { type: Boolean },
     align: { default: "start" },
     alignOffset: {},
+    alignFlip: { type: Boolean },
     avoidCollisions: { type: Boolean },
     collisionBoundary: {},
     collisionPadding: { default: 10 },
@@ -726,7 +571,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emits = __emit;
-    const forwarded = useForwardPropsEmits(props, emits, [
+    const forwarded = useForwardPropsEmitsWithout(props, emits, [
       "to",
       "size",
       "variant",
@@ -735,13 +580,12 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     ]);
     const { forwardRef } = useForwardExpose();
     const { size, variant, color, highContrast } = toRefs(props);
+    const resetClass = buildPropsClass(props, ["size", "variant", "highContrast"]);
     provideDropdownMenuContentContext({ size, variant, color, highContrast });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(DropdownMenuPortal), {
-        to: props.to
-      }, {
+      return openBlock(), createBlock(unref(DropdownMenuPortal), null, {
         default: withCtx(() => [
-          createVNode(_sfc_main$O, {
+          createVNode(_sfc_main$S, {
             "accent-color": props.color
           }, {
             default: withCtx(() => [
@@ -750,12 +594,12 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
                 ...unref(forwarded)
               }, {
                 ref: unref(forwardRef),
-                class: ["ui-PopperContent ui-MenuContent", `r-size-${props.size}`]
+                class: ["ui-PopperContent ui-MenuContent", unref(resetClass)]
               }), {
                 default: withCtx(() => [
-                  createVNode(_sfc_main$R, { type: "auto" }, {
+                  createVNode(_sfc_main$V, { type: "auto" }, {
                     default: withCtx(() => [
-                      createElementVNode("div", _hoisted_1$h, [
+                      createElementVNode("div", _hoisted_1$s, [
                         renderSlot(_ctx.$slots, "default")
                       ])
                     ]),
@@ -769,12 +613,12 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
           }, 8, ["accent-color"])
         ]),
         _: 3
-      }, 8, ["to"]);
+      });
     };
   }
 });
-const _hoisted_1$g = ["textContent"];
-const _sfc_main$K = /* @__PURE__ */ defineComponent({
+const _hoisted_1$r = ["textContent"];
+const _sfc_main$O = /* @__PURE__ */ defineComponent({
   __name: "DropdownMenuItem",
   props: {
     color: {},
@@ -788,14 +632,13 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emits = __emit;
-    const forwarded = useForwardPropsEmits(props, emits, ["color", "shortcut"]);
+    const forwarded = useForwardPropsEmitsWithout(props, emits, ["color", "shortcut"]);
     useForwardExpose();
     const rootContext = injectDropdownMenuContentContext();
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(DropdownMenuItem), mergeProps({
         class: "ui-MenuItem",
         "data-accent-color": props.color,
-        "data-size": unref(rootContext).size.value,
         "data-variant": unref(rootContext).variant.value,
         "data-high-contrast": unref(rootContext).highContrast?.value || void 0
       }, unref(forwarded)), {
@@ -805,26 +648,43 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
             key: 0,
             class: "ui-MenuShortcut",
             textContent: toDisplayString(props.shortcut)
-          }, null, 8, _hoisted_1$g)) : createCommentVNode("", true)
+          }, null, 8, _hoisted_1$r)) : createCommentVNode("", true)
         ]),
         _: 3
-      }, 16, ["data-accent-color", "data-size", "data-variant", "data-high-contrast"]);
+      }, 16, ["data-accent-color", "data-variant", "data-high-contrast"]);
     };
   }
 });
-const _sfc_main$J = /* @__PURE__ */ defineComponent({
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _sfc_main$N = {};
+const _hoisted_1$q = {
+  class: "ui-DropdownMenuSeparator",
+  "aria-hidden": "true"
+};
+function _sfc_render$2(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", _hoisted_1$q);
+}
+const DropdownMenuSeparator = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["render", _sfc_render$2]]);
+const _sfc_main$M = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
-  __name: "PopoverContent",
+  __name: "PopoverPopup",
   props: {
-    to: {},
-    size: { default: "2" },
+    size: { default: "1" },
     forceMount: { type: Boolean },
-    side: {},
-    sideOffset: {},
-    align: {},
+    side: { default: "bottom" },
+    sideOffset: { default: 4 },
+    sideFlip: { type: Boolean },
+    align: { default: "start" },
     alignOffset: {},
+    alignFlip: { type: Boolean },
     avoidCollisions: { type: Boolean },
     collisionBoundary: {},
     collisionPadding: {},
@@ -844,16 +704,14 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emits = __emit;
-    const forwarded = useForwardPropsEmits(props, emits, ["to", "size"]);
+    const forwarded = useForwardPropsEmitsWithout(props, emits, ["to", "size"]);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(PopoverPortal), {
-        to: props.to
-      }, {
+      return openBlock(), createBlock(unref(PopoverPortal), null, {
         default: withCtx(() => [
-          createVNode(_sfc_main$O, null, {
+          createVNode(_sfc_main$S, null, {
             default: withCtx(() => [
               createVNode(unref(PopoverContent), mergeProps({ ..._ctx.$attrs, ...unref(forwarded) }, {
-                class: ["ui-PopoverContent", `r-size-${props.size}`]
+                class: ["ui-PopoverPopup ui-PopperContent", `r-size-${props.size}`]
               }), {
                 default: withCtx(() => [
                   renderSlot(_ctx.$slots, "default")
@@ -865,11 +723,11 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
           })
         ]),
         _: 3
-      }, 8, ["to"]);
+      });
     };
   }
 });
-const _sfc_main$I = /* @__PURE__ */ defineComponent({
+const _sfc_main$L = /* @__PURE__ */ defineComponent({
   __name: "Switch",
   props: {
     color: {},
@@ -891,13 +749,8 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const emits = __emit;
     const props = __props;
-    const [forwarded, resetClass] = extractForwardPropsEmits(props, emits, [
-      "color",
-      "size",
-      "variant",
-      "highContrast",
-      "radius"
-    ]);
+    const forwarded = useForwardPropsEmitsWithout(props, emits, ["color", "size", "variant", "highContrast", "radius"]);
+    const resetClass = buildPropsClass(props, ["size", "variant", "highContrast"]);
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(SwitchRoot), mergeProps(unref(forwarded), {
         class: ["ui-Switch", unref(resetClass)],
@@ -912,25 +765,26 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$f = {
-  key: 0,
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  "stroke-width": "4",
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round"
+const _hoisted_1$p = {
+  width: "9",
+  height: "9",
+  viewBox: "0 0 9 9",
+  fill: "currentcolor",
+  xmlns: "http://www.w3.org/2000/svg"
 };
-const _hoisted_2$5 = {
+const _hoisted_2$6 = {
   key: 0,
-  d: "M5 12h14"
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M0.75 4.5C0.75 4.08579 1.08579 3.75 1.5 3.75H7.5C7.91421 3.75 8.25 4.08579 8.25 4.5C8.25 4.91421 7.91421 5.25 7.5 5.25H1.5C1.08579 5.25 0.75 4.91421 0.75 4.5Z"
 };
 const _hoisted_3$2 = {
   key: 1,
-  d: "M20 6 9 17l-5-5"
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M8.53547 0.62293C8.88226 0.849446 8.97976 1.3142 8.75325 1.66099L4.5083 8.1599C4.38833 8.34356 4.19397 8.4655 3.9764 8.49358C3.75883 8.52167 3.53987 8.45309 3.3772 8.30591L0.616113 5.80777C0.308959 5.52987 0.285246 5.05559 0.563148 4.74844C0.84105 4.44128 1.31533 4.41757 1.62249 4.69547L3.73256 6.60459L7.49741 0.840706C7.72393 0.493916 8.18868 0.396414 8.53547 0.62293Z"
 };
-const _sfc_main$H = /* @__PURE__ */ defineComponent({
+const _sfc_main$K = /* @__PURE__ */ defineComponent({
   __name: "Checkbox",
   props: {
     color: {},
@@ -951,235 +805,53 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const emits = __emit;
     const props = __props;
-    const [forwarded, resetClass] = extractForwardPropsEmits(props, emits, ["color", "size", "variant", "highContrast"]);
+    const forwarded = useForwardPropsEmitsWithout(props, emits, ["color", "size", "variant", "highContrast"]);
+    const resetClass = buildPropsClass(props, ["size", "variant", "highContrast"]);
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(CheckboxRoot), mergeProps(unref(forwarded), {
         class: ["ui-Checkbox", unref(resetClass)],
         "data-accent-color": props.color
       }), {
-        default: withCtx(() => [
+        default: withCtx(({ state }) => [
           createVNode(unref(CheckboxIndicator), {
             class: "ui-CheckboxIndicator",
             "as-child": ""
           }, {
             default: withCtx(() => [
-              props.modelValue !== false ? (openBlock(), createElementBlock("svg", _hoisted_1$f, [
-                props.modelValue === "indeterminate" ? (openBlock(), createElementBlock("path", _hoisted_2$5)) : (openBlock(), createElementBlock("path", _hoisted_3$2))
-              ])) : createCommentVNode("", true)
+              (openBlock(), createElementBlock("svg", _hoisted_1$p, [
+                state === "indeterminate" ? (openBlock(), createElementBlock("path", _hoisted_2$6)) : (openBlock(), createElementBlock("path", _hoisted_3$2))
+              ]))
             ]),
-            _: 1
-          })
+            _: 2
+          }, 1024)
         ]),
         _: 1
       }, 16, ["class", "data-accent-color"]);
     };
   }
 });
-const [injectCheckboxGroupRootContext, provideCheckboxGroupRootContext] = createContext("ui_CheckboxGroupRoot");
-const _sfc_main$G = /* @__PURE__ */ defineComponent({
-  __name: "CheckboxGroupRoot",
-  props: /* @__PURE__ */ mergeModels({
+const _sfc_main$J = /* @__PURE__ */ defineComponent({
+  __name: "Toggle",
+  props: {
+    variant: { default: "soft" },
+    color: {},
+    radius: {},
+    size: { default: "2" },
+    highContrast: { type: Boolean },
+    defaultValue: { type: Boolean },
+    modelValue: { type: [Boolean, null] },
     disabled: { type: Boolean },
-    name: {},
     asChild: { type: Boolean },
-    as: {}
-  }, {
-    "modelValue": {
-      default: []
-    },
-    "modelModifiers": {}
-  }),
+    as: {},
+    name: {},
+    required: { type: Boolean }
+  },
   emits: ["update:modelValue"],
-  setup(__props) {
+  setup(__props, { emit: __emit }) {
+    const emits = __emit;
     const props = __props;
-    const { disabled, name } = toRefs(props);
-    const allValues = ref([]);
-    const [modelValue, modifiers] = useModel(__props, "modelValue", {
-      set(value) {
-        if (modifiers.number) {
-          value = value.map((v) => Number(v));
-        } else if (modifiers.trim) {
-          value = value.map((v) => v.trim());
-        }
-        return value;
-      }
-    });
-    const selected = computed(() => {
-      return modelValue.value || [];
-    });
-    const checked = computed(() => {
-      if (!allValues.value.length) {
-        return false;
-      }
-      if (modelValue.value?.length === allValues.value.length) {
-        return true;
-      } else if (modelValue.value?.length) {
-        return "indeterminate";
-      } else {
-        return false;
-      }
-    });
-    const removeModelValue = (value) => {
-      const index = modelValue.value?.indexOf(value);
-      if (index !== -1 && index !== void 0) {
-        modelValue.value?.splice(index, 1);
-      }
-    };
-    provideCheckboxGroupRootContext({
-      selected,
-      checked,
-      addModelValue: (value) => {
-        if (modelValue.value?.indexOf(value) === -1) {
-          modelValue.value?.push(value);
-        }
-      },
-      removeModelValue,
-      toggleModelValue: (checked2) => {
-        if (checked2) {
-          modelValue.value = [...allValues.value];
-        } else {
-          modelValue.value = [];
-        }
-      },
-      initAllValue: (value) => {
-        allValues.value.push(value);
-      },
-      removeAllValue: (value) => {
-        allValues.value.splice(allValues.value.indexOf(value), 1);
-        removeModelValue(value);
-      },
-      disabled,
-      name: name?.value
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(Primitive), {
-        as: props.as,
-        "as-child": props.asChild
-      }, {
-        default: withCtx(() => [
-          renderSlot(_ctx.$slots, "default")
-        ]),
-        _: 3
-      }, 8, ["as", "as-child"]);
-    };
-  }
-});
-const _sfc_main$F = /* @__PURE__ */ defineComponent({
-  __name: "CheckboxGroupItem",
-  props: {
-    value: {},
-    color: {},
-    variant: {},
-    size: {},
-    highContrast: { type: Boolean },
-    defaultValue: { type: [Boolean, String] },
-    modelValue: { type: [Boolean, String, null] },
-    disabled: { type: Boolean },
-    id: {},
-    asChild: { type: Boolean },
-    as: {},
-    name: {},
-    required: { type: Boolean }
-  },
-  setup(__props) {
-    const props = __props;
-    const forwarded = useForwardProps(props);
-    useForwardExpose();
-    const rootContext = injectCheckboxGroupRootContext();
-    const disabled = computed(() => {
-      return rootContext.disabled?.value || props.disabled;
-    });
-    const checked = computed(() => {
-      return rootContext.selected.value.indexOf(props.value) !== -1;
-    });
-    const onUpdate = (checked2) => {
-      if (checked2) {
-        rootContext.addModelValue(props.value);
-      } else {
-        rootContext.removeModelValue(props.value);
-      }
-    };
-    onMounted(() => {
-      rootContext.initAllValue(props.value);
-    });
-    onBeforeUnmount(() => {
-      rootContext.removeAllValue(props.value);
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$H, mergeProps({
-        ...unref(forwarded),
-        name: props.name || unref(rootContext).name,
-        modelValue: checked.value,
-        disabled: disabled.value
-      }, { "onUpdate:modelValue": onUpdate }), null, 16);
-    };
-  }
-});
-const _sfc_main$E = /* @__PURE__ */ defineComponent({
-  __name: "CheckboxGroupControl",
-  props: {
-    color: {},
-    variant: {},
-    size: {},
-    highContrast: { type: Boolean },
-    defaultValue: { type: [Boolean, String] },
-    modelValue: { type: [Boolean, String, null] },
-    disabled: { type: Boolean },
-    value: {},
-    id: {},
-    asChild: { type: Boolean },
-    as: {},
-    name: {},
-    required: { type: Boolean }
-  },
-  setup(__props) {
-    const props = __props;
-    const forwarded = useForwardProps(props);
-    useForwardExpose();
-    const rootContext = injectCheckboxGroupRootContext();
-    const disabled = computed(() => {
-      return rootContext.disabled?.value || props.disabled;
-    });
-    const toggleModelValue = (checked) => {
-      rootContext.toggleModelValue(checked);
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$H, mergeProps({
-        ...unref(forwarded),
-        name: props.name || unref(rootContext).name,
-        modelValue: unref(rootContext).checked.value,
-        disabled: disabled.value
-      }, { "onUpdate:modelValue": toggleModelValue }), null, 16);
-    };
-  }
-});
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
-  __name: "Toggle",
-  props: {
-    color: {},
-    variant: { default: "soft" },
-    size: { default: "2" },
-    highContrast: { type: Boolean },
-    radius: {},
-    defaultValue: { type: Boolean },
-    modelValue: { type: [Boolean, null] },
-    disabled: { type: Boolean },
-    asChild: { type: Boolean },
-    as: {},
-    name: {},
-    required: { type: Boolean }
-  },
-  emits: ["update:modelValue"],
-  setup(__props, { emit: __emit }) {
-    const emits = __emit;
-    const props = __props;
-    const [forwarded, resetClass] = extractForwardPropsEmits(props, emits, [
-      "color",
-      "size",
-      "variant",
-      "highContrast",
-      "radius"
-    ]);
+    const forwarded = useForwardPropsEmitsWithout(props, emits, ["color", "size", "variant", "highContrast", "radius"]);
+    const resetClass = buildPropsClass(props, ["size", "variant", "highContrast"]);
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(Toggle), mergeProps(unref(forwarded), {
         class: ["ui-Toggle", unref(resetClass)],
@@ -1194,11 +866,11 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
+const _sfc_main$I = /* @__PURE__ */ defineComponent({
   __name: "ToggleGroupRoot",
   props: {
+    variant: { default: "solid" },
     color: {},
-    variant: { default: "soft" },
     size: { default: "2" },
     highContrast: { type: Boolean },
     radius: {},
@@ -1219,13 +891,8 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const emits = __emit;
     const props = __props;
-    const [forwarded, resetClass] = extractForwardPropsEmits(props, emits, [
-      "color",
-      "size",
-      "variant",
-      "highContrast",
-      "radius"
-    ]);
+    const forwarded = useForwardPropsEmitsWithout(props, emits, ["color", "size", "variant", "highContrast", "radius"]);
+    const resetClass = buildPropsClass(props, ["size", "variant", "highContrast"]);
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(ToggleGroupRoot), mergeProps(unref(forwarded), {
         class: ["ui-ToggleGroupRoot", unref(resetClass)],
@@ -1240,7 +907,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
+const _sfc_main$H = /* @__PURE__ */ defineComponent({
   __name: "ToggleGroupItem",
   props: {
     value: {},
@@ -1261,8 +928,8 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$e = ["data-radius", "data-accent-color"];
-const _hoisted_2$4 = ["id", "type"];
+const _hoisted_1$o = ["data-radius", "data-accent-color"];
+const _hoisted_2$5 = ["id", "type"];
 const _hoisted_3$1 = ["id", "type"];
 const _hoisted_4 = {
   key: 2,
@@ -1274,7 +941,7 @@ const _hoisted_5 = {
   class: "ui-TextFieldSlot",
   "data-side": "right"
 };
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
+const _sfc_main$G = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -1320,19 +987,13 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
         return value;
       }
     });
-    const resetClass = computed(() => {
-      const rv = extractClass(props, ["size", "variant"]);
-      if (props.class) {
-        rv.push(props.class);
-      }
-      return rv;
-    });
+    const resetClass = buildPropsClass(props, ["size", "variant", "class"]);
     const onFileChange = () => {
       modelValue.value = inputRef.value?.files;
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["ui-TextField", resetClass.value]),
+        class: normalizeClass(["ui-TextField", unref(resetClass)]),
         "data-radius": props.radius,
         "data-accent-color": props.color,
         onPointerdown: onPointerDown
@@ -1345,7 +1006,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
         }, _ctx.$attrs, {
           class: "ui-TextFieldInput",
           onChange: onFileChange
-        }), null, 16, _hoisted_2$4)) : withDirectives((openBlock(), createElementBlock("input", mergeProps({
+        }), null, 16, _hoisted_2$5)) : withDirectives((openBlock(), createElementBlock("input", mergeProps({
           key: 1,
           id: props.id,
           ref: "input",
@@ -1360,12 +1021,12 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
         _ctx.$slots.right ? (openBlock(), createElementBlock("div", _hoisted_5, [
           renderSlot(_ctx.$slots, "right")
         ])) : createCommentVNode("", true)
-      ], 42, _hoisted_1$e);
+      ], 42, _hoisted_1$o);
     };
   }
 });
-const _hoisted_1$d = ["data-accent-color"];
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
+const _hoisted_1$n = ["data-accent-color", "data-radius"];
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -1387,69 +1048,70 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const modelValue = useModel(__props, "modelValue");
-    const resetClass = computed(() => {
-      const rv = extractClass(props, ["size", "variant", "resize"]);
-      if (props.class) {
-        rv.push(props.class);
-      }
-      return rv;
-    });
+    const resetClass = buildPropsClass(props, ["size", "variant", "resize", "class"]);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["ui-TextArea", resetClass.value]),
-        "data-accent-color": props.color
+        class: normalizeClass(["ui-TextArea", unref(resetClass)]),
+        "data-accent-color": props.color,
+        "data-radius": props.radius
       }, [
         withDirectives(createElementVNode("textarea", mergeProps({
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event)
         }, _ctx.$attrs, { class: "ui-TextAreaInput" }), null, 16), [
           [vModelText, modelValue.value]
         ])
-      ], 10, _hoisted_1$d);
+      ], 10, _hoisted_1$n);
     };
   }
 });
-const _hoisted_1$c = ["data-radius"];
-const _hoisted_2$3 = ["id"];
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
+const _hoisted_1$m = ["id"];
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
   __name: "ColorField",
   props: /* @__PURE__ */ mergeModels({
     id: {},
     variant: { default: "solid" },
     size: { default: "2" },
-    radius: {}
+    radius: {},
+    defaultValue: {},
+    as: { default: "div" }
   }, {
-    "modelValue": {
-      default: "#000000"
-    },
+    "modelValue": { required: false },
     "modelModifiers": {}
   }),
   emits: ["update:modelValue"],
   setup(__props) {
     const props = __props;
     const modelValue = useModel(__props, "modelValue");
-    const resetClass = computed(() => {
-      return extractClass(props, ["size", "variant"]);
+    const resetClass = buildPropsClass(props, ["size", "variant"]);
+    onMounted(() => {
+      if (props.defaultValue && !modelValue.value) {
+        modelValue.value = props.defaultValue;
+      }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["ui-ColorField", resetClass.value]),
+      return openBlock(), createBlock(unref(Primitive), {
+        class: normalizeClass(["ui-ColorField", unref(resetClass)]),
+        as: props.as,
         "data-radius": props.radius,
-        style: normalizeStyle({ "--color-field-border-color": modelValue.value })
-      }, [
-        withDirectives(createElementVNode("input", {
-          id: props.id,
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
-          class: "ui-ColorFieldInput",
-          type: "color"
-        }, null, 8, _hoisted_2$3), [
-          [vModelText, modelValue.value]
-        ])
-      ], 14, _hoisted_1$c);
+        style: normalizeStyle({ "--color-field-color": modelValue.value })
+      }, {
+        default: withCtx(() => [
+          withDirectives(createElementVNode("input", {
+            id: props.id,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+            class: "ui-ColorFieldInput",
+            type: "color"
+          }, null, 8, _hoisted_1$m), [
+            [vModelText, modelValue.value]
+          ])
+        ]),
+        _: 1
+      }, 8, ["as", "class", "data-radius", "style"]);
     };
   }
 });
-const [injectSelectRootContext, provideSelectRootContext] = createContext("ui_SelectRoot");
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const [injectSelectRootContext, provideSelectRootContext] = createContext("ui:SelectRoot");
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "SelectRoot",
   props: {
     size: { default: "2" },
@@ -1472,7 +1134,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emits = __emit;
     const { size, color, highContrast } = toRefs(props);
-    const forwarded = useForwardPropsEmits(props, emits, ["size", "color", "highContrast"]);
+    const forwarded = useForwardPropsEmitsWithout(props, emits, ["size", "color", "highContrast"]);
     provideSelectRootContext({
       size,
       color,
@@ -1488,21 +1150,22 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
   __name: "SelectContent",
   props: {
-    to: {},
     variant: { default: "solid" },
     forceMount: { type: Boolean },
     position: {},
     bodyLock: { type: Boolean },
     side: {},
     sideOffset: {},
+    sideFlip: { type: Boolean },
     align: {},
     alignOffset: {},
+    alignFlip: { type: Boolean },
     avoidCollisions: { type: Boolean },
     collisionBoundary: {},
     collisionPadding: {},
@@ -1533,18 +1196,15 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
       return rv;
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(SelectPortal), {
-        to: props.to
-      }, {
+      return openBlock(), createBlock(unref(SelectPortal), null, {
         default: withCtx(() => [
-          createVNode(_sfc_main$O, {
+          createVNode(_sfc_main$S, {
             "accent-color": unref(context).color.value
           }, {
             default: withCtx(() => [
               createVNode(unref(SelectContent), mergeProps({ ref: unref(forwardRef) }, {
                 ..._ctx.$attrs,
                 ...unref(forwarded),
-                to: void 0,
                 variant: void 0
               }, {
                 class: ["ui-SelectContent", contentClass.value]
@@ -1592,12 +1252,28 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
           }, 8, ["accent-color"])
         ]),
         _: 3
-      }, 8, ["to"]);
+      });
     };
   }
 });
-const _hoisted_1$b = { class: "ui-SelectTriggerInner" };
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
+const _hoisted_1$l = {
+  viewBox: "0 0 15 15",
+  width: "1em",
+  height: "1em"
+};
+function render$8(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$l, _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$8 });
+const _hoisted_1$k = { class: "ui-SelectTriggerInner" };
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   __name: "SelectTrigger",
   props: {
     variant: { default: "surface" },
@@ -1622,7 +1298,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
         "data-radius": props.radius
       }, {
         default: withCtx(() => [
-          createElementVNode("span", _hoisted_1$b, [
+          createElementVNode("span", _hoisted_1$k, [
             createVNode(unref(SelectValue), {
               placeholder: props.placeholder
             }, {
@@ -1640,22 +1316,30 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
               _: 3
             }, 8, ["placeholder"])
           ]),
-          createVNode(unref(SelectIcon), { "as-child": "" }, {
-            default: withCtx(() => [
-              createVNode(unref(Icon), {
-                class: "ui-SelectIcon",
-                icon: "radix-icons:chevron-down"
-              })
-            ]),
-            _: 1
-          })
+          createVNode(unref(ChevronDownIcon), { class: "ui-SelectIcon" })
         ]),
         _: 3
       }, 8, ["class", "disabled", "data-accent-color", "data-radius"]);
     };
   }
 });
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
+const _hoisted_1$j = {
+  viewBox: "0 0 15 15",
+  width: "1em",
+  height: "1em"
+};
+function render$7(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$j, _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$7 });
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   __name: "SelectItem",
   props: {
     value: {},
@@ -1673,7 +1357,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           createVNode(unref(SelectItemIndicator), { class: "ui-SelectItemIndicator" }, {
             default: withCtx(() => [
-              createVNode(unref(Icon), { icon: "radix-icons:check" })
+              createVNode(unref(CheckIcon$1))
             ]),
             _: 1
           }),
@@ -1689,7 +1373,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   __name: "SelectLabel",
   props: {
     for: {},
@@ -1710,24 +1394,17 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-const _sfc_main$s = {};
-const _hoisted_1$a = {
+const _sfc_main$y = {};
+const _hoisted_1$i = {
   class: "ui-SelectSeparator",
   "aria-hidden": "true"
 };
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$a);
+function _sfc_render$1(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", _hoisted_1$i);
 }
-const SelectSeparator = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["render", _sfc_render]]);
-const [injectComboboxRootContext, provideComboboxRootContext] = createContext("ui_ComboboxRoot");
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const SelectSeparator = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["render", _sfc_render$1]]);
+const [injectComboboxRootContext, provideComboboxRootContext] = createContext("ui:ComboboxRoot");
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   __name: "ComboboxRoot",
   props: {
     size: { default: "2" },
@@ -1737,6 +1414,8 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     defaultOpen: { type: Boolean },
     resetSearchTermOnBlur: { type: Boolean },
     resetSearchTermOnSelect: { type: Boolean },
+    openOnFocus: { type: Boolean },
+    openOnClick: { type: Boolean },
     ignoreFilter: { type: Boolean },
     modelValue: {},
     defaultValue: {},
@@ -1755,7 +1434,8 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emits = __emit;
     const { size, color, highContrast } = toRefs(props);
-    const [forwarded, resetClass] = extractForwardPropsEmits(props, emits, ["size", "color", "highContrast"]);
+    const forwarded = useForwardPropsEmitsWithout(props, emits, ["size", "color", "highContrast"]);
+    const resetClass = buildPropsClass(props, ["size", "highContrast", "multiple"]);
     provideComboboxRootContext({
       size,
       color,
@@ -1773,13 +1453,29 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$9 = {
+const _hoisted_1$h = {
+  viewBox: "0 0 15 15",
+  width: "1em",
+  height: "1em"
+};
+function render$6(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$h, _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$6 });
+const _hoisted_1$g = {
   key: 0,
   class: "ui-ComboboxValues"
 };
-const _hoisted_2$2 = ["aria-current", "value"];
+const _hoisted_2$4 = ["aria-current", "value"];
 const _hoisted_3 = ["onClick"];
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -1800,7 +1496,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     const context = injectComboboxRootContext$1();
     const props = __props;
     const emits = __emit;
-    const forwarded = useForwardPropsEmits$1(props, emits);
+    const forwarded = useForwardPropsEmits(props, emits);
     const activeIndex = ref(-1);
     const values = computed(() => {
       return context.modelValue.value;
@@ -1818,8 +1514,8 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
       activeIndex.value = -1;
     };
     const onInputKeydown = (event) => {
-      const value = event.target.value;
-      if (!value && (event.key === "Delete" || event.key === "Backspace")) {
+      const input = event.target;
+      if (!input.value && (event.key === "Delete" || event.key === "Backspace")) {
         if (activeIndex.value !== -1) {
           onDeleteIndex(activeIndex.value);
         } else {
@@ -1828,6 +1524,10 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
             activeIndex.value = -1;
           }, 800);
         }
+      } else if (input.value && event.key === "Enter") {
+        setTimeout(() => {
+          input.value = "";
+        });
       }
     };
     watch(values, () => {
@@ -1841,7 +1541,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
         "data-multiple": unref(context).multiple.value || void 0
       }, {
         default: withCtx(() => [
-          unref(context).multiple.value ? (openBlock(), createElementBlock("div", _hoisted_1$9, [
+          unref(context).multiple.value ? (openBlock(), createElementBlock("div", _hoisted_1$g, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(values.value, (item, index) => {
               return openBlock(), createElementBlock("div", {
                 key: displayValue(item),
@@ -1857,9 +1557,9 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
                   tabindex: "-1",
                   onClick: withModifiers(($event) => onDeleteIndex(index), ["prevent"])
                 }, [
-                  createVNode(unref(Icon), { icon: "lucide:x" })
+                  createVNode(unref(CrossIcon))
                 ], 8, _hoisted_3)
-              ], 8, _hoisted_2$2);
+              ], 8, _hoisted_2$4);
             }), 128)),
             createVNode(unref(ComboboxInput), mergeProps({
               ..._ctx.$attrs,
@@ -1881,7 +1581,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
           }), null, 16)),
           createVNode(unref(ComboboxTrigger), { class: "ui-ComboboxTrigger" }, {
             default: withCtx(() => [
-              createVNode(unref(Icon), { icon: "radix-icons:chevron-down" })
+              createVNode(unref(ChevronDownIcon))
             ]),
             _: 1
           })
@@ -1891,21 +1591,22 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
   __name: "ComboboxContent",
   props: {
-    to: {},
     variant: { default: "solid" },
     forceMount: { type: Boolean },
     position: { default: "popper" },
     bodyLock: { type: Boolean },
     side: {},
-    sideOffset: {},
+    sideOffset: { default: 5 },
+    sideFlip: { type: Boolean },
     align: {},
     alignOffset: {},
+    alignFlip: { type: Boolean },
     avoidCollisions: { type: Boolean },
     collisionBoundary: {},
     collisionPadding: {},
@@ -1926,7 +1627,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     const { forwardRef } = useForwardExpose();
     const props = __props;
     const emits = __emit;
-    const forwarded = useForwardPropsEmits$1(props, emits);
+    const forwarded = useForwardPropsEmits(props, emits);
     const context = injectComboboxRootContext();
     const contentClass = computed(() => {
       const rv = ["r-size-" + context.size.value, "r-variant-" + props.variant];
@@ -1936,11 +1637,9 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
       return rv;
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(ComboboxPortal), {
-        to: props.to
-      }, {
+      return openBlock(), createBlock(unref(ComboboxPortal), null, {
         default: withCtx(() => [
-          createVNode(_sfc_main$O, {
+          createVNode(_sfc_main$S, {
             "accent-color": unref(context).color.value
           }, {
             default: withCtx(() => [
@@ -1996,11 +1695,11 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
           }, 8, ["accent-color"])
         ]),
         _: 3
-      }, 8, ["to"]);
+      });
     };
   }
 });
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   __name: "ComboboxItem",
   props: {
     textValue: {},
@@ -2017,7 +1716,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           createVNode(unref(ComboboxItemIndicator), { class: "ui-ComboboxItemIndicator" }, {
             default: withCtx(() => [
-              createVNode(unref(Icon), { icon: "radix-icons:check" })
+              createVNode(unref(CheckIcon$1))
             ]),
             _: 1
           }),
@@ -2028,7 +1727,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "ComboboxLabel",
   props: {
     for: {},
@@ -2049,13 +1748,26 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$8 = ["data-accent-color"];
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
+  __name: "ComboboxEmpty",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ComboboxEmpty), { class: "ui-ComboboxEmpty" }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      });
+    };
+  }
+});
+const _hoisted_1$f = ["data-accent-color"];
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "Radio",
   props: /* @__PURE__ */ mergeModels({
+    variant: { default: "surface" },
     color: {},
     size: { default: "2" },
-    variant: { default: "surface" },
     highContrast: { type: Boolean }
   }, {
     "modelValue": {
@@ -2077,28 +1789,25 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
         return value;
       }
     });
-    const resetClass = computed(() => {
-      return extractClass(props, ["size", "variant", "highContrast"]);
-    });
+    const resetClass = buildPropsClass(props, ["size", "variant", "highContrast"]);
     return (_ctx, _cache) => {
       return withDirectives((openBlock(), createElementBlock("input", {
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(modelValue) ? modelValue.value = $event : null),
-        class: normalizeClass(["ui-Radio", resetClass.value]),
+        class: normalizeClass(["ui-RadioBase ui-Radio", unref(resetClass)]),
         type: "radio",
         "data-accent-color": props.color
-      }, null, 10, _hoisted_1$8)), [
+      }, null, 10, _hoisted_1$f)), [
         [vModelRadio, unref(modelValue)]
       ]);
     };
   }
 });
-const [injectRadioGroupRootContext, provideRadioGroupRootContext] = createContext("ui_RadioGroupRoot");
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   __name: "RadioGroupRoot",
   props: {
-    color: {},
-    size: { default: "2" },
     variant: { default: "surface" },
+    size: { default: "2" },
+    color: {},
     highContrast: { type: Boolean },
     modelValue: {},
     defaultValue: {},
@@ -2115,23 +1824,29 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const emits = __emit;
     const props = __props;
-    const forwarded = useForwardPropsEmits(props, emits, ["color", "size", "variant", "highContrast"]);
-    const { size, variant, color, highContrast } = toRefs(props);
-    provideRadioGroupRootContext({ size, variant, color, highContrast });
+    const forwarded = useForwardPropsEmitsWithout(props, emits, ["color", "size", "variant", "highContrast"]);
+    const resetClass = buildPropsClass(props, ["size", "variant", "highContrast"]);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(RadioGroupRoot), mergeProps({ class: "ui-RadioGroupRoot" }, unref(forwarded)), {
+      return openBlock(), createBlock(unref(RadioGroupRoot), mergeProps({
+        class: ["ui-RadioGroupRoot", unref(resetClass)],
+        "data-accent-color": props.color
+      }, unref(forwarded)), {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
-      }, 16);
+      }, 16, ["class", "data-accent-color"]);
     };
   }
 });
-const _hoisted_1$7 = { class: "ui-RadioGroupItem" };
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _hoisted_1$e = { class: "ui-RadioGroupItem" };
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "RadioGroupItem",
   props: {
+    color: {},
+    size: {},
+    variant: {},
+    highContrast: { type: Boolean },
     id: {},
     value: {},
     disabled: { type: Boolean },
@@ -2142,72 +1857,26 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const forwarded = useForwardProps(props);
-    const rootContext = injectRadioGroupRootContext();
-    const resetClass = computed(() => {
-      const rv = [
-        `r-size-${rootContext.size.value}`,
-        `r-variant-${rootContext.variant.value}`
-      ];
-      if (rootContext.highContrast?.value) {
-        rv.push("r-high-contrast");
-      }
-      return rv;
-    });
+    const forwarded = useForwardPropsWithout(props, ["color", "size", "variant", "highContrast"]);
+    const resetClass = buildPropsClass(props, ["size", "variant", "highContrast"]);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("label", _hoisted_1$7, [
+      return openBlock(), createElementBlock("label", _hoisted_1$e, [
         createVNode(unref(RadioGroupItem), mergeProps({
-          class: ["ui-Radio", resetClass.value],
-          "data-accent-color": unref(rootContext).color?.value
+          class: ["ui-RadioBase ui-RadioGroupItemIndicator", unref(resetClass)],
+          "data-accent-color": props.color
         }, unref(forwarded)), null, 16, ["class", "data-accent-color"]),
         renderSlot(_ctx.$slots, "default")
       ]);
     };
   }
 });
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
-  __name: "RadioCardsItem",
-  props: {
-    id: {},
-    value: {},
-    disabled: { type: Boolean },
-    asChild: { type: Boolean },
-    as: {},
-    name: {},
-    required: { type: Boolean }
-  },
-  setup(__props) {
-    const props = __props;
-    const forwarded = useForwardProps(props);
-    useForwardExpose();
-    const rootContext = injectRadioGroupRootContext();
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(RadioGroupItem), mergeProps({
-        class: "ui-RadioCardsItem",
-        "data-accent-color": unref(rootContext).color?.value,
-        "data-size": unref(rootContext).size.value,
-        "data-variant": unref(rootContext).variant.value,
-        "data-high-contrast": unref(rootContext).highContrast?.value
-      }, { ...unref(forwarded), asChild: false }), {
-        default: withCtx(() => [
-          createVNode(_sfc_main$W, {
-            "as-child": unref(forwarded).asChild
-          }, {
-            default: withCtx(() => [
-              renderSlot(_ctx.$slots, "default")
-            ]),
-            _: 3
-          }, 8, ["as-child"])
-        ]),
-        _: 3
-      }, 16, ["data-accent-color", "data-size", "data-variant", "data-high-contrast"]);
-    };
-  }
-});
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
-  __name: "RadioTabsList",
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
+  __name: "RadioCardsRoot",
   props: {
+    variant: { default: "surface" },
     size: { default: "2" },
+    color: {},
+    highContrast: { type: Boolean },
     modelValue: {},
     defaultValue: {},
     disabled: { type: Boolean },
@@ -2223,34 +1892,124 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const emits = __emit;
     const props = __props;
-    const [forwarded, resetClass] = extractForwardPropsEmits(props, emits, ["size"]);
+    const forwarded = useForwardPropsEmitsWithout(props, emits, ["color", "size", "variant", "highContrast"]);
+    const resetClass = buildPropsClass(props, ["size", "variant", "highContrast"]);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(RadioGroupRoot), mergeProps(unref(forwarded), {
-        class: ["ui-RadioTabsList", unref(resetClass)]
-      }), {
+      return openBlock(), createBlock(unref(RadioGroupRoot), mergeProps({
+        class: ["ui-RadioCardsRoot", unref(resetClass)],
+        "data-accent-color": props.color
+      }, unref(forwarded)), {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
-      }, 16, ["class"]);
+      }, 16, ["class", "data-accent-color"]);
     };
   }
 });
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
+  __name: "RadioCardsItem",
+  props: {
+    id: {},
+    value: {},
+    disabled: { type: Boolean },
+    asChild: { type: Boolean },
+    as: {},
+    name: {},
+    required: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const forwarded = useForwardProps(props);
+    useForwardExpose();
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(RadioGroupItem), mergeProps({ class: "ui-RadioCardsItem ui-BaseCard" }, { ...unref(forwarded), asChild: false }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16);
+    };
+  }
+});
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
+  __name: "RadioTabsRoot",
+  props: {
+    variant: { default: "classic" },
+    size: { default: "2" },
+    color: {},
+    radius: {},
+    modelValue: {},
+    defaultValue: {},
+    disabled: { type: Boolean },
+    orientation: {},
+    dir: {},
+    loop: { type: Boolean },
+    asChild: { type: Boolean },
+    as: {},
+    name: {},
+    required: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const emits = __emit;
+    const props = __props;
+    const forwarded = useForwardPropsEmitsWithout(props, emits, ["size", "color", "radius", "variant"]);
+    const resetClass = buildPropsClass(props, ["size", "variant"]);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(RadioGroupRoot), mergeProps(unref(forwarded), {
+        class: ["ui-RadioTabsRoot", unref(resetClass)],
+        "data-accent-color": props.color,
+        "data-radius": props.radius
+      }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["data-accent-color", "data-radius", "class"]);
+    };
+  }
+});
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
+  __name: "RadioTabsItem",
+  props: {
+    id: {},
+    value: {},
+    disabled: { type: Boolean },
+    asChild: { type: Boolean },
+    as: {},
+    name: {},
+    required: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const forwarded = useForwardProps(props);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(RadioGroupItem), mergeProps({ class: "ui-RadioTabsItem" }, unref(forwarded)), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16);
+    };
+  }
+});
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "TabsList",
   props: {
     size: { default: "2" },
+    radius: {},
     color: {},
+    variant: { default: "outline" },
     highContrast: { type: Boolean }
   },
   setup(__props) {
     const props = __props;
-    const resetClass = computed(() => {
-      return extractClass(props, ["size", "highContrast"]);
-    });
+    const resetClass = buildPropsClass(props, ["variant", "size", "highContrast"]);
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(TabsList), {
-        class: normalizeClass(["ui-TabList", resetClass.value]),
+        class: normalizeClass(["ui-TabList", unref(resetClass)]),
+        "data-radius": props.radius,
         "data-accent-color": props.color
       }, {
         default: withCtx(() => [
@@ -2258,13 +2017,13 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
-      }, 8, ["class", "data-accent-color"]);
+      }, 8, ["class", "data-radius", "data-accent-color"]);
     };
   }
 });
-const _hoisted_1$6 = { class: "ui-TabTriggerInner" };
-const _hoisted_2$1 = { class: "ui-TabTriggerInnerHidden" };
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _hoisted_1$d = { class: "ui-TabTriggerInner" };
+const _hoisted_2$3 = { class: "ui-TabTriggerInnerHidden" };
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "TabsTrigger",
   props: {
     value: {},
@@ -2278,10 +2037,10 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(TabsTrigger), mergeProps(unref(forwarded), { class: "ui-TabTrigger" }), {
         default: withCtx(() => [
-          createElementVNode("span", _hoisted_1$6, [
+          createElementVNode("span", _hoisted_1$d, [
             renderSlot(_ctx.$slots, "default")
           ]),
-          createElementVNode("span", _hoisted_2$1, [
+          createElementVNode("span", _hoisted_2$3, [
             renderSlot(_ctx.$slots, "default")
           ])
         ]),
@@ -2290,7 +2049,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -2321,7 +2080,8 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emits = __emit;
-    const [forwarded, resetClass] = extractForwardPropsEmits(props, emits, ["radius", "color", "size"]);
+    const forwarded = useForwardPropsEmitsWithout(props, emits, ["radius", "color", "size"]);
+    const resetClass = buildPropsClass(props, ["radius", "size"]);
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(EditableRoot), mergeProps({
         class: ["ui-Editable", unref(resetClass)],
@@ -2341,14 +2101,17 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const [injectAccordionRootContext, provideAccordionRootContext] = createContext("ui:AccordionRoot");
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "AccordionRoot",
   props: {
     size: { default: "1" },
+    indicatorSide: { default: "right" },
+    indicatorIcon: { default: "chevron" },
+    orientation: {},
     collapsible: { type: Boolean },
     disabled: { type: Boolean },
     dir: {},
-    orientation: {},
     unmountOnHide: { type: Boolean },
     asChild: { type: Boolean },
     as: {},
@@ -2360,7 +2123,13 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emits = __emit;
-    const [forwarded, resetClass] = extractForwardPropsEmits(props, emits, ["size"]);
+    const { indicatorSide, indicatorIcon } = toRefs(props);
+    const forwarded = useForwardPropsEmitsWithout(props, emits, ["size", "indicatorSide", "indicatorIcon"]);
+    const resetClass = buildPropsClass(props, ["size"]);
+    provideAccordionRootContext({
+      indicatorSide,
+      indicatorIcon
+    });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(AccordionRoot), mergeProps(unref(forwarded), {
         class: ["ui-AccordionRoot", unref(resetClass)]
@@ -2373,20 +2142,28 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "AccordionItem",
   props: {
-    disabled: { type: Boolean },
     value: {},
+    disabled: { type: Boolean },
     unmountOnHide: { type: Boolean },
     asChild: { type: Boolean },
     as: {}
   },
   setup(__props) {
     const props = __props;
-    const forwardedProps = useForwardProps(props);
+    const id = useId(null, "accordion-item");
+    const forwarded = computed(() => {
+      const refProps = useForwardProps(props);
+      if (!refProps.value.value) {
+        return { ...refProps.value, value: id };
+      } else {
+        return refProps.value;
+      }
+    });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(AccordionItem), mergeProps(unref(forwardedProps), { class: "ui-AccordionItem" }), {
+      return openBlock(), createBlock(unref(AccordionItem), mergeProps(forwarded.value, { class: "ui-AccordionItem" }), {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default")
         ]),
@@ -2395,7 +2172,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -2420,74 +2197,154 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$5 = ["data-accent-color"];
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
-  __name: "PlusMinusIcon",
+const _hoisted_1$c = {
+  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] = [
+    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 _hoisted_2$2 = {
+  key: 1,
+  class: "ui-AccordionIndicator-plus"
+};
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
+  __name: "AccordionIndicator",
+  props: {
+    variant: { default: "chevron" }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$b, [
+        _ctx.variant == "chevron" ? (openBlock(), createBlock(unref(ChevronIcon), {
+          key: 0,
+          class: "ui-AccordionIndicator-chevron"
+        })) : createCommentVNode("", true),
+        _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)
+      ]);
+    };
+  }
+});
+const _hoisted_1$a = { class: "ui-AccordionTriggerText" };
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
+  __name: "AccordionTrigger",
   props: {
-    color: { default: void 0 },
-    size: { default: "1" }
+    indicatorSide: {},
+    indicatorIcon: {},
+    asChild: { type: Boolean },
+    as: {}
   },
   setup(__props) {
     const props = __props;
+    const ctx = injectAccordionRootContext();
+    const forwarded = useForwardPropsWithout(props, ["indicatorSide", "indicatorIcon"]);
+    const indicatorIcon = computed(() => {
+      return props.indicatorIcon || ctx.indicatorIcon.value;
+    });
+    const indicatorSide = computed(() => {
+      return props.indicatorSide || ctx.indicatorSide.value;
+    });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["ui-PlusMinusIcon", `r-size-${props.size}`]),
-        "data-accent-color": props.color
-      }, _cache[0] || (_cache[0] = [
-        createElementVNode("div", { class: "ui-PlusMinusIcon-1" }, null, -1),
-        createElementVNode("div", { class: "ui-PlusMinusIcon-2" }, null, -1)
-      ]), 10, _hoisted_1$5);
+      return openBlock(), createBlock(unref(AccordionTrigger), mergeProps({ class: "ui-AccordionTrigger" }, unref(forwarded)), {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1$a, [
+            renderSlot(_ctx.$slots, "default")
+          ]),
+          indicatorIcon.value !== "none" ? (openBlock(), createBlock(_sfc_main$e, {
+            key: 0,
+            "data-side": indicatorSide.value,
+            variant: indicatorIcon.value
+          }, null, 8, ["data-side", "variant"])) : createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 16);
     };
   }
 });
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
-  __name: "ChevronIcon",
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
+  __name: "CollapsibleRoot",
   props: {
-    arrowTransform: { default: "right-down" }
+    color: {},
+    radius: {},
+    variant: { default: "ghost" },
+    size: { default: "2" },
+    defaultOpen: { type: Boolean },
+    open: { type: Boolean },
+    disabled: { type: Boolean },
+    unmountOnHide: { type: Boolean },
+    asChild: { type: Boolean },
+    as: {}
   },
+  emits: ["update:open"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const forwarded = useForwardPropsEmitsWithout(props, emits, ["color", "radius", "variant", "size"]);
+    const resetClass = buildPropsClass(props, ["variant", "size"]);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(CollapsibleRoot), mergeProps({
+        class: ["ui-CollapsibleRoot", unref(resetClass)]
+      }, unref(forwarded), {
+        "data-accent-color": _ctx.color,
+        "data-radius": _ctx.radius
+      }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["class", "data-accent-color", "data-radius"]);
+    };
+  }
+});
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
+  __name: "CollapsibleIndicator",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(Icon), {
-        class: "ui-ChevronIcon",
-        icon: "lucide:chevron-right",
-        "data-arrow-transform": _ctx.arrowTransform
-      }, null, 8, ["data-arrow-transform"]);
+      return openBlock(), createBlock(unref(ChevronIcon), { class: "ui-CollapsibleIndicator" });
     };
   }
 });
-const _hoisted_1$4 = { class: "ui-AccordionTriggerText" };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
-  __name: "AccordionTrigger",
+const _hoisted_1$9 = { class: "ui-CollapsibleTriggerText" };
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
+  __name: "CollapsibleTrigger",
   props: {
-    indicator: { default: "chevron" },
+    indicator: { default: "right" },
     asChild: { type: Boolean },
     as: {}
   },
   setup(__props) {
     const props = __props;
-    const [forwarded, resetClass] = extractForwardProps(props, ["size"]);
+    const forwarded = useForwardPropsWithout(props, ["indicator"]);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(AccordionTrigger), mergeProps({
-        class: ["ui-AccordionTrigger", unref(resetClass)]
-      }, unref(forwarded)), {
+      return openBlock(), createBlock(unref(CollapsibleTrigger), mergeProps({ class: "ui-CollapsibleTrigger" }, unref(forwarded)), {
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$4, [
+          createElementVNode("span", _hoisted_1$9, [
             renderSlot(_ctx.$slots, "default")
           ]),
-          props.indicator === "plus-minus" ? (openBlock(), createBlock(_sfc_main$b, {
+          _ctx.indicator !== "none" ? (openBlock(), createBlock(_sfc_main$b, {
             key: 0,
-            class: "ui-AccordionTriggerIcon"
-          })) : props.indicator === "chevron" ? (openBlock(), createBlock(_sfc_main$a, {
-            key: 1,
-            "arrow-transform": "down-up"
-          })) : createCommentVNode("", true)
+            "data-side": _ctx.indicator
+          }, null, 8, ["data-side"])) : createCommentVNode("", true)
         ]),
         _: 3
-      }, 16, ["class"]);
+      }, 16);
     };
   }
 });
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -2512,7 +2369,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "Pagination",
   props: /* @__PURE__ */ mergeModels({
     total: {},
@@ -2534,9 +2391,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const page = useModel(__props, "page");
-    const resetClass = computed(() => {
-      return extractClass(props, ["size", "variant"]);
-    });
+    const resetClass = buildPropsClass(props, ["size", "variant"]);
     const buttonProps = computed(() => {
       return {
         color: props.color,
@@ -2587,9 +2442,9 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["ui-Pagination", resetClass.value])
+        class: normalizeClass(["ui-Pagination", unref(resetClass)])
       }, [
-        pagination.value.prev ? (openBlock(), createBlock(_sfc_main$T, mergeProps({ key: 0 }, buttonProps.value, {
+        pagination.value.prev ? (openBlock(), createBlock(_sfc_main$W, mergeProps({ key: 0 }, buttonProps.value, {
           "aria-label": "Previous",
           onClick: _cache[0] || (_cache[0] = withModifiers(($event) => selectPage(pagination.value.prev), ["prevent"]))
         }), {
@@ -2602,19 +2457,19 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }, 16)) : createCommentVNode("", true),
-        createVNode(_sfc_main$U, mergeProps(buttonProps.value, {
+        createVNode(_sfc_main$X, 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"))
+              _cache[4] || (_cache[4] = createTextVNode("1", -1))
             ])
           ]),
           _: 3
         }, 16, ["disabled"]),
-        pagination.value.hasLeftEdge ? (openBlock(), createBlock(_sfc_main$T, mergeProps({ key: 1 }, buttonProps.value, {
+        pagination.value.hasLeftEdge ? (openBlock(), createBlock(_sfc_main$W, mergeProps({ key: 1 }, buttonProps.value, {
           onClick: withModifiers(selectLeft, ["prevent"])
         }), {
           default: withCtx(() => [
@@ -2627,7 +2482,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$U, mergeProps({ key: p }, { ref_for: true }, buttonProps.value, {
+          return openBlock(), createBlock(_sfc_main$X, mergeProps({ key: p }, { ref_for: true }, buttonProps.value, {
             disabled: p === page.value,
             "aria-current": "page",
             onClick: withModifiers(($event) => selectPage(p), ["prevent"])
@@ -2640,7 +2495,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             _: 2
           }, 1040, ["disabled", "onClick"]);
         }), 128)),
-        pagination.value.hasRightEdge ? (openBlock(), createBlock(_sfc_main$T, mergeProps({ key: 2 }, buttonProps.value, {
+        pagination.value.hasRightEdge ? (openBlock(), createBlock(_sfc_main$W, mergeProps({ key: 2 }, buttonProps.value, {
           onClick: withModifiers(selectRight, ["prevent"])
         }), {
           default: withCtx(() => [
@@ -2652,7 +2507,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }, 16)) : createCommentVNode("", true),
-        pagination.value.totalPages > 1 ? (openBlock(), createBlock(_sfc_main$U, mergeProps({ key: 3 }, buttonProps.value, {
+        pagination.value.totalPages > 1 ? (openBlock(), createBlock(_sfc_main$X, 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"]))
@@ -2666,7 +2521,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }, 16, ["disabled"])) : createCommentVNode("", true),
-        pagination.value.next ? (openBlock(), createBlock(_sfc_main$T, mergeProps({ key: 4 }, buttonProps.value, {
+        pagination.value.next ? (openBlock(), createBlock(_sfc_main$W, mergeProps({ key: 4 }, buttonProps.value, {
           "aria-label": "Next",
           onClick: _cache[3] || (_cache[3] = withModifiers(($event) => selectPage(pagination.value.next), ["prevent"]))
         }), {
@@ -2683,9 +2538,374 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$3 = ["data-size", "data-variant"];
-const _hoisted_2 = ["data-layout"];
+function createGlobalState(stateFactory) {
+  let initialized = false;
+  let state;
+  const scope = effectScope(true);
+  return (...args) => {
+    if (!initialized) {
+      state = scope.run(() => stateFactory(...args));
+      initialized = true;
+    }
+    return state;
+  };
+}
+typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalScope;
+let count = 0;
+const useToastManager = createGlobalState(() => {
+  const messages = ref([]);
+  const add = (msg, category) => {
+    const id = count++;
+    if (typeof msg === "string") {
+      messages.value.unshift({ title: msg, category, id });
+    } else {
+      messages.value.unshift({ ...msg, category, id });
+    }
+    return id;
+  };
+  const update = (id, msg) => {
+    const messageArray = [...messages.value];
+    const index = messageArray.findIndex((item) => item.id === id);
+    if (index !== -1) {
+      const found = messageArray[index];
+      if (found) {
+        messageArray[index] = { ...found, ...msg };
+        messages.value = messageArray;
+      }
+    }
+  };
+  const remove = (id) => {
+    const index = messages.value.findIndex((item) => item.id === id);
+    if (index !== -1) {
+      messages.value.splice(index, 1);
+    }
+  };
+  const info = (msg) => {
+    return add(msg, "info");
+  };
+  const success = (msg) => {
+    return add(msg, "success");
+  };
+  const warning = (msg) => {
+    return add(msg, "warning");
+  };
+  const error = (msg) => {
+    return add(msg, "error");
+  };
+  const promise = (fn, options) => {
+    const id = add({ title: options.loading, duration: 6e6 }, "loading");
+    fn().then((value) => {
+      const msg = options.success(value);
+      if (typeof msg === "string") {
+        update(id, { duration: void 0, title: msg, category: "success" });
+      } else {
+        update(id, { duration: void 0, ...msg, category: "success" });
+      }
+    }).catch((e) => {
+      if (options.error) {
+        const msg = options.error(e);
+        if (typeof msg === "string") {
+          update(id, { title: msg, category: "error" });
+        } else {
+          update(id, { ...msg, category: "error" });
+        }
+      }
+    });
+    return id;
+  };
+  return {
+    messages,
+    add,
+    update,
+    remove,
+    info,
+    success,
+    warning,
+    error,
+    promise
+  };
+});
+const _sfc_main$7 = {};
+const _hoisted_1$8 = { class: "ui-SpinnerIcon" };
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("span", _hoisted_1$8, _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 = {
+  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] = [
+    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 = {
+  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] = [
+    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 = {
+  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] = [
+    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 = {
+  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] = [
+    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_2$1 = { class: "ui-ToastContent" };
+const CATEGORY_ICONS = {
+  loading: SpinnerIcon,
+  info: InfoIcon,
+  success: SuccessIcon,
+  warning: WarningIcon,
+  error: ErrorIcon
+};
+const CATEGORY_COLORS = {
+  loading: "gray",
+  info: "indigo",
+  success: "green",
+  warning: "orange",
+  error: "red"
+};
 const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  __name: "ToastItem",
+  props: {
+    yPosition: {},
+    xPosition: {},
+    message: {},
+    index: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const toastRef = useTemplateRef("toastRef");
+    const paused = ref(false);
+    const manager = useToastManager();
+    const styleVars = computed(() => {
+      const heights = manager.messages.value.slice(0, props.index).map((item) => item.height || 60);
+      const offsetY = heights.reduce((sum, num) => sum + num, 0);
+      return { "--toast-index": props.index, "--toast-offset-y": offsetY + "px" };
+    });
+    const categoryIcon = computed(() => {
+      if (props.message.category) {
+        return CATEGORY_ICONS[props.message.category];
+      } else {
+        return "";
+      }
+    });
+    const categoryColor = computed(() => {
+      if (props.message.category) {
+        return CATEGORY_COLORS[props.message.category];
+      } else {
+        return void 0;
+      }
+    });
+    const onOpenChange = (open) => {
+      if (open === false) {
+        setTimeout(() => {
+          manager.remove(props.message.id);
+        }, 500);
+      }
+    };
+    const onPause = () => {
+      paused.value = true;
+    };
+    const onResume = () => {
+      paused.value = false;
+    };
+    onMounted(() => {
+      const el = toastRef.value.$el;
+      manager.update(props.message.id, { height: el.clientHeight });
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ToastRoot), {
+        ref_key: "toastRef",
+        ref: toastRef,
+        key: _ctx.message.id,
+        class: "ui-ToastItem",
+        duration: _ctx.message.duration,
+        "data-expanded": paused.value,
+        "data-visible": _ctx.index < 3,
+        style: normalizeStyle(styleVars.value),
+        "onUpdate:open": onOpenChange,
+        onPause,
+        onResume
+      }, {
+        default: withCtx(() => [
+          _ctx.message.category ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: "ui-ToastIcon",
+            "data-accent-color": categoryColor.value
+          }, [
+            (openBlock(), createBlock(resolveDynamicComponent(categoryIcon.value)))
+          ], 8, _hoisted_1$3)) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_2$1, [
+            createVNode(unref(ToastTitle), { class: "ui-ToastTitle" }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(_ctx.message.title), 1)
+              ]),
+              _: 1
+            }),
+            _ctx.message.description ? (openBlock(), createBlock(unref(ToastDescription), {
+              key: 0,
+              class: "ui-ToastDescription"
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(_ctx.message.description), 1)
+              ]),
+              _: 1
+            })) : createCommentVNode("", true)
+          ]),
+          _ctx.message.action ? (openBlock(), createBlock(unref(ToastAction), {
+            key: 1,
+            class: "ui-ToastAction",
+            "alt-text": _ctx.message.action.altText || _ctx.message.action.label,
+            "as-child": "",
+            onClick: _ctx.message.action.onClick
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$X, {
+                variant: _ctx.message.action.variant || "soft",
+                radius: _ctx.message.action.radius,
+                size: _ctx.message.action.size || "1",
+                color: _ctx.message.action.color
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(_ctx.message.action.label), 1)
+                ]),
+                _: 1
+              }, 8, ["variant", "radius", "size", "color"])
+            ]),
+            _: 1
+          }, 8, ["alt-text", "onClick"])) : createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 8, ["duration", "data-expanded", "data-visible", "style"]);
+    };
+  }
+});
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "ToastProvider",
+  props: {
+    size: { default: "1" },
+    position: { default: "bottom-right" },
+    label: {},
+    duration: {},
+    swipeDirection: {},
+    swipeThreshold: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const forwarded = useForwardPropsWithout(props, ["position", "size"]);
+    const { messages } = useToastManager();
+    const yPosition = computed(() => {
+      return props.position.split("-")[0];
+    });
+    const xPosition = computed(() => {
+      return props.position.split("-")[1];
+    });
+    const swipeDirection = computed(() => {
+      if (props.swipeDirection) {
+        return props.swipeDirection;
+      }
+      return xPosition.value;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ToastProvider), normalizeProps(guardReactiveProps({ ...unref(forwarded), swipeDirection: swipeDirection.value })), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default"),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(messages), (msg, index) => {
+            return renderSlot(_ctx.$slots, "item", {
+              key: msg.id,
+              message: msg,
+              index
+            }, () => [
+              (openBlock(), createBlock(_sfc_main$6, {
+                key: msg.id,
+                message: msg,
+                index,
+                "x-position": xPosition.value,
+                "y-position": yPosition.value
+              }, null, 8, ["message", "index", "x-position", "y-position"]))
+            ]);
+          }), 128)),
+          createVNode(unref(ToastPortal), null, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$S, null, {
+                default: withCtx(() => [
+                  createVNode(unref(ToastViewport), mergeProps({ class: "ui-ToastViewport" }, _ctx.$attrs, {
+                    class: `r-size-${_ctx.size}`,
+                    "data-x-position": xPosition.value,
+                    "data-y-position": yPosition.value
+                  }), null, 16, ["class", "data-x-position", "data-y-position"])
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        _: 3
+      }, 16);
+    };
+  }
+});
+const toastManager = useToastManager();
+const toast = Object.assign(
+  (msg) => {
+    return toastManager.add(msg);
+  },
+  {
+    info: toastManager.info,
+    success: toastManager.success,
+    warning: toastManager.warning,
+    error: toastManager.error,
+    promise: toastManager.promise
+  }
+);
+const _hoisted_1$2 = ["data-size", "data-variant"];
+const _hoisted_2 = ["data-layout"];
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "Table",
   props: {
     size: { default: "2" },
@@ -2700,7 +2920,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         "data-size": props.size,
         "data-variant": props.variant
       }, [
-        createVNode(_sfc_main$R, null, {
+        createVNode(_sfc_main$V, null, {
           default: withCtx(() => [
             createElementVNode("table", {
               class: "ui-TableContent",
@@ -2711,16 +2931,16 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         })
-      ], 8, _hoisted_1$3);
+      ], 8, _hoisted_1$2);
     };
   }
 });
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "Separator",
   props: {
     as: { default: "span" },
     orientation: { default: "horizontal" },
-    size: {},
+    size: { default: "1" },
     color: { default: "gray" }
   },
   setup(__props) {
@@ -2736,15 +2956,16 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$2 = ["textContent"];
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$1 = ["textContent"];
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
   __name: "Tooltip",
   props: {
-    to: {},
     content: {},
+    maxWidth: { default: "360px" },
+    color: { default: "gray" },
     forceMount: { type: Boolean },
     ariaLabel: {},
     asChild: { type: Boolean },
@@ -2776,11 +2997,9 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             ]),
             _: 3
           }, 16, ["as", "as-child"]),
-          createVNode(unref(TooltipPortal), {
-            to: props.to
-          }, {
+          createVNode(unref(TooltipPortal), null, {
             default: withCtx(() => [
-              createVNode(_sfc_main$O, null, {
+              createVNode(_sfc_main$S, null, {
                 default: withCtx(() => [
                   createVNode(unref(TooltipContent), {
                     class: "ui-Tooltip",
@@ -2794,32 +3013,34 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                     "hide-when-detached": props.hideWhenDetached,
                     side: props.side,
                     "side-offset": props.sideOffset,
-                    sticky: props.sticky
+                    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$2)
+                        }, 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"])
+                  }, 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
-          }, 8, ["to"])
+          })
         ]),
         _: 3
       });
     };
   }
 });
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "Quota",
   props: {
     percent: {},
@@ -2867,164 +3088,130 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
-  __name: "Spinner",
-  props: {
-    icon: { default: "180-ring" },
-    size: { default: "2" }
-  },
-  setup(__props) {
-    const props = __props;
-    const iconName = computed(() => {
-      return `svg-spinners:${props.icon}`;
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(Icon), {
-        class: normalizeClass(["ui-Spinner", `r-size-${_ctx.size}`]),
-        icon: iconName.value
-      }, null, 8, ["class", "icon"]);
-    };
-  }
-});
-const _hoisted_1$1 = ["data-status"];
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _hoisted_1 = {
+  viewBox: "0 0 24 24",
+  width: "1em",
+  height: "1em"
+};
+function render(_ctx, _cache) {
+  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({
   __name: "SavingIndicator",
   props: {
     status: {},
-    size: { default: "2" }
+    size: { default: "2" },
+    as: { default: "span" }
   },
   setup(__props) {
     const props = __props;
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
+      return openBlock(), createBlock(unref(Primitive), {
         class: normalizeClass(["ui-SavingIndicator", `r-size-${_ctx.size}`]),
         "data-status": props.status
-      }, [
-        props.status === "saving" ? (openBlock(), createBlock(unref(Icon), {
-          key: 0,
-          icon: "svg-spinners:180-ring"
-        })) : props.status === "saved" ? (openBlock(), createBlock(unref(Icon), {
-          key: 1,
-          icon: "lucide:check-circle-2"
-        })) : createCommentVNode("", true)
-      ], 10, _hoisted_1$1);
-    };
-  }
-});
-const _hoisted_1 = ["data-accent-color"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "IconCircle",
-  props: {
-    color: {},
-    size: { default: 1 },
-    variant: { default: "soft" },
-    icon: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const resetClass = computed(() => {
-      return extractClass(props, ["size", "variant"]);
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("span", {
-        class: normalizeClass(["ui-IconCircle", resetClass.value]),
-        "data-radius": "full",
-        "data-accent-color": props.color
-      }, [
-        createVNode(unref(Icon), {
-          icon: props.icon
-        }, null, 8, ["icon"])
-      ], 10, _hoisted_1);
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", { status: _ctx.status }, () => [
+            props.status === "saving" ? (openBlock(), createBlock(SpinnerIcon, { key: 0 })) : props.status === "saved" ? (openBlock(), createBlock(unref(CheckIcon), { key: 1 })) : createCommentVNode("", true)
+          ])
+        ]),
+        _: 3
+      }, 8, ["class", "data-status"]);
     };
   }
 });
 export {
-  _sfc_main$c as AccordionContent,
-  _sfc_main$d as AccordionItem,
-  _sfc_main$e as AccordionRoot,
-  _sfc_main$9 as AccordionTrigger,
+  _sfc_main$f as AccordionContent,
+  _sfc_main$e as AccordionIndicator,
+  _sfc_main$g as AccordionItem,
+  _sfc_main$h as AccordionRoot,
+  _sfc_main$d as AccordionTrigger,
   AlertDialogAction,
   AlertDialogCancel,
-  _sfc_main$M as AlertDialogContent,
-  _sfc_main$P as AlertDialogDescription,
+  _sfc_main$T as AlertDialogDescription,
+  _sfc_main$Q as AlertDialogPopup,
   AlertDialogRoot,
-  _sfc_main$Q as AlertDialogTitle,
+  _sfc_main$U as AlertDialogTitle,
   AlertDialogTrigger,
-  _sfc_main$Z as Avatar,
-  _sfc_main$Y as Badge,
-  _sfc_main$U as Button,
-  _sfc_main$W as Card,
-  _sfc_main$V as CardHead,
-  _sfc_main$H as Checkbox,
-  _sfc_main$E as CheckboxGroupControl,
-  _sfc_main$F as CheckboxGroupItem,
-  _sfc_main$G as CheckboxGroupRoot,
-  _sfc_main$a as ChevronIcon,
-  _sfc_main$8 as CollapsibleContent,
-  CollapsibleRoot,
-  CollapsibleTrigger,
-  _sfc_main$y as ColorField,
-  _sfc_main$p as ComboboxContent,
-  ComboboxEmpty,
+  _sfc_main$_ as Avatar,
+  _sfc_main$Z as Badge,
+  _sfc_main$X as Button,
+  _sfc_main$Y as Card,
+  _sfc_main$K as Checkbox,
+  CheckboxGroupRoot as CheckboxGroup,
+  _sfc_main$9 as CollapsibleContent,
+  _sfc_main$b as CollapsibleIndicator,
+  _sfc_main$c as CollapsibleRoot,
+  _sfc_main$a as CollapsibleTrigger,
+  _sfc_main$E as ColorField,
+  _sfc_main$v as ComboboxContent,
+  _sfc_main$s as ComboboxEmpty,
   ComboboxGroup,
-  _sfc_main$q as ComboboxInput,
-  _sfc_main$o as ComboboxItem,
-  _sfc_main$n as ComboboxLabel,
-  _sfc_main$r as ComboboxRoot,
-  DialogClose2 as DialogClose,
-  _sfc_main$N as DialogContent,
-  _sfc_main$P as DialogDescription,
+  _sfc_main$w as ComboboxInput,
+  _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,
   DialogRoot,
-  _sfc_main$Q as DialogTitle,
+  _sfc_main$U as DialogTitle,
   DialogTrigger,
-  _sfc_main$L as DropdownMenuContent,
-  _sfc_main$K as DropdownMenuItem,
+  _sfc_main$P as DropdownMenuContent,
+  _sfc_main$O as DropdownMenuItem,
   DropdownMenuRoot,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
-  _sfc_main$f as Editable,
-  Icon2 as Icon,
-  _sfc_main$T as IconButton,
-  _sfc_main as IconCircle,
-  _sfc_main$X as Inset,
-  _sfc_main$7 as Pagination,
-  _sfc_main$b as PlusMinusIcon,
+  _sfc_main$i as Editable,
+  _sfc_main$W as IconButton,
+  _sfc_main$8 as Pagination,
   PopoverClose,
-  _sfc_main$J as PopoverContent,
+  _sfc_main$M as PopoverPopup,
   PopoverRoot,
   PopoverTrigger,
-  _sfc_main$3 as Quota,
-  _sfc_main$m as Radio,
-  _sfc_main$j as RadioCardsItem,
-  _sfc_main$l as RadioCardsRoot,
-  _sfc_main$k as RadioGroupItem,
-  _sfc_main$l as RadioGroupRoot,
-  RadioGroupItem2 as RadioTabsItem,
-  _sfc_main$i as RadioTabsList,
-  _sfc_main$1 as SavingIndicator,
-  _sfc_main$R as ScrollArea,
-  _sfc_main$w as SelectContent,
+  _sfc_main$1 as Quota,
+  _sfc_main$r as Radio,
+  _sfc_main$n as RadioCardsItem,
+  _sfc_main$o as RadioCardsRoot,
+  _sfc_main$p as RadioGroupItem,
+  _sfc_main$q as RadioGroupRoot,
+  _sfc_main$l as RadioTabsItem,
+  _sfc_main$m as RadioTabsRoot,
+  _sfc_main as SavingIndicator,
+  _sfc_main$V as ScrollArea,
+  _sfc_main$C as SelectContent,
   SelectGroup,
-  _sfc_main$u as SelectItem,
-  _sfc_main$t as SelectLabel,
-  _sfc_main$x as SelectRoot,
+  _sfc_main$A as SelectItem,
+  _sfc_main$z as SelectLabel,
+  _sfc_main$D as SelectRoot,
   SelectSeparator,
-  _sfc_main$v as SelectTrigger,
-  _sfc_main$5 as Separator,
-  _sfc_main$S as SocialButton,
-  _sfc_main$2 as Spinner,
-  _sfc_main$I as Switch,
-  _sfc_main$6 as Table,
+  _sfc_main$B as SelectTrigger,
+  _sfc_main$3 as Separator,
+  SpinnerIcon,
+  _sfc_main$L as Switch,
+  _sfc_main$4 as Table,
   TabsContent,
-  _sfc_main$h as TabsList,
+  _sfc_main$k as TabsList,
   TabsRoot,
-  _sfc_main$g as TabsTrigger,
-  _sfc_main$z as TextArea,
-  _sfc_main$A as TextField,
-  _sfc_main$_ as ThemeProvider,
-  _sfc_main$D as Toggle,
-  _sfc_main$B as ToggleGroupItem,
-  _sfc_main$C as ToggleGroupRoot,
-  _sfc_main$4 as Tooltip,
+  _sfc_main$j as TabsTrigger,
+  _sfc_main$F as TextArea,
+  _sfc_main$G as TextField,
+  _sfc_main$$ as ThemeProvider,
+  _sfc_main$5 as ToastProvider,
+  _sfc_main$J as Toggle,
+  _sfc_main$H as ToggleGroupItem,
+  _sfc_main$I as ToggleGroupRoot,
+  _sfc_main$2 as Tooltip,
+  buildPropsClass,
   injectThemeContext,
-  provideThemeContext
+  provideThemeContext,
+  toast,
+  useForwardPropsEmitsWithout,
+  useForwardPropsWithout
 };