@expcat/tigercat-vue 2.1.0 → 2.1.2

package/dist/{chunk-VN2TWPRC.mjs → chunk-UR5F74ZB.mjs}

@@ -31,6 +31,7 @@ import {
   getPickerOptionAria,
   getPickerTriggerKeyAction,
   getPickerNavigationIndex,
+  getPickerOptionId,
   findFirstEnabledIndex,
   coerceClassValue,
   classNames,
@@ -234,20 +235,19 @@ var TreeSelect = defineComponent({
         commitActiveIndex(-1);
         return;
       }
-      if (!props.virtual) return;
       commitActiveIndex(resolveActiveIndex());
       nextTick(() => alignVirtualScroll(activeIndex.value));
     });
     watch(activeIndex, (idx) => {
-      if (!props.virtual || !isOpen.value) return;
+      if (!isOpen.value) return;
       nextTick(() => alignVirtualScroll(idx));
     });
     watch(searchQuery, () => {
-      if (!props.virtual || !isOpen.value) return;
+      if (!isOpen.value) return;
       commitActiveIndex(resolveActiveIndex());
     });
     watch([expandedKeys, () => props.treeData], () => {
-      if (!props.virtual || !isOpen.value) return;
+      if (!isOpen.value) return;
       const remapped = getTreeSelectVisibleIndex(visibleNodes.value, lastActiveKey.value);
       if (remapped >= 0) activeIndex.value = remapped;
     });
@@ -316,7 +316,49 @@ var TreeSelect = defineComponent({
       emit("update:modelValue", val);
       emit("change", val);
     }
+    function handleOpenListKeyDown(e, fromSearchInput = false) {
+      const key = e.key;
+      if (fromSearchInput && key === " ") return false;
+      if (key === "ArrowDown" || key === "ArrowUp" || key === "Home" || key === "End") {
+        e.preventDefault();
+        e.stopPropagation();
+        commitActiveIndex(
+          getPickerNavigationIndex(visibleNodes.value, activeIndex.value, key, isNodeDisabled)
+        );
+        return true;
+      }
+      if (key === "Enter" || key === " ") {
+        e.preventDefault();
+        e.stopPropagation();
+        const item = visibleNodes.value[activeIndex.value];
+        if (item && !item.node.disabled) {
+          handleNodeSelect(item.node);
+        }
+        return true;
+      }
+      if (key === "ArrowRight") {
+        e.preventDefault();
+        e.stopPropagation();
+        const item = visibleNodes.value[activeIndex.value];
+        if (item?.hasChildren && !item.isExpanded) {
+          toggleExpand(item.node.key);
+        }
+        return true;
+      }
+      if (key === "ArrowLeft") {
+        e.preventDefault();
+        e.stopPropagation();
+        const item = visibleNodes.value[activeIndex.value];
+        if (item?.hasChildren && item.isExpanded) {
+          toggleExpand(item.node.key);
+        }
+        return true;
+      }
+      return false;
+    }
     function handleKeyDown(e) {
+      if (props.disabled) return;
+      if (isOpen.value && handleOpenListKeyDown(e)) return;
       const action = getPickerTriggerKeyAction(e.key, isOpen.value);
       if (action === "none") return;
       e.preventDefault();
@@ -329,16 +371,47 @@ var TreeSelect = defineComponent({
         closeDropdown();
       }
     }
-    function renderFlatNode(flatNode) {
+    function handleDropdownKeyDown(e) {
+      if (e.target instanceof HTMLInputElement) return;
+      if (!isOpen.value) return;
+      handleOpenListKeyDown(e);
+    }
+    function handleSearchKeyDown(e) {
+      switch (e.key) {
+        case " ":
+          e.stopPropagation();
+          return;
+        case "ArrowDown":
+        case "ArrowUp":
+        case "Enter":
+          handleOpenListKeyDown(e, true);
+          return;
+        case "Escape":
+          e.preventDefault();
+          e.stopPropagation();
+          closeDropdown();
+          nextTick(() => {
+            ;
+            triggerRef.value?.focus();
+          });
+          return;
+        default:
+          return;
+      }
+    }
+    function renderFlatNode(flatNode, index) {
       const { node, level, hasChildren, isExpanded } = flatNode;
       const selected = isSelected(node.key);
+      const isActive = index === activeIndex.value;
       const indent = level * 20;
       return h(
         "div",
         {
           key: node.key,
+          id: getPickerOptionId(listboxId, index),
+          "data-active": isActive || void 0,
           ...getPickerOptionAria({ selected, disabled: !!node.disabled }),
-          class: getTreeSelectNodeClasses(selected, !!node.disabled, props.size),
+          class: getTreeSelectNodeClasses(selected || isActive, !!node.disabled, props.size),
           style: { paddingLeft: `${indent + 8}px`, height: props.virtual ? "100%" : void 0 },
           onClick: (e) => {
             e.stopPropagation();
@@ -389,8 +462,15 @@ var TreeSelect = defineComponent({
           {
             ref: triggerRef,
             type: "button",
-            class: getTreeSelectTriggerClasses(props.size, props.disabled, isOpen.value),
-            ...getPickerComboboxAria({ expanded: isOpen.value, listboxId }),
+            class: classNames(
+              getTreeSelectTriggerClasses(props.size, props.disabled, isOpen.value),
+              showClearButton.value ? "pr-14" : void 0
+            ),
+            ...getPickerComboboxAria({
+              expanded: isOpen.value,
+              listboxId,
+              activeIndex: isOpen.value ? activeIndex.value : -1
+            }),
             disabled: props.disabled,
             onClick: toggleDropdown,
             onKeydown: handleKeyDown
@@ -405,12 +485,19 @@ var TreeSelect = defineComponent({
                 )
               },
               displayLabel.value || props.placeholder
-            ),
-            // Clear or chevron
+            )
+          ]
+        ),
+        h(
+          "span",
+          { class: "pointer-events-none absolute inset-y-0 right-3 flex items-center gap-1" },
+          [
             showClearButton.value ? h(
-              "span",
+              "button",
               {
-                class: "absolute right-2 top-1/2 -translate-y-1/2 text-[var(--tiger-treeselect-clear,var(--tiger-text-muted,#9ca3af))] hover:text-[var(--tiger-treeselect-clear-hover,var(--tiger-text,#111827))]",
+                type: "button",
+                class: "pointer-events-auto inline-flex rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--tiger-treeselect-ring,var(--tiger-primary,#2563eb))] text-[var(--tiger-treeselect-clear,var(--tiger-text-muted,#9ca3af))] hover:text-[var(--tiger-treeselect-clear-hover,var(--tiger-text,#111827))]",
+                "data-tiger-treeselect-clear": "",
                 "aria-label": resolveLocaleText(
                   "Clear selection",
                   mergedLocale.value?.common?.clearText
@@ -418,10 +505,15 @@ var TreeSelect = defineComponent({
                 onClick: handleClear
               },
               [ClearIcon]
-            ) : h(
+            ) : null,
+            h(
               "span",
               {
-                class: "absolute right-2 top-1/2 -translate-y-1/2 text-[var(--tiger-text-muted,#9ca3af)] pointer-events-none"
+                class: classNames(
+                  "inline-flex text-[var(--tiger-text-muted,#9ca3af)]",
+                  isOpen.value && "rotate-180"
+                ),
+                "aria-hidden": "true"
               },
               [ChevronDownIcon]
             )
@@ -439,7 +531,8 @@ var TreeSelect = defineComponent({
                 overlay.floatingClasses.value
               ),
               style: overlay.floatingStyles.value,
-              "data-positioned": overlay.positioned.value
+              "data-positioned": overlay.positioned.value,
+              onKeydown: handleDropdownKeyDown
             },
             [
               // Search
@@ -455,7 +548,8 @@ var TreeSelect = defineComponent({
                   "Search tree",
                   mergedLocale.value?.common?.searchPlaceholder
                 ),
-                onInput: (e) => updateSearchValue(e.target.value)
+                onInput: (e) => updateSearchValue(e.target.value),
+                onKeydown: handleSearchKeyDown
               }) : null,
               // Tree nodes
               visibleNodes.value.length > 0 ? props.virtual ? h(
@@ -477,12 +571,12 @@ var TreeSelect = defineComponent({
                     {
                       default: ({ index }) => {
                         const item = visibleNodes.value[index];
-                        return item ? renderFlatNode(item) : null;
+                        return item ? renderFlatNode(item, index) : null;
                       }
                     }
                   )
                 ]
-              ) : visibleNodes.value.map((flatNode) => renderFlatNode(flatNode)) : h(
+              ) : visibleNodes.value.map((flatNode, index) => renderFlatNode(flatNode, index)) : h(
                 "div",
                 { class: treeSelectEmptyClasses },
                 resolveLocaleText(

package/dist/{chunk-VCCK4CDT.mjs → chunk-URPXBKK4.mjs}

@@ -21,6 +21,12 @@ var Slider = defineComponent({
     value: {
       type: [Number, Array]
     },
+    /**
+     * Slider value (for default v-model) - controlled mode
+     */
+    modelValue: {
+      type: [Number, Array]
+    },
     /**
      * Default slider value - uncontrolled mode
      */
@@ -111,14 +117,24 @@ var Slider = defineComponent({
      * Emitted when value changes (for v-model:value)
      */
     "update:value": (value) => typeof value === "number" || Array.isArray(value),
+    /**
+     * Emitted when value changes (for default v-model)
+     */
+    "update:modelValue": (value) => typeof value === "number" || Array.isArray(value),
     /**
      * Emitted when value changes
      */
     change: (value) => typeof value === "number" || Array.isArray(value)
   },
   setup(props, { emit, attrs }) {
-    const getInitialValue = () => {
+    const resolveBoundValue = () => {
       if (props.value !== void 0) return props.value;
+      if (props.modelValue !== void 0) return props.modelValue;
+      return void 0;
+    };
+    const getInitialValue = () => {
+      const bound = resolveBoundValue();
+      if (bound !== void 0) return bound;
       if (props.defaultValue !== void 0) return props.defaultValue;
       return props.range ? [props.min, props.max] : props.min;
     };
@@ -128,10 +144,11 @@ var Slider = defineComponent({
     const showTooltip = ref(false);
     const trackElement = ref(null);
     watch(
-      () => props.value,
-      (newValue) => {
-        if (newValue !== void 0) {
-          internalValue.value = newValue;
+      () => [props.value, props.modelValue],
+      () => {
+        const bound = resolveBoundValue();
+        if (bound !== void 0) {
+          internalValue.value = bound;
         }
       }
     );
@@ -149,6 +166,7 @@ var Slider = defineComponent({
     const updateValue = (newValue) => {
       internalValue.value = newValue;
       emit("update:value", newValue);
+      emit("update:modelValue", newValue);
       emit("change", newValue);
     };
     const handleMove = (event, el) => {

package/dist/{chunk-7KCOF5US.mjs → chunk-VY6FVIOZ.mjs}

@@ -17,6 +17,7 @@ import {
   getAutoCompleteInputClasses,
   getAutoCompleteOptionClasses,
   filterAutoCompleteOptions,
+  resolveAutoCompleteDisplayValue,
   getInitialPickerActiveIndex,
   getPickerComboboxAria,
   getPickerListboxAria,
@@ -109,7 +110,7 @@ var AutoComplete = defineComponent({
     const listboxId = `tiger-autocomplete-listbox-${instanceId}`;
     const isOpen = ref(false);
     const uncontrolledSearchValue = ref(
-      String(props.searchValue ?? props.modelValue ?? props.defaultSearchValue ?? "")
+      props.searchValue ?? resolveAutoCompleteDisplayValue(props.modelValue, props.options, props.defaultSearchValue)
     );
     const inputValue = computed(() => props.searchValue ?? uncontrolledSearchValue.value);
     const activeIndex = ref(-1);
@@ -135,14 +136,15 @@ var AutoComplete = defineComponent({
     const showClearButton = computed(
       () => props.clearable && !props.disabled && inputValue.value !== ""
     );
-    watch(
-      () => props.modelValue,
-      (val) => {
-        if (props.searchValue === void 0) {
-          uncontrolledSearchValue.value = String(val ?? props.defaultSearchValue ?? "");
-        }
+    watch([() => props.modelValue, () => props.options], () => {
+      if (props.searchValue === void 0) {
+        uncontrolledSearchValue.value = resolveAutoCompleteDisplayValue(
+          props.modelValue,
+          props.options,
+          props.defaultSearchValue
+        );
       }
-    );
+    });
     function openDropdown() {
       if (props.disabled) return;
       isOpen.value = true;

package/dist/{chunk-KICZSLOX.mjs → chunk-W2ICYZVU.mjs}

@@ -1,6 +1,6 @@
 import {
   useFloatingPopup
-} from "./chunk-26OI3TEA.mjs";
+} from "./chunk-PMQSXEMT.mjs";
 import {
   renderVueOverlayTeleport
 } from "./chunk-Q7Y22OFX.mjs";

package/dist/{chunk-FIVVKBBF.mjs → chunk-W3QOMJKQ.mjs}

@@ -1,12 +1,12 @@
 import {
   useChartInteraction
-} from "./chunk-PE5OA4YG.mjs";
+} from "./chunk-FHUGOSEY.mjs";
 import {
   ChartTooltip
 } from "./chunk-SPFL55TF.mjs";
 import {
   ChartCanvas
-} from "./chunk-W5RZPTFD.mjs";
+} from "./chunk-SNNT64HK.mjs";
 
 // src/components/HeatmapChart.ts
 import { defineComponent, computed, h, nextTick, ref, watchEffect } from "vue";
@@ -69,6 +69,7 @@ var HeatmapChart = defineComponent({
       wrapperClasses: _wrapperClasses
     } = useChartInteraction({
       hoverable: computed(() => props.hoverable),
+      showTooltip: computed(() => props.showTooltip),
       hoveredIndexProp: () => props.hoveredIndex,
       selectable: computed(() => props.selectable),
       selectedIndexProp: () => props.selectedIndex,
@@ -192,6 +193,7 @@ var HeatmapChart = defineComponent({
     };
     return () => {
       const interactive = props.hoverable || props.selectable;
+      const pointerInteractive = interactive || props.showTooltip;
       const rect = innerRect.value;
       const chart = h(
         ChartCanvas,
@@ -283,7 +285,7 @@ var HeatmapChart = defineComponent({
           }
         }
       );
-      const tooltip = props.showTooltip && props.hoverable ? h(ChartTooltip, {
+      const tooltip = props.showTooltip ? h(ChartTooltip, {
         content: tooltipContent.value,
         open: resolvedHoveredIndex.value !== null && tooltipContent.value !== "",
         x: tooltipPosition.value.x,
@@ -300,12 +302,12 @@ var HeatmapChart = defineComponent({
           top: `${rect.y}px`,
           width: `${rect.width}px`,
           height: `${rect.height}px`,
-          pointerEvents: interactive ? "auto" : "none"
+          pointerEvents: pointerInteractive ? "auto" : "none"
         },
         "data-heatmap-canvas": "true",
         "data-heatmap-render-mode": resolvedRenderMode.value,
-        onMousemove: interactive ? handleCanvasMouseMove : void 0,
-        onMouseleave: interactive ? handleMouseLeave : void 0,
+        onMousemove: pointerInteractive ? handleCanvasMouseMove : void 0,
+        onMouseleave: pointerInteractive ? handleMouseLeave : void 0,
         onClick: interactive ? handleCanvasClick : void 0
       }) : null;
       return h("div", { class: "inline-block relative" }, [chart, canvas, tooltip]);

package/dist/{chunk-DCMRB3HR.mjs → chunk-WV25G4M3.mjs}

@@ -7,6 +7,7 @@ import { defineComponent, h, ref, computed } from "vue";
 import {
   rateBaseClasses,
   getRateStarClasses,
+  rateHalfStarInnerClasses,
   rateActiveColor,
   rateInactiveColor,
   rateHoverColor,
@@ -126,7 +127,7 @@ var Rate = defineComponent({
               [h("path", { d: starPathD })]
             )
           ]),
-          // Active half (clipped left 50%)
+          // Active half (clipped left 50%; inner glyph keeps full-star width)
           h(
             "span",
             {
@@ -137,12 +138,12 @@ var Rate = defineComponent({
               style: { width: "50%" }
             },
             [
-              isChar ? h("span", null, props.character) : h(
+              isChar ? h("span", { class: rateHalfStarInnerClasses }, props.character) : h(
                 "svg",
                 {
                   viewBox: starViewBox,
                   fill: "currentColor",
-                  class: "w-full h-full"
+                  class: rateHalfStarInnerClasses
                 },
                 [h("path", { d: starPathD })]
               )

package/dist/{chunk-ZOYHZF4N.mjs → chunk-X5LJT76O.mjs}

@@ -1,6 +1,6 @@
 import {
   useChartInteraction
-} from "./chunk-PE5OA4YG.mjs";
+} from "./chunk-FHUGOSEY.mjs";
 import {
   ChartSeries
 } from "./chunk-2ZUEXCVJ.mjs";
@@ -9,7 +9,7 @@ import {
 } from "./chunk-SPFL55TF.mjs";
 import {
   ChartCanvas
-} from "./chunk-W5RZPTFD.mjs";
+} from "./chunk-SNNT64HK.mjs";
 import {
   ChartLegend
 } from "./chunk-V443QIJM.mjs";
@@ -19,6 +19,7 @@ import { defineComponent, computed, h, useId } from "vue";
 import {
   classNames,
   computeSunburstArcs,
+  getSunburstLabelPoint,
   getChartElementOpacity,
   getChartInnerRect,
   getStableChartGradientPrefix,
@@ -75,6 +76,7 @@ var SunburstChart = defineComponent({
       wrapperClasses
     } = useChartInteraction({
       hoverable: computed(() => props.hoverable),
+      showTooltip: computed(() => props.showTooltip),
       hoveredIndexProp: () => props.hoveredIndex,
       selectable: computed(() => props.selectable),
       selectedIndexProp: () => props.selectedIndex,
@@ -166,45 +168,60 @@ var SunburstChart = defineComponent({
                 )
               )
             ) : null;
+            const paths = arcs.value.map((arc) => {
+              const opacity = getChartElementOpacity(arc.index, activeIndex.value, {
+                activeOpacity: props.activeOpacity,
+                inactiveOpacity: props.inactiveOpacity
+              });
+              return h("path", {
+                key: `arc-${arc.index}`,
+                d: arc.path,
+                fill: props.gradient ? `url(#${gradientPrefix}-${arc.index})` : arc.color,
+                opacity,
+                stroke: "var(--tiger-surface,#ffffff)",
+                "stroke-width": 1,
+                class: classNames(interactive && "cursor-pointer"),
+                style: {
+                  transition: "opacity var(--tiger-motion-duration-base,0.2s) var(--tiger-motion-ease-decelerate,ease-out), filter var(--tiger-motion-duration-base,0.2s) var(--tiger-motion-ease-decelerate,ease-out)",
+                  filter: activeIndex.value === arc.index ? "var(--tiger-chart-block-active-filter, none)" : "none"
+                },
+                tabindex: props.selectable ? 0 : void 0,
+                role: props.selectable ? "button" : "img",
+                "aria-label": arc.label,
+                onMouseenter: (e) => handleMouseEnter(arc.index, e),
+                onMousemove: handleMouseMove,
+                onMouseleave: handleMouseLeave,
+                onClick: () => handleClick(arc.index)
+              });
+            });
+            const labels = props.showLabels ? arcs.value.map((arc) => {
+              const { x, y } = getSunburstLabelPoint(arc, cx.value, cy.value);
+              return h(
+                "text",
+                {
+                  key: `label-${arc.index}`,
+                  x,
+                  y,
+                  "text-anchor": "middle",
+                  "dominant-baseline": "middle",
+                  class: "fill-white text-xs",
+                  style: { pointerEvents: "none" },
+                  "aria-hidden": "true"
+                },
+                arc.label
+              );
+            }) : [];
             return h(
               ChartSeries,
               { data: arcs.value, type: "sunburst" },
               {
-                default: () => [
-                  gradientDefs,
-                  ...arcs.value.map((arc) => {
-                    const opacity = getChartElementOpacity(arc.index, activeIndex.value, {
-                      activeOpacity: props.activeOpacity,
-                      inactiveOpacity: props.inactiveOpacity
-                    });
-                    return h("path", {
-                      key: `arc-${arc.index}`,
-                      d: arc.path,
-                      fill: props.gradient ? `url(#${gradientPrefix}-${arc.index})` : arc.color,
-                      opacity,
-                      stroke: "var(--tiger-surface,#ffffff)",
-                      "stroke-width": 1,
-                      class: classNames(interactive && "cursor-pointer"),
-                      style: {
-                        transition: "opacity var(--tiger-motion-duration-base,0.2s) var(--tiger-motion-ease-decelerate,ease-out), filter var(--tiger-motion-duration-base,0.2s) var(--tiger-motion-ease-decelerate,ease-out)",
-                        filter: activeIndex.value === arc.index ? "var(--tiger-chart-block-active-filter, none)" : "none"
-                      },
-                      tabindex: props.selectable ? 0 : void 0,
-                      role: props.selectable ? "button" : "img",
-                      "aria-label": arc.label,
-                      onMouseenter: (e) => handleMouseEnter(arc.index, e),
-                      onMousemove: handleMouseMove,
-                      onMouseleave: handleMouseLeave,
-                      onClick: () => handleClick(arc.index)
-                    });
-                  })
-                ]
+                default: () => [gradientDefs, ...paths, ...labels]
               }
             );
           }
         }
       );
-      const tooltip = props.showTooltip && props.hoverable ? h(ChartTooltip, {
+      const tooltip = props.showTooltip ? h(ChartTooltip, {
         content: tooltipContent.value,
         open: resolvedHoveredIndex.value !== null && tooltipContent.value !== "",
         x: tooltipPosition.value.x,

package/dist/{chunk-FSJRNEZK.mjs → chunk-YLO73TDM.mjs}

@@ -8,7 +8,7 @@ import {
   applyMarkdownToolbarAction,
   classNames,
   coerceClassValue,
-  defaultMarkdownToolbar,
+  createDefaultMarkdownToolbar,
   findMarkdownHotkeyMatch,
   getMarkdownBodyClasses,
   getMarkdownContainerClasses,
@@ -74,9 +74,6 @@ var MarkdownEditor = defineComponent({
       () => props.value !== void 0 ? props.value : internalValue.value
     );
     const currentMode = computed(() => props.mode ?? internalMode.value);
-    const toolbarItems = computed(
-      () => props.toolbar === false ? [] : props.toolbar ?? defaultMarkdownToolbar
-    );
     const previewHtml = computed(() => renderMarkdownToHtml(currentValue.value, props.renderer));
     const showFormattingToolbar = computed(() => props.toolbar !== false);
     const showTopbar = computed(() => showFormattingToolbar.value || props.showModeSwitch);
@@ -86,6 +83,9 @@ var MarkdownEditor = defineComponent({
     );
     const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
     const labels = computed(() => getMarkdownEditorLabels(mergedLocale.value, props.labels));
+    const toolbarItems = computed(
+      () => props.toolbar === false ? [] : props.toolbar ?? createDefaultMarkdownToolbar(labels.value)
+    );
     const modeLabels = computed(() => ({
       edit: labels.value.editModeLabel,
       split: labels.value.splitModeLabel,

package/dist/{chunk-BNYA5IUB.mjs → chunk-YNXP34KO.mjs}

@@ -411,6 +411,44 @@ var Upload = defineComponent({
     };
     const renderUploadButton = () => {
       if (props.drag) {
+        const dragInner = slots.default ? slots.default() : [
+          h(
+            "svg",
+            {
+              class: "w-12 h-12 mb-3 text-gray-400",
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              "aria-hidden": "true"
+            },
+            [
+              h("path", {
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                "stroke-width": "2",
+                d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+              })
+            ]
+          ),
+          h("p", { class: "mb-2 text-sm" }, [
+            h("span", { class: "font-semibold" }, labels.value.clickToUploadText),
+            ` ${labels.value.dragAndDropText}`
+          ]),
+          props.accept && h(
+            "p",
+            { class: "text-xs text-gray-500" },
+            interpolateUploadLabel(labels.value.acceptInfoText, {
+              accept: props.accept
+            })
+          ),
+          props.maxSize && h(
+            "p",
+            { class: "text-xs text-gray-500" },
+            interpolateUploadLabel(labels.value.maxSizeInfoText, {
+              maxSize: formatFileSize(props.maxSize)
+            })
+          )
+        ];
         return h(
           "div",
           {
@@ -425,44 +463,7 @@ var Upload = defineComponent({
             "aria-disabled": props.disabled,
             "aria-label": labels.value.dragAreaAriaLabel
           },
-          [
-            h(
-              "svg",
-              {
-                class: "w-12 h-12 mb-3 text-gray-400",
-                fill: "none",
-                stroke: "currentColor",
-                viewBox: "0 0 24 24",
-                "aria-hidden": "true"
-              },
-              [
-                h("path", {
-                  "stroke-linecap": "round",
-                  "stroke-linejoin": "round",
-                  "stroke-width": "2",
-                  d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
-                })
-              ]
-            ),
-            h("p", { class: "mb-2 text-sm" }, [
-              h("span", { class: "font-semibold" }, labels.value.clickToUploadText),
-              ` ${labels.value.dragAndDropText}`
-            ]),
-            props.accept && h(
-              "p",
-              { class: "text-xs text-gray-500" },
-              interpolateUploadLabel(labels.value.acceptInfoText, {
-                accept: props.accept
-              })
-            ),
-            props.maxSize && h(
-              "p",
-              { class: "text-xs text-gray-500" },
-              interpolateUploadLabel(labels.value.maxSizeInfoText, {
-                maxSize: formatFileSize(props.maxSize)
-              })
-            )
-          ]
+          dragInner
         );
       }
       return h(

package/dist/{chunk-2T2NEZRZ.mjs → chunk-YVDTXHQ6.mjs}

@@ -2,7 +2,7 @@ import {
   Dropdown,
   DropdownItem,
   DropdownMenu
-} from "./chunk-KROVW4AW.mjs";
+} from "./chunk-PJQTRDIG.mjs";
 import {
   useTigerConfig
 } from "./chunk-UOJOJBEU.mjs";