@typlog/ui 0.12.0 → 0.12.2

package/components.d.ts

@@ -693,6 +693,17 @@ export declare interface CheckboxProps extends CheckboxRootProps {
     highContrast?: boolean;
 }
 
+export declare const CloseButton: DefineComponent<ButtonProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ButtonProps> & Readonly<{}>, {
+as: AsTag | Component;
+size: "1" | "2" | "3" | "4";
+variant: "classic" | "solid" | "soft" | "surface" | "outline" | "ghost";
+color: ColorType;
+highContrast: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+export declare interface CloseButtonProps extends ButtonProps {
+}
+
 export declare const CollapsibleContent: __VLS_WithTemplateSlots_43<typeof __VLS_component_5, __VLS_TemplateResult_5["slots"]>;
 
 export { CollapsibleContentProps }
@@ -1067,7 +1078,6 @@ sideOffset: number;
 }>;
 
 export declare interface PopoverPopupProps extends PopoverContentProps {
-    to?: string | HTMLElement;
     size?: '1' | '2';
 }
 
@@ -1396,6 +1406,7 @@ variant: "classic" | "outline" | "surface" | "soft";
 
 export declare interface TabsListProps {
     size?: '1' | '2';
+    radius?: RadiusType;
     color?: ColorType;
     variant?: 'classic' | 'outline' | 'surface' | 'soft';
     highContrast?: boolean;
@@ -1461,6 +1472,7 @@ accentColor: ColorType;
 radius: RadiusType;
 grayColor: GrayColorType;
 scaling: ScalingType;
+panelBackground: "solid" | "translucent";
 hasBackground: boolean;
 as: AsTag | Component;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
@@ -1472,6 +1484,7 @@ declare interface ThemeProviderContext {
     radius: Ref<RadiusType>;
     grayColor: Ref<GrayColorType>;
     scaling: Ref<ScalingType>;
+    panelBackground: Ref<'solid' | 'translucent'>;
     hasBackground: Ref<boolean>;
 }
 
@@ -1480,6 +1493,7 @@ export declare interface ThemeProviderProps extends PrimitiveProps {
     radius?: RadiusType;
     grayColor?: GrayColorType;
     scaling?: ScalingType;
+    panelBackground?: 'solid' | 'translucent';
     hasBackground?: boolean;
 }
 

package/components.js

@@ -1,27 +1,29 @@
 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, SelectIcon, 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 { 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";
 const [injectThemeContext, provideThemeContext] = createContext("ThemeProvider");
-const _sfc_main$$ = /* @__PURE__ */ defineComponent({
+const _sfc_main$10 = /* @__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) => {
@@ -33,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
@@ -41,7 +44,7 @@ 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
       });
@@ -108,7 +111,7 @@ function kebabize(str) {
 function _kebabReplace(str, ofs) {
   return (ofs ? "-" : "") + str.toLowerCase();
 }
-const _sfc_main$_ = /* @__PURE__ */ defineComponent({
+const _sfc_main$$ = /* @__PURE__ */ defineComponent({
   __name: "Avatar",
   props: {
     alt: {},
@@ -168,7 +171,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$Z = /* @__PURE__ */ defineComponent({
+const _sfc_main$_ = /* @__PURE__ */ defineComponent({
   __name: "Badge",
   props: {
     variant: { default: "soft" },
@@ -198,7 +201,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$Y = /* @__PURE__ */ defineComponent({
+const _sfc_main$Z = /* @__PURE__ */ defineComponent({
   __name: "Card",
   props: {
     variant: { default: "surface" },
@@ -225,7 +228,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$X = /* @__PURE__ */ defineComponent({
+const _sfc_main$Y = /* @__PURE__ */ defineComponent({
   __name: "Button",
   props: {
     variant: { default: "solid" },
@@ -258,7 +261,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$W = /* @__PURE__ */ defineComponent({
+const _sfc_main$X = /* @__PURE__ */ defineComponent({
   __name: "IconButton",
   props: {
     variant: { default: "solid" },
@@ -291,6 +294,55 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _hoisted_1$u = {
+  viewBox: "0 0 15 15",
+  width: "1em",
+  height: "1em"
+};
+function render$8(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$u, _cache[0] || (_cache[0] = [
+    createElementVNode("path", {
+      fill: "currentColor",
+      "fill-rule": "evenodd",
+      d: "M11.782 4.032a.575.575 0 1 0-.813-.814L7.5 6.687L4.032 3.218a.575.575 0 0 0-.814.814L6.687 7.5l-3.469 3.468a.575.575 0 0 0 .814.814L7.5 8.313l3.469 3.469a.575.575 0 0 0 .813-.814L8.313 7.5z",
+      "clip-rule": "evenodd"
+    }, null, -1)
+  ]));
+}
+const CrossIcon = markRaw({ name: "radix-icons-cross-2", render: render$8 });
+const _sfc_main$W = /* @__PURE__ */ defineComponent({
+  __name: "CloseButton",
+  props: {
+    variant: { default: "ghost" },
+    color: { default: "gray" },
+    radius: {},
+    size: { default: "2" },
+    highContrast: { type: Boolean, default: false },
+    disabled: { type: Boolean },
+    as: { default: "button" },
+    asChild: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const resetClass = buildPropsClass(props, ["size", "variant", "highContrast"]);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Primitive), {
+        class: normalizeClass(["ui-Button ui-CloseButton", 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,
+        disabled: props.disabled && props.as === "button" ? true : void 0
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(CrossIcon))
+        ]),
+        _: 1
+      }, 8, ["class", "as-child", "as", "data-accent-color", "data-radius", "data-disabled", "disabled"]);
+    };
+  }
+});
 const _sfc_main$V = /* @__PURE__ */ defineComponent({
   __name: "ScrollArea",
   props: {
@@ -427,7 +479,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$u = { class: "ui-DialogWrapper" };
+const _hoisted_1$t = { class: "ui-DialogWrapper" };
 const _hoisted_2$8 = { class: "ui-DialogContainer" };
 const _sfc_main$R = /* @__PURE__ */ defineComponent({
   ...{
@@ -453,7 +505,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
             default: withCtx(() => [
               createVNode(unref(DialogOverlay), { class: "ui-DialogOverlay" }, {
                 default: withCtx(() => [
-                  createElementVNode("div", _hoisted_1$u, [
+                  createElementVNode("div", _hoisted_1$t, [
                     createElementVNode("div", _hoisted_2$8, [
                       createVNode(unref(DialogContent), mergeProps({
                         class: ["ui-DialogPopup", `r-size-${props.size}`]
@@ -480,7 +532,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$t = { class: "ui-DialogWrapper" };
+const _hoisted_1$s = { class: "ui-DialogWrapper" };
 const _hoisted_2$7 = { class: "ui-DialogContainer" };
 const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   ...{
@@ -505,7 +557,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
             default: withCtx(() => [
               createVNode(unref(AlertDialogOverlay), { class: "ui-DialogOverlay" }, {
                 default: withCtx(() => [
-                  createElementVNode("div", _hoisted_1$t, [
+                  createElementVNode("div", _hoisted_1$s, [
                     createElementVNode("div", _hoisted_2$7, [
                       createVNode(unref(AlertDialogContent), mergeProps({ class: "ui-DialogPopup ui-AlertPopup r-size-3" }, {
                         ..._ctx.$attrs,
@@ -530,7 +582,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$s = { class: "ui-MenuViewport" };
+const _hoisted_1$r = { class: "ui-MenuViewport" };
 const [injectDropdownMenuContentContext, provideDropdownMenuContentContext] = createContext("ui:DropdownMenuContent");
 const _sfc_main$P = /* @__PURE__ */ defineComponent({
   ...{
@@ -596,7 +648,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
                 default: withCtx(() => [
                   createVNode(_sfc_main$V, { type: "auto" }, {
                     default: withCtx(() => [
-                      createElementVNode("div", _hoisted_1$s, [
+                      createElementVNode("div", _hoisted_1$r, [
                         renderSlot(_ctx.$slots, "default")
                       ])
                     ]),
@@ -614,7 +666,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$r = ["textContent"];
+const _hoisted_1$q = ["textContent"];
 const _sfc_main$O = /* @__PURE__ */ defineComponent({
   __name: "DropdownMenuItem",
   props: {
@@ -645,7 +697,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
             key: 0,
             class: "ui-MenuShortcut",
             textContent: toDisplayString(props.shortcut)
-          }, null, 8, _hoisted_1$r)) : createCommentVNode("", true)
+          }, null, 8, _hoisted_1$q)) : createCommentVNode("", true)
         ]),
         _: 3
       }, 16, ["data-accent-color", "data-variant", "data-high-contrast"]);
@@ -660,12 +712,12 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 const _sfc_main$N = {};
-const _hoisted_1$q = {
+const _hoisted_1$p = {
   class: "ui-DropdownMenuSeparator",
   "aria-hidden": "true"
 };
 function _sfc_render$2(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$q);
+  return openBlock(), createElementBlock("div", _hoisted_1$p);
 }
 const DropdownMenuSeparator = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["render", _sfc_render$2]]);
 const _sfc_main$M = /* @__PURE__ */ defineComponent({
@@ -674,7 +726,6 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
   },
   __name: "PopoverPopup",
   props: {
-    to: {},
     size: { default: "1" },
     forceMount: { type: Boolean },
     side: { default: "bottom" },
@@ -704,9 +755,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     const emits = __emit;
     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$S, null, {
             default: withCtx(() => [
@@ -723,7 +772,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
           })
         ]),
         _: 3
-      }, 8, ["to"]);
+      });
     };
   }
 });
@@ -765,7 +814,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$p = {
+const _hoisted_1$o = {
   width: "9",
   height: "9",
   viewBox: "0 0 9 9",
@@ -818,7 +867,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
             "as-child": ""
           }, {
             default: withCtx(() => [
-              (openBlock(), createElementBlock("svg", _hoisted_1$p, [
+              (openBlock(), createElementBlock("svg", _hoisted_1$o, [
                 state === "indeterminate" ? (openBlock(), createElementBlock("path", _hoisted_2$6)) : (openBlock(), createElementBlock("path", _hoisted_3$2))
               ]))
             ]),
@@ -928,7 +977,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$o = ["data-radius", "data-accent-color"];
+const _hoisted_1$n = ["data-radius", "data-accent-color"];
 const _hoisted_2$5 = ["id", "type"];
 const _hoisted_3$1 = ["id", "type"];
 const _hoisted_4 = {
@@ -1021,11 +1070,11 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
         _ctx.$slots.right ? (openBlock(), createElementBlock("div", _hoisted_5, [
           renderSlot(_ctx.$slots, "right")
         ])) : createCommentVNode("", true)
-      ], 42, _hoisted_1$o);
+      ], 42, _hoisted_1$n);
     };
   }
 });
-const _hoisted_1$n = ["data-accent-color", "data-radius"];
+const _hoisted_1$m = ["data-accent-color", "data-radius"];
 const _sfc_main$F = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
@@ -1060,11 +1109,11 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
         }, _ctx.$attrs, { class: "ui-TextAreaInput" }), null, 16), [
           [vModelText, modelValue.value]
         ])
-      ], 10, _hoisted_1$n);
+      ], 10, _hoisted_1$m);
     };
   }
 });
-const _hoisted_1$m = ["id"];
+const _hoisted_1$l = ["id"];
 const _sfc_main$E = /* @__PURE__ */ defineComponent({
   __name: "ColorField",
   props: /* @__PURE__ */ mergeModels({
@@ -1101,7 +1150,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
             class: "ui-ColorFieldInput",
             type: "color"
-          }, null, 8, _hoisted_1$m), [
+          }, null, 8, _hoisted_1$l), [
             [vModelText, modelValue.value]
           ])
         ]),
@@ -1256,13 +1305,13 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$l = {
+const _hoisted_1$k = {
   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] = [
+function render$7(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$k, _cache[0] || (_cache[0] = [
     createElementVNode("path", {
       fill: "currentColor",
       "fill-rule": "evenodd",
@@ -1271,8 +1320,8 @@ function render$8(_ctx, _cache) {
     }, null, -1)
   ]));
 }
-const ChevronDownIcon = markRaw({ name: "radix-icons-chevron-down", render: render$8 });
-const _hoisted_1$k = { class: "ui-SelectTriggerInner" };
+const ChevronDownIcon = markRaw({ name: "radix-icons-chevron-down", render: render$7 });
+const _hoisted_1$j = { class: "ui-SelectTriggerInner" };
 const _sfc_main$B = /* @__PURE__ */ defineComponent({
   __name: "SelectTrigger",
   props: {
@@ -1298,7 +1347,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
         "data-radius": props.radius
       }, {
         default: withCtx(() => [
-          createElementVNode("span", _hoisted_1$k, [
+          createElementVNode("span", _hoisted_1$j, [
             createVNode(unref(SelectValue), {
               placeholder: props.placeholder
             }, {
@@ -1316,25 +1365,20 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
               _: 3
             }, 8, ["placeholder"])
           ]),
-          createVNode(unref(SelectIcon), { "as-child": "" }, {
-            default: withCtx(() => [
-              createVNode(unref(ChevronDownIcon), { class: "ui-SelectIcon" })
-            ]),
-            _: 1
-          })
+          createVNode(unref(ChevronDownIcon), { class: "ui-SelectIcon" })
         ]),
         _: 3
       }, 8, ["class", "disabled", "data-accent-color", "data-radius"]);
     };
   }
 });
-const _hoisted_1$j = {
+const _hoisted_1$i = {
   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] = [
+function render$6(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$i, _cache[0] || (_cache[0] = [
     createElementVNode("path", {
       fill: "currentColor",
       "fill-rule": "evenodd",
@@ -1343,7 +1387,7 @@ function render$7(_ctx, _cache) {
     }, null, -1)
   ]));
 }
-const CheckIcon$1 = markRaw({ name: "radix-icons-check", render: render$7 });
+const CheckIcon$1 = markRaw({ name: "radix-icons-check", render: render$6 });
 const _sfc_main$A = /* @__PURE__ */ defineComponent({
   __name: "SelectItem",
   props: {
@@ -1400,12 +1444,12 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
   }
 });
 const _sfc_main$y = {};
-const _hoisted_1$i = {
+const _hoisted_1$h = {
   class: "ui-SelectSeparator",
   "aria-hidden": "true"
 };
 function _sfc_render$1(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$i);
+  return openBlock(), createElementBlock("div", _hoisted_1$h);
 }
 const SelectSeparator = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["render", _sfc_render$1]]);
 const [injectComboboxRootContext, provideComboboxRootContext] = createContext("ui:ComboboxRoot");
@@ -1458,22 +1502,6 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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"
@@ -2003,6 +2031,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "TabsList",
   props: {
     size: { default: "2" },
+    radius: {},
     color: {},
     variant: { default: "outline" },
     highContrast: { type: Boolean }
@@ -2013,6 +2042,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(TabsList), {
         class: normalizeClass(["ui-TabList", unref(resetClass)]),
+        "data-radius": props.radius,
         "data-accent-color": props.color
       }, {
         default: withCtx(() => [
@@ -2020,7 +2050,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
-      }, 8, ["class", "data-accent-color"]);
+      }, 8, ["class", "data-radius", "data-accent-color"]);
     };
   }
 });
@@ -2447,7 +2477,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["ui-Pagination", unref(resetClass)])
       }, [
-        pagination.value.prev ? (openBlock(), createBlock(_sfc_main$W, mergeProps({ key: 0 }, buttonProps.value, {
+        pagination.value.prev ? (openBlock(), createBlock(_sfc_main$X, mergeProps({ key: 0 }, buttonProps.value, {
           "aria-label": "Previous",
           onClick: _cache[0] || (_cache[0] = withModifiers(($event) => selectPage(pagination.value.prev), ["prevent"]))
         }), {
@@ -2460,7 +2490,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }, 16)) : createCommentVNode("", true),
-        createVNode(_sfc_main$X, mergeProps(buttonProps.value, {
+        createVNode(_sfc_main$Y, mergeProps(buttonProps.value, {
           disabled: page.value === 1,
           "aria-current": "page",
           onClick: _cache[1] || (_cache[1] = withModifiers(($event) => selectPage(1), ["prevent"]))
@@ -2472,7 +2502,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }, 16, ["disabled"]),
-        pagination.value.hasLeftEdge ? (openBlock(), createBlock(_sfc_main$W, mergeProps({ key: 1 }, buttonProps.value, {
+        pagination.value.hasLeftEdge ? (openBlock(), createBlock(_sfc_main$X, mergeProps({ key: 1 }, buttonProps.value, {
           onClick: withModifiers(selectLeft, ["prevent"])
         }), {
           default: withCtx(() => [
@@ -2485,7 +2515,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
           _: 3
         }, 16)) : createCommentVNode("", true),
         (openBlock(true), createElementBlock(Fragment, null, renderList(pagination.value.pageList, (p) => {
-          return openBlock(), createBlock(_sfc_main$X, mergeProps({ key: p }, { ref_for: true }, buttonProps.value, {
+          return openBlock(), createBlock(_sfc_main$Y, mergeProps({ key: p }, { ref_for: true }, buttonProps.value, {
             disabled: p === page.value,
             "aria-current": "page",
             onClick: withModifiers(($event) => selectPage(p), ["prevent"])
@@ -2498,7 +2528,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
             _: 2
           }, 1040, ["disabled", "onClick"]);
         }), 128)),
-        pagination.value.hasRightEdge ? (openBlock(), createBlock(_sfc_main$W, mergeProps({ key: 2 }, buttonProps.value, {
+        pagination.value.hasRightEdge ? (openBlock(), createBlock(_sfc_main$X, mergeProps({ key: 2 }, buttonProps.value, {
           onClick: withModifiers(selectRight, ["prevent"])
         }), {
           default: withCtx(() => [
@@ -2510,7 +2540,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }, 16)) : createCommentVNode("", true),
-        pagination.value.totalPages > 1 ? (openBlock(), createBlock(_sfc_main$X, mergeProps({ key: 3 }, buttonProps.value, {
+        pagination.value.totalPages > 1 ? (openBlock(), createBlock(_sfc_main$Y, mergeProps({ key: 3 }, buttonProps.value, {
           disabled: pagination.value.totalPages === page.value,
           "aria-current": "page",
           onClick: _cache[2] || (_cache[2] = withModifiers(($event) => selectPage(pagination.value.totalPages), ["prevent"]))
@@ -2524,7 +2554,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }, 16, ["disabled"])) : createCommentVNode("", true),
-        pagination.value.next ? (openBlock(), createBlock(_sfc_main$W, mergeProps({ key: 4 }, buttonProps.value, {
+        pagination.value.next ? (openBlock(), createBlock(_sfc_main$X, mergeProps({ key: 4 }, buttonProps.value, {
           "aria-label": "Next",
           onClick: _cache[3] || (_cache[3] = withModifiers(($event) => selectPage(pagination.value.next), ["prevent"]))
         }), {
@@ -2541,6 +2571,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+// @__NO_SIDE_EFFECTS__
 function createGlobalState(stateFactory) {
   let initialized = false;
   let state;
@@ -2555,7 +2586,7 @@ function createGlobalState(stateFactory) {
 }
 typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalScope;
 let count = 0;
-const useToastManager = createGlobalState(() => {
+const useToastManager = /* @__PURE__ */ createGlobalState(() => {
   const messages = ref([]);
   const add = (msg, category) => {
     const id = count++;
@@ -2765,6 +2796,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         class: "ui-ToastItem",
         duration: _ctx.message.duration,
         "data-expanded": paused.value,
+        "data-visible": _ctx.index < 3,
         style: normalizeStyle(styleVars.value),
         "onUpdate:open": onOpenChange,
         onPause,
@@ -2803,7 +2835,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
             onClick: _ctx.message.action.onClick
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$X, {
+              createVNode(_sfc_main$Y, {
                 variant: _ctx.message.action.variant || "soft",
                 radius: _ctx.message.action.radius,
                 size: _ctx.message.action.size || "1",
@@ -2819,7 +2851,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
           }, 8, ["alt-text", "onClick"])) : createCommentVNode("", true)
         ]),
         _: 1
-      }, 8, ["duration", "data-expanded", "style"]);
+      }, 8, ["duration", "data-expanded", "data-visible", "style"]);
     };
   }
 });
@@ -2839,7 +2871,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const forwarded = useForwardPropsWithout(props, ["position", "size"]);
-    const manager = useToastManager();
+    const { messages } = useToastManager();
     const yPosition = computed(() => {
       return props.position.split("-")[0];
     });
@@ -2852,14 +2884,11 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       }
       return xPosition.value;
     });
-    const messages = computed(() => {
-      return manager.messages.value.slice(0, 3);
-    });
     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(messages.value, (msg, index) => {
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(messages), (msg, index) => {
             return renderSlot(_ctx.$slots, "item", {
               key: msg.id,
               message: msg,
@@ -3144,12 +3173,13 @@ export {
   AlertDialogRoot,
   _sfc_main$U as AlertDialogTitle,
   AlertDialogTrigger,
-  _sfc_main$_ as Avatar,
-  _sfc_main$Z as Badge,
-  _sfc_main$X as Button,
-  _sfc_main$Y as Card,
+  _sfc_main$$ as Avatar,
+  _sfc_main$_ as Badge,
+  _sfc_main$Y as Button,
+  _sfc_main$Z as Card,
   _sfc_main$K as Checkbox,
   CheckboxGroupRoot as CheckboxGroup,
+  _sfc_main$W as CloseButton,
   _sfc_main$9 as CollapsibleContent,
   _sfc_main$b as CollapsibleIndicator,
   _sfc_main$c as CollapsibleRoot,
@@ -3174,7 +3204,7 @@ export {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
   _sfc_main$i as Editable,
-  _sfc_main$W as IconButton,
+  _sfc_main$X as IconButton,
   _sfc_main$8 as Pagination,
   PopoverClose,
   _sfc_main$M as PopoverPopup,
@@ -3207,7 +3237,7 @@ export {
   _sfc_main$j as TabsTrigger,
   _sfc_main$F as TextArea,
   _sfc_main$G as TextField,
-  _sfc_main$$ as ThemeProvider,
+  _sfc_main$10 as ThemeProvider,
   _sfc_main$5 as ToastProvider,
   _sfc_main$J as Toggle,
   _sfc_main$H as ToggleGroupItem,