@typlog/ui 0.12.1 → 0.12.2

package/components.js

@@ -3,7 +3,7 @@ import { createContext, TooltipProvider, Primitive, useForwardProps, useEmitAsPr
 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" },
@@ -111,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: {},
@@ -171,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" },
@@ -201,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" },
@@ -228,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" },
@@ -261,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" },
@@ -294,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: {
@@ -430,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({
   ...{
@@ -456,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}`]
@@ -483,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({
   ...{
@@ -508,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,
@@ -533,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({
   ...{
@@ -599,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")
                       ])
                     ]),
@@ -617,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: {
@@ -648,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"]);
@@ -663,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({
@@ -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
             }, {
@@ -1323,13 +1372,13 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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",
@@ -1338,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: {
@@ -1395,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");
@@ -1453,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"
@@ -2444,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"]))
         }), {
@@ -2457,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"]))
@@ -2469,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(() => [
@@ -2482,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"])
@@ -2495,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(() => [
@@ -2507,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"]))
@@ -2521,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"]))
         }), {
@@ -2538,6 +2571,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+// @__NO_SIDE_EFFECTS__
 function createGlobalState(stateFactory) {
   let initialized = false;
   let state;
@@ -2552,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++;
@@ -2801,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",
@@ -3139,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,
@@ -3169,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,
@@ -3202,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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typlog/ui",
-  "version": "0.12.1",
+  "version": "0.12.2",
   "license": "MIT",
   "type": "module",
   "description": "Themed components for Reka UI with Radix colors.",