@expcat/tigercat-vue 0.3.0 → 0.3.70

package/dist/chunk-7AFJ7TKW.js

@@ -0,0 +1,266 @@
+'use strict';
+
+var chunkPNKVD2UK_js = require('./chunk-PNKVD2UK.js');
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/ImagePreview.ts
+var ImagePreview_exports = {};
+chunkPNKVD2UK_js.__export(ImagePreview_exports, {
+  ImagePreview: () => exports.ImagePreview,
+  default: () => exports.ImagePreview_default
+});
+var svgIcon; exports.ImagePreview = void 0; exports.ImagePreview_default = void 0;
+var init_ImagePreview = chunkPNKVD2UK_js.__esm({
+  "src/components/ImagePreview.ts"() {
+    svgIcon = (d, cls = "w-5 h-5") => vue.h(
+      "svg",
+      {
+        class: cls,
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor"
+      },
+      [
+        vue.h("path", {
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          "stroke-width": "2",
+          d
+        })
+      ]
+    );
+    exports.ImagePreview = vue.defineComponent({
+      name: "TigerImagePreview",
+      inheritAttrs: false,
+      props: {
+        visible: { type: Boolean, default: false },
+        images: { type: Array, default: () => [] },
+        currentIndex: { type: Number, default: 0 },
+        zIndex: { type: Number, default: 1050 },
+        maskClosable: { type: Boolean, default: true },
+        scaleStep: { type: Number, default: 0.5 },
+        minScale: { type: Number, default: 0.25 },
+        maxScale: { type: Number, default: 5 }
+      },
+      emits: ["update:visible", "update:currentIndex", "scale-change"],
+      setup(props, { emit }) {
+        const scale = vue.ref(1);
+        const offsetX = vue.ref(0);
+        const offsetY = vue.ref(0);
+        const index = vue.ref(props.currentIndex);
+        const dragging = vue.ref(false);
+        const dragStart = vue.ref({ x: 0, y: 0, ox: 0, oy: 0 });
+        const resetTransform = () => {
+          scale.value = 1;
+          offsetX.value = 0;
+          offsetY.value = 0;
+        };
+        vue.watch(
+          () => props.currentIndex,
+          (val) => {
+            index.value = val;
+            resetTransform();
+          }
+        );
+        vue.watch(
+          () => props.visible,
+          (val) => {
+            if (val) {
+              resetTransform();
+              index.value = props.currentIndex;
+              document.body.style.overflow = "hidden";
+            } else {
+              document.body.style.overflow = "";
+            }
+          }
+        );
+        const navState = vue.computed(() => tigercatCore.getPreviewNavState(index.value, props.images.length));
+        const handleClose = () => {
+          emit("update:visible", false);
+        };
+        const handleZoomIn = () => {
+          scale.value = tigercatCore.clampScale(scale.value + props.scaleStep, props.minScale, props.maxScale);
+          emit("scale-change", scale.value);
+        };
+        const handleZoomOut = () => {
+          scale.value = tigercatCore.clampScale(scale.value - props.scaleStep, props.minScale, props.maxScale);
+          emit("scale-change", scale.value);
+        };
+        const handleReset = () => {
+          resetTransform();
+          emit("scale-change", 1);
+        };
+        const handlePrev = () => {
+          if (navState.value.hasPrev) {
+            index.value--;
+            resetTransform();
+            emit("update:currentIndex", index.value);
+          }
+        };
+        const handleNext = () => {
+          if (navState.value.hasNext) {
+            index.value++;
+            resetTransform();
+            emit("update:currentIndex", index.value);
+          }
+        };
+        const handleWheel = (e) => {
+          e.preventDefault();
+          const delta = e.deltaY > 0 ? -props.scaleStep : props.scaleStep;
+          scale.value = tigercatCore.clampScale(scale.value + delta, props.minScale, props.maxScale);
+          emit("scale-change", scale.value);
+        };
+        const handleMouseDown = (e) => {
+          if (e.button !== 0) return;
+          e.preventDefault();
+          dragging.value = true;
+          dragStart.value = {
+            x: e.clientX,
+            y: e.clientY,
+            ox: offsetX.value,
+            oy: offsetY.value
+          };
+        };
+        const handleMouseMove = (e) => {
+          if (!dragging.value) return;
+          offsetX.value = dragStart.value.ox + (e.clientX - dragStart.value.x);
+          offsetY.value = dragStart.value.oy + (e.clientY - dragStart.value.y);
+        };
+        const handleMouseUp = () => {
+          dragging.value = false;
+        };
+        const handleMaskClick = (e) => {
+          if (props.maskClosable && e.target === e.currentTarget) {
+            handleClose();
+          }
+        };
+        const handleKeyDown = (e) => {
+          if (!props.visible) return;
+          switch (e.key) {
+            case "Escape":
+              handleClose();
+              break;
+            case "ArrowLeft":
+              handlePrev();
+              break;
+            case "ArrowRight":
+              handleNext();
+              break;
+          }
+        };
+        vue.onMounted(() => {
+          document.addEventListener("keydown", handleKeyDown);
+        });
+        vue.onBeforeUnmount(() => {
+          document.removeEventListener("keydown", handleKeyDown);
+          document.body.style.overflow = "";
+        });
+        const transform = vue.computed(() => tigercatCore.calculateTransform(scale.value, offsetX.value, offsetY.value));
+        return () => {
+          if (!props.visible || !props.images.length) return null;
+          const currentSrc = props.images[index.value] || props.images[0];
+          const mask = vue.h("div", {
+            class: tigercatCore.imagePreviewMaskClasses,
+            "aria-hidden": "true"
+          });
+          const img = vue.h("img", {
+            src: currentSrc,
+            class: tigercatCore.imagePreviewImgClasses,
+            style: { transform: transform.value },
+            alt: `Preview image ${index.value + 1}`,
+            draggable: false,
+            onMousedown: handleMouseDown,
+            onMousemove: handleMouseMove,
+            onMouseup: handleMouseUp,
+            onMouseleave: handleMouseUp
+          });
+          const closeBtn = vue.h(
+            "button",
+            {
+              class: tigercatCore.imagePreviewCloseBtnClasses,
+              onClick: handleClose,
+              "aria-label": "Close preview",
+              type: "button"
+            },
+            [svgIcon(tigercatCore.previewCloseIconPath)]
+          );
+          const toolbar = vue.h("div", { class: tigercatCore.imagePreviewToolbarClasses }, [
+            vue.h(
+              "button",
+              {
+                class: tigercatCore.imagePreviewToolbarBtnClasses,
+                onClick: handleZoomOut,
+                "aria-label": "Zoom out",
+                type: "button"
+              },
+              [svgIcon(tigercatCore.zoomOutIconPath)]
+            ),
+            vue.h(
+              "button",
+              {
+                class: tigercatCore.imagePreviewToolbarBtnClasses,
+                onClick: handleReset,
+                "aria-label": "Reset",
+                type: "button"
+              },
+              [svgIcon(tigercatCore.resetIconPath)]
+            ),
+            vue.h(
+              "button",
+              {
+                class: tigercatCore.imagePreviewToolbarBtnClasses,
+                onClick: handleZoomIn,
+                "aria-label": "Zoom in",
+                type: "button"
+              },
+              [svgIcon(tigercatCore.zoomInIconPath)]
+            ),
+            navState.value.counter ? vue.h("span", { class: tigercatCore.imagePreviewCounterClasses }, navState.value.counter) : null
+          ]);
+          const prevBtn = props.images.length > 1 ? vue.h(
+            "button",
+            {
+              class: tigercatCore.classNames(tigercatCore.imagePreviewNavBtnClasses, "left-4"),
+              onClick: handlePrev,
+              disabled: !navState.value.hasPrev,
+              "aria-label": "Previous image",
+              type: "button"
+            },
+            [svgIcon(tigercatCore.prevIconPath)]
+          ) : null;
+          const nextBtn = props.images.length > 1 ? vue.h(
+            "button",
+            {
+              class: tigercatCore.classNames(tigercatCore.imagePreviewNavBtnClasses, "right-4"),
+              onClick: handleNext,
+              disabled: !navState.value.hasNext,
+              "aria-label": "Next image",
+              type: "button"
+            },
+            [svgIcon(tigercatCore.nextIconPath)]
+          ) : null;
+          const wrapper = vue.h(
+            "div",
+            {
+              class: tigercatCore.imagePreviewWrapperClasses,
+              style: { zIndex: props.zIndex },
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-label": "Image preview",
+              onClick: handleMaskClick,
+              onWheel: handleWheel
+            },
+            [mask, img, closeBtn, prevBtn, nextBtn, toolbar]
+          );
+          return vue.h(vue.Teleport, { to: "body" }, [wrapper]);
+        };
+      }
+    });
+    exports.ImagePreview_default = exports.ImagePreview;
+  }
+});
+
+exports.ImagePreview_exports = ImagePreview_exports;
+exports.init_ImagePreview = init_ImagePreview;

package/dist/{chunk-CJYWTPAS.mjs → chunk-7FCHU5KV.mjs}

@@ -1,6 +1,6 @@
-import { MenuContextKey } from './chunk-FKON56SN.mjs';
+import { MenuContextKey } from './chunk-3AM6WEUE.mjs';
 import { defineComponent, inject, computed, ref, h, Transition, isVNode, cloneVNode, nextTick } from 'vue';
-import { isKeyOpen, classNames, getSubMenuTitleClasses, coerceClassValue, mergeStyleValues, submenuContentHorizontalClasses, submenuContentPopupClasses, submenuContentInlineClasses, submenuContentVerticalClasses, getMenuItemIndent, menuItemIconClasses, getSubMenuExpandIconClasses } from '@expcat/tigercat-core';
+import { isKeyOpen, classNames, getSubMenuTitleClasses, coerceClassValue, mergeStyleValues, submenuContentHorizontalClasses, submenuContentPopupClasses, submenuContentInlineClasses, submenuContentVerticalClasses, getMenuItemIndent, menuItemIconClasses, getSubMenuExpandIconClasses, moveFocusInMenu, focusMenuEdge, focusFirstChildItem } from '@expcat/tigercat-core';
 
 var ExpandIcon = (expanded) => {
   return h(
@@ -82,13 +82,13 @@ var SubMenu = defineComponent({
     const isHovered = ref(false);
     const isOpenByKeyboard = ref(false);
     const effectiveCollapsed = computed(() => {
-      return props.collapsed ?? (menuContext ? menuContext.collapsed : false);
+      return props.collapsed ?? (menuContext ? menuContext.collapsed.value : false);
     });
     const isPopup = computed(() => {
-      return !!menuContext && menuContext.mode === "vertical" && effectiveCollapsed.value;
+      return !!menuContext && menuContext.mode.value === "vertical" && effectiveCollapsed.value;
     });
     const isExpanded = computed(() => {
-      if (menuContext?.mode === "horizontal" || isPopup.value) {
+      if (menuContext?.mode.value === "horizontal" || isPopup.value) {
         return isHovered.value || isOpenByKeyboard.value;
       }
       return isOpen.value;
@@ -96,7 +96,7 @@ var SubMenu = defineComponent({
     const titleClasses = computed(() => {
       if (!menuContext) return "";
       return classNames(
-        getSubMenuTitleClasses(menuContext.theme, props.disabled),
+        getSubMenuTitleClasses(menuContext.theme.value, props.disabled),
         props.className,
         coerceClassValue(attrs.class)
       );
@@ -108,16 +108,16 @@ var SubMenu = defineComponent({
     });
     const contentClasses = computed(() => {
       if (!menuContext) return "";
-      if (menuContext.mode === "horizontal") {
+      if (menuContext.mode.value === "horizontal") {
         return submenuContentHorizontalClasses;
       }
       if (isPopup.value) return submenuContentPopupClasses;
-      if (menuContext.mode === "inline") return submenuContentInlineClasses;
+      if (menuContext.mode.value === "inline") return submenuContentInlineClasses;
       return submenuContentVerticalClasses;
     });
     const handleTitleClick = () => {
       if (!menuContext || props.disabled) return;
-      if (menuContext.mode === "horizontal") return;
+      if (menuContext.mode.value === "horizontal") return;
       if (isPopup.value) {
         isOpenByKeyboard.value = !isOpenByKeyboard.value;
         isHovered.value = true;
@@ -125,82 +125,41 @@ var SubMenu = defineComponent({
       }
       menuContext.handleOpenChange(props.itemKey);
     };
-    const getMenuButtonsWithin = (menuEl) => {
-      return Array.from(
-        menuEl.querySelectorAll('button[data-tiger-menuitem="true"]')
-      ).filter((el) => !el.disabled);
-    };
-    const roveFocus = (current, next) => {
-      const menuEl = current.closest('ul[role="menu"]');
-      if (!menuEl) {
-        next.focus();
-        return;
-      }
-      const items = getMenuButtonsWithin(menuEl);
-      items.forEach((el) => {
-        el.tabIndex = el === next ? 0 : -1;
-      });
-      next.focus();
-    };
-    const moveFocus = (current, delta) => {
-      const menuEl = current.closest('ul[role="menu"]');
-      if (!menuEl) return;
-      const items = getMenuButtonsWithin(menuEl);
-      const currentIndex = items.indexOf(current);
-      if (currentIndex < 0) return;
-      const nextIndex = (currentIndex + delta + items.length) % items.length;
-      roveFocus(current, items[nextIndex]);
-    };
-    const focusEdge = (current, edge) => {
-      const menuEl = current.closest('ul[role="menu"]');
-      if (!menuEl) return;
-      const items = getMenuButtonsWithin(menuEl);
-      if (items.length === 0) return;
-      roveFocus(current, edge === "start" ? items[0] : items[items.length - 1]);
-    };
-    const focusFirstChildItem = async () => {
+    const focusFirstChild = async () => {
       await nextTick();
       const titleEl = document.activeElement;
-      const li = titleEl?.closest("li");
-      const submenu = li?.querySelector('ul[role="menu"]');
-      if (!submenu) return;
-      const items = getMenuButtonsWithin(submenu);
-      if (items.length === 0) return;
-      items.forEach((el, idx) => {
-        el.tabIndex = idx === 0 ? 0 : -1;
-      });
-      items[0].focus();
+      if (titleEl) focusFirstChildItem(titleEl);
     };
     const handleTitleKeyDown = async (event) => {
       if (!menuContext || props.disabled) return;
       const current = event.currentTarget;
       const rootMenu = current.closest('ul[role="menu"]');
       const isRoot = rootMenu?.dataset.tigerMenuRoot === "true";
-      const isHorizontalRoot = isRoot && menuContext.mode === "horizontal";
+      const isHorizontalRoot = isRoot && menuContext.mode.value === "horizontal";
       const nextKey = isHorizontalRoot ? "ArrowRight" : "ArrowDown";
       const prevKey = isHorizontalRoot ? "ArrowLeft" : "ArrowUp";
       if (event.key === nextKey) {
         event.preventDefault();
-        moveFocus(current, 1);
+        moveFocusInMenu(current, 1);
         return;
       }
       if (event.key === prevKey) {
         event.preventDefault();
-        moveFocus(current, -1);
+        moveFocusInMenu(current, -1);
         return;
       }
       if (event.key === "Home") {
         event.preventDefault();
-        focusEdge(current, "start");
+        focusMenuEdge(current, "start");
         return;
       }
       if (event.key === "End") {
         event.preventDefault();
-        focusEdge(current, "end");
+        focusMenuEdge(current, "end");
         return;
       }
       if (event.key === "Escape" || event.key === "ArrowLeft") {
-        if (menuContext.mode === "horizontal" || isPopup.value) {
+        if (menuContext.mode.value === "horizontal" || isPopup.value) {
           event.preventDefault();
           isOpenByKeyboard.value = false;
           isHovered.value = false;
@@ -214,16 +173,16 @@ var SubMenu = defineComponent({
       }
       if (event.key === "Enter" || event.key === " ") {
         event.preventDefault();
-        if (menuContext.mode === "horizontal" || isPopup.value) {
+        if (menuContext.mode.value === "horizontal" || isPopup.value) {
           isOpenByKeyboard.value = true;
           return;
         }
         menuContext.handleOpenChange(props.itemKey);
-        await focusFirstChildItem();
+        await focusFirstChild();
         return;
       }
       if (event.key === "ArrowRight" || event.key === "ArrowDown") {
-        if (menuContext.mode === "horizontal" || isPopup.value) {
+        if (menuContext.mode.value === "horizontal" || isPopup.value) {
           event.preventDefault();
           isOpenByKeyboard.value = true;
           return;
@@ -231,26 +190,26 @@ var SubMenu = defineComponent({
         if (!isOpen.value) {
           event.preventDefault();
           menuContext.handleOpenChange(props.itemKey);
-          await focusFirstChildItem();
+          await focusFirstChild();
         }
       }
     };
     const handleMouseEnter = () => {
-      if (menuContext?.mode === "horizontal" || isPopup.value) {
+      if (menuContext?.mode.value === "horizontal" || isPopup.value) {
         isHovered.value = true;
       }
     };
     const handleMouseLeave = () => {
-      if (menuContext?.mode === "horizontal" || isPopup.value) {
+      if (menuContext?.mode.value === "horizontal" || isPopup.value) {
         isHovered.value = false;
         isOpenByKeyboard.value = false;
       }
     };
     const indentStyle = computed(() => {
-      if (!menuContext || menuContext.mode !== "inline" || props.level === 0) {
+      if (!menuContext || menuContext.mode.value !== "inline" || props.level === 0) {
         return {};
       }
-      return getMenuItemIndent(props.level, menuContext.inlineIndent);
+      return getMenuItemIndent(props.level, menuContext.inlineIndent.value);
     });
     const withChildLevel = (nodes) => {
       if (!nodes || nodes.length === 0) return nodes;
@@ -288,7 +247,7 @@ var SubMenu = defineComponent({
       }
       if (!effectiveCollapsed.value) {
         titleChildren.push(h("span", { class: "flex-1" }, props.title));
-        if (menuContext.mode !== "horizontal" && !isPopup.value) {
+        if (menuContext.mode.value !== "horizontal" && !isPopup.value) {
           titleChildren.push(ExpandIcon(isExpanded.value));
         }
       } else if (!props.icon) {
@@ -315,7 +274,7 @@ var SubMenu = defineComponent({
         },
         titleChildren
       );
-      const contentNode = menuContext.mode === "horizontal" || isPopup.value ? h(
+      const contentNode = menuContext.mode.value === "horizontal" || isPopup.value ? h(
         "ul",
         {
           class: contentClasses.value,
@@ -365,7 +324,7 @@ var SubMenu = defineComponent({
       return h(
         "li",
         {
-          class: menuContext.mode === "horizontal" || isPopup.value ? "relative" : "",
+          class: menuContext.mode.value === "horizontal" || isPopup.value ? "relative" : "",
           onMouseenter: handleMouseEnter,
           onMouseleave: handleMouseLeave,
           role: "none"

package/dist/{chunk-2EMI5OHM.mjs → chunk-7J44XQKW.mjs}

@@ -189,15 +189,8 @@ var Drawer = defineComponent({
     watch(
       () => props.visible,
       (nextVisible, prevVisible, onCleanup) => {
-        if (typeof prevVisible === "undefined") {
-          if (!nextVisible) return;
-          const timer2 = window.setTimeout(() => {
-            emit("after-enter");
-          }, ANIMATION_DURATION_MS);
-          onCleanup(() => window.clearTimeout(timer2));
+        if (nextVisible === prevVisible || typeof prevVisible === "undefined" && !nextVisible)
           return;
-        }
-        if (nextVisible === prevVisible) return;
         const timer = window.setTimeout(() => {
           emit(nextVisible ? "after-enter" : "after-leave");
         }, ANIMATION_DURATION_MS);
@@ -213,7 +206,7 @@ var Drawer = defineComponent({
       const ariaLabelledbyFromAttrs = typeof attrs["aria-labelledby"] === "string" ? attrs["aria-labelledby"] : void 0;
       const ariaLabelledby = ariaLabelledbyFromAttrs ?? (props.title || slots.header ? titleId.value : void 0);
       const containerClasses = classNames(
-        getDrawerContainerClasses(props.zIndex),
+        getDrawerContainerClasses(),
         !props.visible && "pointer-events-none"
       );
       const maskClasses = getDrawerMaskClasses(props.visible);

package/dist/chunk-7LUATGJU.mjs

@@ -0,0 +1,171 @@
+import { defineComponent, computed, h } from 'vue';
+import { clampPercentage, getStatusVariant, formatProgressText, getCircleSize, calculateCirclePath, classNames, progressCircleBaseClasses, coerceClassValue, progressCircleTrackStrokeClasses, getProgressVariantClasses, progressCircleTextClasses, progressTextSizeClasses, getProgressTextColorClasses, progressLineBaseClasses, progressTrackBgClasses, progressLineSizeClasses, progressLineInnerClasses, progressStripedClasses, progressStripedAnimationClasses, progressTextBaseClasses } from '@expcat/tigercat-core';
+
+// src/components/Progress.ts
+var Progress = defineComponent({
+  name: "TigerProgress",
+  inheritAttrs: false,
+  props: {
+    variant: { type: String, default: "primary" },
+    size: { type: String, default: "md" },
+    type: { type: String, default: "line" },
+    percentage: { type: Number, default: 0 },
+    status: { type: String, default: "normal" },
+    showText: { type: Boolean, default: void 0 },
+    text: { type: String, default: void 0 },
+    format: { type: Function, default: void 0 },
+    striped: { type: Boolean, default: false },
+    stripedAnimation: { type: Boolean, default: false },
+    strokeWidth: { type: Number, default: 6 },
+    width: { type: [String, Number], default: "auto" },
+    height: { type: Number, default: void 0 },
+    className: { type: String, default: void 0 },
+    style: { type: Object, default: void 0 }
+  },
+  setup(props, { attrs }) {
+    const clamped = computed(() => clampPercentage(props.percentage));
+    const effectiveVariant = computed(
+      () => getStatusVariant(props.status) || props.variant
+    );
+    const shouldShowText = computed(() => props.showText ?? props.type === "line");
+    const displayText = computed(
+      () => shouldShowText.value ? formatProgressText(clamped.value, props.text, props.format) : ""
+    );
+    const resolvedAriaLabel = computed(() => {
+      const label = attrs["aria-label"];
+      return label ?? (attrs["aria-labelledby"] != null ? void 0 : `Progress: ${clamped.value}%`);
+    });
+    const ariaProps = computed(() => ({
+      role: "progressbar",
+      "aria-label": resolvedAriaLabel.value,
+      "aria-labelledby": attrs["aria-labelledby"],
+      "aria-describedby": attrs["aria-describedby"],
+      "aria-valuenow": clamped.value,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100
+    }));
+    const renderLineProgress = () => {
+      const containerStyle = props.width !== "auto" ? { width: typeof props.width === "number" ? `${props.width}px` : props.width } : {};
+      return h(
+        "div",
+        {
+          ...attrs,
+          class: classNames(
+            "flex items-center w-full",
+            coerceClassValue(attrs.class),
+            props.className
+          ),
+          style: {
+            ...attrs.style,
+            ...props.style ?? {},
+            ...containerStyle
+          }
+        },
+        [
+          h(
+            "div",
+            {
+              class: classNames(
+                progressLineBaseClasses,
+                progressTrackBgClasses,
+                !props.height && progressLineSizeClasses[props.size]
+              ),
+              style: { flex: 1, ...props.height ? { height: `${props.height}px` } : {} }
+            },
+            [
+              h("div", {
+                class: classNames(
+                  progressLineInnerClasses,
+                  getProgressVariantClasses(effectiveVariant.value),
+                  props.striped && progressStripedClasses,
+                  props.striped && props.stripedAnimation && progressStripedAnimationClasses
+                ),
+                style: { width: `${clamped.value}%` },
+                ...ariaProps.value
+              })
+            ]
+          ),
+          shouldShowText.value ? h(
+            "span",
+            {
+              class: classNames(
+                progressTextBaseClasses,
+                progressTextSizeClasses[props.size],
+                getProgressTextColorClasses(effectiveVariant.value)
+              )
+            },
+            displayText.value
+          ) : void 0
+        ].filter(Boolean)
+      );
+    };
+    const renderCircleProgress = () => {
+      const { width, height, radius, cx, cy } = getCircleSize(props.size, props.strokeWidth);
+      const { strokeDasharray, strokeDashoffset } = calculateCirclePath(radius, clamped.value);
+      return h(
+        "div",
+        {
+          ...attrs,
+          class: classNames(
+            progressCircleBaseClasses,
+            coerceClassValue(attrs.class),
+            props.className
+          ),
+          style: {
+            ...attrs.style,
+            ...props.style ?? {},
+            width: `${width}px`,
+            height: `${height}px`
+          }
+        },
+        [
+          h("svg", { width, height, viewBox: `0 0 ${width} ${height}` }, [
+            h("circle", {
+              cx,
+              cy,
+              r: radius,
+              fill: "none",
+              stroke: "currentColor",
+              class: progressCircleTrackStrokeClasses,
+              "stroke-width": props.strokeWidth
+            }),
+            h("circle", {
+              cx,
+              cy,
+              r: radius,
+              fill: "none",
+              stroke: "currentColor",
+              class: getProgressVariantClasses(effectiveVariant.value).replace("bg-", "text-"),
+              "stroke-width": props.strokeWidth,
+              "stroke-linecap": "round",
+              "stroke-dasharray": strokeDasharray,
+              "stroke-dashoffset": strokeDashoffset,
+              style: {
+                transition: "stroke-dashoffset 0.3s ease",
+                transform: "rotate(-90deg)",
+                transformOrigin: "center"
+              },
+              ...ariaProps.value
+            })
+          ]),
+          shouldShowText.value ? h(
+            "div",
+            {
+              class: classNames(
+                progressCircleTextClasses,
+                progressTextSizeClasses[props.size],
+                "font-medium",
+                getProgressTextColorClasses(effectiveVariant.value)
+              )
+            },
+            displayText.value
+          ) : void 0
+        ].filter(Boolean)
+      );
+    };
+    return () => props.type === "circle" ? renderCircleProgress() : renderLineProgress();
+  }
+});
+var Progress_default = Progress;
+
+export { Progress, Progress_default };