@expcat/tigercat-vue 0.3.0 → 0.3.70

package/dist/{chunk-7WLOYIVN.mjs → chunk-GALASVSG.mjs}

@@ -1,5 +1,5 @@
 import { h, defineComponent, ref, computed, watch, onBeforeUnmount, nextTick } from 'vue';
-import { icon20ViewBox, chevronDownSolidIcon20PathD, closeSolidIcon20PathD, checkSolidIcon20PathD, filterOptions, getSelectTriggerClasses, selectBaseClasses, classNames, selectDropdownBaseClasses, selectSearchInputClasses, isOptionGroup, selectGroupLabelClasses, getSelectOptionClasses, selectEmptyStateClasses } from '@expcat/tigercat-core';
+import { icon20ViewBox, chevronDownSolidIcon20PathD, closeSolidIcon20PathD, checkSolidIcon20PathD, filterOptions, flattenSelectOptions, getSelectTriggerClasses, selectBaseClasses, classNames, selectDropdownBaseClasses, selectSearchInputClasses, isOptionGroup, selectGroupLabelClasses, selectEmptyStateClasses, getSelectOptionClasses } from '@expcat/tigercat-core';
 
 // src/components/Select.ts
 var selectInstanceId = 0;
@@ -138,19 +138,8 @@ var Select = defineComponent({
       }
       return filterOptions(props.options, searchQuery.value);
     });
-    function flattenOptions(options) {
-      const allOptions2 = [];
-      options.forEach((item) => {
-        if (isOptionGroup(item)) {
-          allOptions2.push(...item.options);
-        } else {
-          allOptions2.push(item);
-        }
-      });
-      return allOptions2;
-    }
-    const allOptions = computed(() => flattenOptions(props.options));
-    const flatFilteredOptions = computed(() => flattenOptions(filteredOptions.value));
+    const allOptions = computed(() => flattenSelectOptions(props.options));
+    const flatFilteredOptions = computed(() => flattenSelectOptions(filteredOptions.value));
     const displayText = computed(() => {
       if (props.multiple && Array.isArray(props.modelValue)) {
         if (props.modelValue.length === 0) {
@@ -523,80 +512,47 @@ var Select = defineComponent({
             // Options list
             filteredOptions.value.length > 0 ? (() => {
               let optionIndex = -1;
-              return filteredOptions.value.map((item) => {
-                if (isOptionGroup(item)) {
-                  return h("div", { key: item.label }, [
-                    h("div", { class: selectGroupLabelClasses }, item.label),
-                    item.options.map((option) => {
-                      optionIndex += 1;
-                      const selected2 = isSelected(option);
-                      const active2 = optionIndex === activeIndex.value;
-                      return h(
-                        "div",
-                        {
-                          key: option.value,
-                          id: getOptionId(optionIndex),
-                          "data-option-index": optionIndex,
-                          role: "option",
-                          "aria-selected": selected2,
-                          "aria-disabled": option.disabled ? true : void 0,
-                          tabindex: active2 ? 0 : -1,
-                          class: getSelectOptionClasses(
-                            selected2,
-                            !!option.disabled,
-                            props.size
-                          ),
-                          onMouseenter: () => {
-                            if (!option.disabled) {
-                              activeIndex.value = optionIndex;
-                            }
-                          },
-                          onClick: () => selectOption(option)
-                        },
-                        [
-                          h(
-                            "span",
-                            {
-                              class: "flex items-center justify-between w-full"
-                            },
-                            [h("span", option.label), selected2 && h("span", CheckIcon)]
-                          )
-                        ]
-                      );
-                    })
-                  ]);
-                }
-                optionIndex += 1;
-                const selected = isSelected(item);
-                const active = optionIndex === activeIndex.value;
+              const renderOptionItem = (option, idx) => {
+                const selected = isSelected(option);
+                const active = idx === activeIndex.value;
                 return h(
                   "div",
                   {
-                    key: item.value,
-                    id: getOptionId(optionIndex),
-                    "data-option-index": optionIndex,
+                    key: option.value,
+                    id: getOptionId(idx),
+                    "data-option-index": idx,
                     role: "option",
                     "aria-selected": selected,
-                    "aria-disabled": item.disabled ? true : void 0,
+                    "aria-disabled": option.disabled ? true : void 0,
                     tabindex: active ? 0 : -1,
-                    class: getSelectOptionClasses(selected, !!item.disabled, props.size),
+                    class: getSelectOptionClasses(selected, !!option.disabled, props.size),
                     onMouseenter: () => {
-                      if (!item.disabled) {
-                        activeIndex.value = optionIndex;
+                      if (!option.disabled) {
+                        activeIndex.value = idx;
                       }
                     },
-                    onClick: () => selectOption(item)
+                    onClick: () => selectOption(option)
                   },
                   [
-                    h(
-                      "span",
-                      {
-                        class: "flex items-center justify-between w-full"
-                      },
-                      [h("span", item.label), selected && h("span", CheckIcon)]
-                    )
+                    h("span", { class: "flex items-center justify-between w-full" }, [
+                      h("span", option.label),
+                      selected && h("span", CheckIcon)
+                    ])
                   ]
                 );
+              };
+              return filteredOptions.value.map((item) => {
+                if (isOptionGroup(item)) {
+                  return h("div", { key: item.label }, [
+                    h("div", { class: selectGroupLabelClasses }, item.label),
+                    item.options.map((option) => {
+                      optionIndex += 1;
+                      return renderOptionItem(option, optionIndex);
+                    })
+                  ]);
+                }
+                optionIndex += 1;
+                return renderOptionItem(item, optionIndex);
               });
             })() : h(
               "div",

package/dist/{chunk-LFJQD3ZJ.js → chunk-GCKACSWD.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkJFZDIY7D_js = require('./chunk-JFZDIY7D.js');
+var chunkFLAJKB2O_js = require('./chunk-FLAJKB2O.js');
 var chunkFCV4ML6I_js = require('./chunk-FCV4ML6I.js');
 var chunk57MJTNDL_js = require('./chunk-57MJTNDL.js');
 var chunkBKTQ6RWR_js = require('./chunk-BKTQ6RWR.js');
@@ -159,6 +159,25 @@ var LineChart = vue.defineComponent({
       type: Number,
       default: 8
     },
+    // Area fill props
+    showArea: {
+      type: Boolean,
+      default: false
+    },
+    areaOpacity: {
+      type: Number,
+      default: 0.15
+    },
+    // Point styling
+    pointHollow: {
+      type: Boolean,
+      default: false
+    },
+    // Animation
+    animated: {
+      type: Boolean,
+      default: false
+    },
     // Tooltip props
     showTooltip: {
       type: Boolean,
@@ -192,12 +211,11 @@ var LineChart = vue.defineComponent({
   setup(props, { emit }) {
     const hoveredPointInfo = vue.ref(null);
     const tooltipPosition = vue.ref({ x: 0, y: 0 });
+    const gradientPrefix = tigercatCore.getLineGradientPrefix();
     const innerRect = vue.computed(() => tigercatCore.getChartInnerRect(props.width, props.height, props.padding));
-    const resolvedSeries = vue.computed(() => {
-      if (props.series && props.series.length > 0) return props.series;
-      if (props.data && props.data.length > 0) return [{ data: props.data }];
-      return [];
-    });
+    const resolvedSeries = vue.computed(
+      () => tigercatCore.resolveSeriesData(props.series, props.data)
+    );
     const {
       activeIndex,
       handleMouseEnter: handleSeriesHoverEnter,
@@ -207,11 +225,11 @@ var LineChart = vue.defineComponent({
       handleLegendHover,
       handleLegendLeave,
       wrapperClasses
-    } = chunkJFZDIY7D_js.useChartInteraction({
+    } = chunkFLAJKB2O_js.useChartInteraction({
       hoverable: vue.computed(() => props.hoverable),
-      hoveredIndexProp: props.hoveredIndex,
+      hoveredIndexProp: () => props.hoveredIndex,
       selectable: vue.computed(() => props.selectable),
-      selectedIndexProp: props.selectedIndex,
+      selectedIndexProp: () => props.selectedIndex,
       activeOpacity: vue.computed(() => props.activeOpacity),
       inactiveOpacity: vue.computed(() => props.inactiveOpacity),
       legendPosition: vue.computed(() => props.legendPosition),
@@ -233,7 +251,7 @@ var LineChart = vue.defineComponent({
         return tigercatCore.createLinearScale(extent, [0, innerRect.value.width]);
       } else {
         const categories = [...new Set(xValues.value.map(String))];
-        return tigercatCore.createPointScale(categories, [0, innerRect.value.width], { padding: 0.1 });
+        return tigercatCore.createPointScale(categories, [0, innerRect.value.width], { padding: 0 });
       }
     });
     const resolvedYScale = vue.computed(() => {
@@ -241,11 +259,9 @@ var LineChart = vue.defineComponent({
       const extent = tigercatCore.getNumberExtent(yValues.value, { includeZero: props.includeZero });
       return tigercatCore.createLinearScale(extent, [innerRect.value.height, 0]);
     });
-    const showXAxis = vue.computed(() => props.showAxis && props.showXAxis);
-    const showYAxis = vue.computed(() => props.showAxis && props.showYAxis);
-    const palette = vue.computed(
-      () => props.colors && props.colors.length > 0 ? props.colors : [...tigercatCore.DEFAULT_CHART_COLORS]
-    );
+    const shouldShowXAxis = vue.computed(() => props.showAxis && props.showXAxis);
+    const shouldShowYAxis = vue.computed(() => props.showAxis && props.showYAxis);
+    const palette = vue.computed(() => tigercatCore.resolveChartPalette(props.colors));
     const seriesData = vue.computed(
       () => resolvedSeries.value.map((series, seriesIndex) => {
         const color = series.color ?? palette.value[seriesIndex % palette.value.length];
@@ -256,6 +272,8 @@ var LineChart = vue.defineComponent({
           pointIndex
         }));
         const linePath = tigercatCore.createLinePath(points, props.curve);
+        const seriesShowArea = series.showArea ?? props.showArea;
+        const areaPath = seriesShowArea ? tigercatCore.createAreaPath(points, innerRect.value.height, props.curve) : "";
         const opacity = tigercatCore.getChartElementOpacity(seriesIndex, activeIndex.value, {
           activeOpacity: props.activeOpacity,
           inactiveOpacity: props.inactiveOpacity
@@ -265,38 +283,37 @@ var LineChart = vue.defineComponent({
           seriesIndex,
           color,
           linePath,
+          areaPath,
+          showArea: seriesShowArea,
+          areaOpacity: series.areaOpacity ?? props.areaOpacity,
           points,
           opacity,
           strokeWidth: series.strokeWidth ?? props.strokeWidth,
           strokeDasharray: series.strokeDasharray,
           showPoints: series.showPoints ?? props.showPoints,
           pointSize: series.pointSize ?? props.pointSize,
-          pointColor: series.pointColor ?? color
+          pointColor: series.pointColor ?? color,
+          pointHollow: series.pointHollow ?? props.pointHollow
         };
       })
     );
     const legendItems = vue.computed(
-      () => resolvedSeries.value.map((series, index) => ({
-        index,
-        label: props.legendFormatter ? props.legendFormatter(series, index) : series.name ?? `Series ${index + 1}`,
-        color: series.color ?? palette.value[index % palette.value.length],
-        active: activeIndex.value === null || activeIndex.value === index
-      }))
-    );
-    const formatTooltip = vue.computed(
-      () => props.tooltipFormatter ?? ((datum, seriesIndex, _pointIndex, series) => {
-        const seriesName = series?.name ?? `Series ${seriesIndex + 1}`;
-        const label = datum.label ?? String(datum.x);
-        return `${seriesName} \xB7 ${label}: ${datum.y}`;
+      () => tigercatCore.buildChartLegendItems({
+        data: resolvedSeries.value,
+        palette: palette.value,
+        activeIndex: activeIndex.value,
+        getLabel: (s, i) => props.legendFormatter ? props.legendFormatter(s, i) : s.name ?? `Series ${i + 1}`,
+        getColor: (s, i) => s.color ?? palette.value[i % palette.value.length]
       })
     );
-    const tooltipContent = vue.computed(() => {
-      if (!hoveredPointInfo.value) return "";
-      const { seriesIndex, pointIndex } = hoveredPointInfo.value;
-      const series = resolvedSeries.value[seriesIndex];
-      const datum = series?.data[pointIndex];
-      return datum ? formatTooltip.value(datum, seriesIndex, pointIndex, series) : "";
-    });
+    const tooltipContent = vue.computed(
+      () => tigercatCore.resolveMultiSeriesTooltipContent(
+        hoveredPointInfo.value,
+        resolvedSeries.value,
+        props.tooltipFormatter,
+        tigercatCore.defaultSeriesXYTooltipFormatter
+      )
+    );
     const handlePointMouseEnter = (seriesIndex, pointIndex, event) => {
       hoveredPointInfo.value = { seriesIndex, pointIndex };
       tooltipPosition.value = { x: event.clientX, y: event.clientY };
@@ -353,7 +370,7 @@ var LineChart = vue.defineComponent({
               lineStyle: props.gridLineStyle,
               strokeWidth: props.gridStrokeWidth
             }) : null,
-            showXAxis.value ? vue.h(chunk5PXTMXXS_js.ChartAxis, {
+            shouldShowXAxis.value ? vue.h(chunk5PXTMXXS_js.ChartAxis, {
               scale: resolvedXScale.value,
               orientation: "bottom",
               y: innerRect.value.height,
@@ -362,7 +379,7 @@ var LineChart = vue.defineComponent({
               tickFormat: props.xTickFormat,
               label: props.xAxisLabel
             }) : null,
-            showYAxis.value ? vue.h(chunk5PXTMXXS_js.ChartAxis, {
+            shouldShowYAxis.value ? vue.h(chunk5PXTMXXS_js.ChartAxis, {
               scale: resolvedYScale.value,
               orientation: "left",
               ticks: props.yTicks,
@@ -370,6 +387,49 @@ var LineChart = vue.defineComponent({
               tickFormat: props.yTickFormat,
               label: props.yAxisLabel
             }) : null,
+            // Gradient defs and animation styles
+            seriesData.value.some((sd) => sd.showArea) || props.animated ? vue.h("defs", null, [
+              // Animation keyframes
+              props.animated ? vue.h(
+                "style",
+                null,
+                `
+                          .tiger-line-animated {
+                            animation: tiger-line-draw 1.2s cubic-bezier(.4,0,.2,1) forwards;
+                          }
+                          @keyframes tiger-line-draw {
+                            from { stroke-dashoffset: 1; }
+                            to { stroke-dashoffset: 0; }
+                          }
+                        `
+              ) : null,
+              // Area fill gradients
+              ...seriesData.value.filter((sd) => sd.showArea).map(
+                (sd) => vue.h(
+                  "linearGradient",
+                  {
+                    key: `area-grad-${sd.seriesIndex}`,
+                    id: `${gradientPrefix}-${sd.seriesIndex}`,
+                    x1: "0",
+                    y1: "0",
+                    x2: "0",
+                    y2: "1"
+                  },
+                  [
+                    vue.h("stop", {
+                      offset: "0%",
+                      "stop-color": sd.color,
+                      "stop-opacity": sd.areaOpacity
+                    }),
+                    vue.h("stop", {
+                      offset: "100%",
+                      "stop-color": sd.color,
+                      "stop-opacity": 0.02
+                    })
+                  ]
+                )
+              )
+            ]) : null,
             // Render each series
             ...seriesData.value.map(
               (sd) => vue.h(
@@ -392,27 +452,45 @@ var LineChart = vue.defineComponent({
                 },
                 {
                   default: () => [
+                    // Area fill path
+                    sd.showArea && sd.areaPath ? vue.h("path", {
+                      d: sd.areaPath,
+                      fill: `url(#${gradientPrefix}-${sd.seriesIndex})`,
+                      stroke: "none",
+                      class: "transition-opacity duration-300",
+                      "data-area-series": sd.seriesIndex
+                    }) : null,
                     // Line path
                     vue.h("path", {
                       d: sd.linePath,
                       fill: "none",
                       stroke: sd.color,
                       "stroke-width": sd.strokeWidth,
-                      "stroke-dasharray": sd.strokeDasharray,
+                      "stroke-dasharray": props.animated ? sd.strokeDasharray ?? "1" : sd.strokeDasharray,
+                      "stroke-dashoffset": props.animated ? "1" : void 0,
                       "stroke-linecap": "round",
                       "stroke-linejoin": "round",
-                      class: "transition-opacity duration-150",
+                      pathLength: props.animated ? 1 : void 0,
+                      class: tigercatCore.classNames(
+                        "transition-opacity duration-200",
+                        props.animated && "tiger-line-animated"
+                      ),
                       "data-line-series": sd.seriesIndex
                     }),
                     // Data points
-                    sd.showPoints ? sd.points.map(
-                      (point) => vue.h("circle", {
+                    sd.showPoints ? sd.points.map((point) => {
+                      const isHovered = hoveredPointInfo.value?.seriesIndex === sd.seriesIndex && hoveredPointInfo.value?.pointIndex === point.pointIndex;
+                      const hoverSize = sd.pointSize + 2;
+                      return vue.h("circle", {
                         key: `point-${sd.seriesIndex}-${point.pointIndex}`,
                         cx: point.x,
                         cy: point.y,
-                        r: sd.pointSize,
-                        fill: sd.pointColor,
-                        class: "transition-all duration-150 hover:r-[6]",
+                        r: isHovered ? hoverSize : sd.pointSize,
+                        fill: sd.pointHollow ? "white" : sd.pointColor,
+                        stroke: sd.pointHollow ? sd.pointColor : "none",
+                        "stroke-width": sd.pointHollow ? 2 : 0,
+                        class: "transition-all duration-200 ease-out",
+                        style: isHovered ? `filter: drop-shadow(0 0 4px ${sd.color})` : void 0,
                         "data-point-index": point.pointIndex,
                         onMouseenter: (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e),
                         onMousemove: handlePointMouseMove,
@@ -421,8 +499,8 @@ var LineChart = vue.defineComponent({
                           e.stopPropagation();
                           handlePointClick(sd.seriesIndex, point.pointIndex);
                         }
-                      })
-                    ) : null
+                      });
+                    }) : null
                   ]
                 }
               )

package/dist/chunk-GNKXBRXH.js

@@ -0,0 +1,189 @@
+'use strict';
+
+var chunkW36SYMVH_js = require('./chunk-W36SYMVH.js');
+var chunkK2U3FEL7_js = require('./chunk-K2U3FEL7.js');
+var chunkDELTFEEJ_js = require('./chunk-DELTFEEJ.js');
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+var CropUpload = vue.defineComponent({
+  name: "TigerCropUpload",
+  inheritAttrs: false,
+  props: {
+    accept: { type: String, default: "image/*" },
+    disabled: { type: Boolean, default: false },
+    maxSize: { type: Number, default: void 0 },
+    cropperProps: {
+      type: Object,
+      default: void 0
+    },
+    modalTitle: { type: String, default: "\u88C1\u526A\u56FE\u7247" },
+    modalWidth: { type: Number, default: 520 },
+    className: { type: String, default: void 0 },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["crop-complete", "error"],
+  setup(props, { slots, emit, attrs }) {
+    const fileInputRef = vue.ref(null);
+    const modalVisible = vue.ref(false);
+    const imageSrc = vue.ref("");
+    const cropperRef = vue.ref(null);
+    const cropping = vue.ref(false);
+    const handleTriggerClick = () => {
+      if (props.disabled) return;
+      fileInputRef.value?.click();
+    };
+    const handleFileChange = (e) => {
+      const input = e.target;
+      const file = input.files?.[0];
+      if (!file) return;
+      if (props.maxSize && file.size > props.maxSize) {
+        emit("error", new Error(`File size exceeds maximum of ${props.maxSize} bytes`));
+        input.value = "";
+        return;
+      }
+      const reader = new FileReader();
+      reader.onload = (ev) => {
+        imageSrc.value = ev.target?.result;
+        modalVisible.value = true;
+      };
+      reader.readAsDataURL(file);
+      input.value = "";
+    };
+    const handleConfirm = async () => {
+      if (!cropperRef.value) return;
+      cropping.value = true;
+      try {
+        const result = await cropperRef.value.getCropResult();
+        emit("crop-complete", result);
+        modalVisible.value = false;
+      } catch (err) {
+        emit("error", err);
+      } finally {
+        cropping.value = false;
+      }
+    };
+    const handleCancel = () => {
+      modalVisible.value = false;
+      imageSrc.value = "";
+    };
+    const triggerClasses = vue.computed(
+      () => tigercatCore.classNames(
+        props.disabled ? tigercatCore.cropUploadTriggerDisabledClasses : tigercatCore.cropUploadTriggerClasses,
+        props.className,
+        tigercatCore.coerceClassValue(attrs.class)
+      )
+    );
+    const triggerStyle = vue.computed(
+      () => tigercatCore.mergeStyleValues(attrs.style, props.style)
+    );
+    return () => {
+      const forwardedAttrs = Object.fromEntries(
+        Object.entries(attrs).filter(([key]) => key !== "class" && key !== "style")
+      );
+      const fileInput = vue.h("input", {
+        ref: fileInputRef,
+        type: "file",
+        accept: props.accept,
+        style: { display: "none" },
+        onChange: handleFileChange
+      });
+      const trigger = slots.default ? vue.h(
+        "div",
+        {
+          ...forwardedAttrs,
+          class: triggerClasses.value,
+          style: triggerStyle.value,
+          onClick: handleTriggerClick,
+          role: "button",
+          tabindex: props.disabled ? -1 : 0,
+          "aria-label": "Select image to crop and upload",
+          "aria-disabled": props.disabled ? "true" : void 0,
+          onKeydown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handleTriggerClick();
+            }
+          }
+        },
+        slots.default()
+      ) : vue.h(
+        "div",
+        {
+          ...forwardedAttrs,
+          class: triggerClasses.value,
+          style: triggerStyle.value,
+          onClick: handleTriggerClick,
+          role: "button",
+          tabindex: props.disabled ? -1 : 0,
+          "aria-label": "Select image to crop and upload",
+          "aria-disabled": props.disabled ? "true" : void 0,
+          onKeydown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handleTriggerClick();
+            }
+          }
+        },
+        [
+          vue.h(
+            "svg",
+            {
+              class: "w-5 h-5",
+              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: tigercatCore.uploadPlusIconPath
+              })
+            ]
+          ),
+          vue.h("span", null, "\u9009\u62E9\u56FE\u7247")
+        ]
+      );
+      const modal = vue.h(
+        chunkW36SYMVH_js.Modal,
+        {
+          visible: modalVisible.value,
+          size: "lg",
+          title: props.modalTitle,
+          closable: true,
+          maskClosable: false,
+          showDefaultFooter: false,
+          "onUpdate:visible": (val) => {
+            if (!val) handleCancel();
+          }
+        },
+        {
+          default: () => imageSrc.value ? vue.h(chunkK2U3FEL7_js.ImageCropper, {
+            ref: cropperRef,
+            src: imageSrc.value,
+            ...props.cropperProps
+          }) : null,
+          footer: ({ cancel }) => vue.h("div", { class: tigercatCore.modalFooterClasses }, [
+            vue.h(chunkDELTFEEJ_js.Button, { variant: "secondary", onClick: handleCancel }, { default: () => "\u53D6\u6D88" }),
+            vue.h(
+              chunkDELTFEEJ_js.Button,
+              { onClick: handleConfirm, loading: cropping.value },
+              { default: () => "\u786E\u8BA4\u88C1\u526A" }
+            )
+          ])
+        }
+      );
+      return vue.h("div", { class: "tiger-crop-upload inline-block" }, [fileInput, trigger, modal]);
+    };
+  }
+});
+var CropUpload_default = CropUpload;
+
+exports.CropUpload = CropUpload;
+exports.CropUpload_default = CropUpload_default;

package/dist/{chunk-SZD2UCM5.mjs → chunk-GQPSQJ5I.mjs}

@@ -1,5 +1,5 @@
 import { defineComponent, computed, h } from 'vue';
-import { classNames, layoutContentClasses, coerceClassValue, mergeStyleValues } from '@expcat/tigercat-core';
+import { classNames, layoutContentClasses, coerceClassValue } from '@expcat/tigercat-core';
 
 // src/components/Content.ts
 var Content = defineComponent({
@@ -22,21 +22,14 @@ var Content = defineComponent({
     }
   },
   setup(props, { slots, attrs }) {
-    const attrsRecord = attrs;
     const contentClasses = computed(
-      () => classNames(layoutContentClasses, props.className, coerceClassValue(attrsRecord.class))
+      () => classNames(
+        layoutContentClasses,
+        props.className,
+        coerceClassValue(attrs.class)
+      )
     );
-    return () => {
-      return h(
-        "main",
-        {
-          ...attrs,
-          class: contentClasses.value,
-          style: mergeStyleValues(attrsRecord.style, props.style)
-        },
-        slots.default?.()
-      );
-    };
+    return () => h("main", { ...attrs, class: contentClasses.value, style: props.style }, slots.default?.());
   }
 });
 var Content_default = Content;