@expcat/tigercat-vue 1.0.7 → 1.2.0

package/dist/{chunk-LGVPLGK3.mjs → chunk-OCL22D5E.mjs}

@@ -1,7 +1,29 @@
-import { h, defineComponent, ref, computed, watch, onBeforeUnmount } from 'vue';
-import { getCascaderDisplayLabel, getCascaderColumns, flattenCascaderOptions, filterCascaderOptions, classNames, getCascaderTriggerClasses, coerceClassValue, icon20ViewBox, chevronDownSolidIcon20PathD, closeSolidIcon20PathD, cascaderSearchInputClasses, cascaderEmptyStateClasses, cascaderSearchResultClasses, cascaderColumnClasses, isCascaderOptionExpandable, getCascaderOptionClasses, cascaderDropdownClasses, cascaderBaseClasses } from '@expcat/tigercat-core';
-
 // src/components/Cascader.ts
+import { defineComponent, computed, ref, h, watch, onBeforeUnmount } from "vue";
+import {
+  classNames,
+  cascaderBaseClasses,
+  cascaderDropdownClasses,
+  cascaderColumnClasses,
+  cascaderSearchInputClasses,
+  cascaderEmptyStateClasses,
+  cascaderSearchResultClasses,
+  getCascaderTriggerClasses,
+  getCascaderOptionClasses,
+  getCascaderColumns,
+  getCascaderDisplayLabel,
+  flattenCascaderOptions,
+  filterCascaderOptions,
+  isCascaderOptionExpandable,
+  getPickerComboboxAria,
+  getPickerListboxAria,
+  getPickerOptionAria,
+  getPickerTriggerKeyAction,
+  icon20ViewBox,
+  chevronDownSolidIcon20PathD,
+  closeSolidIcon20PathD,
+  coerceClassValue
+} from "@expcat/tigercat-core";
 var cascaderInstanceId = 0;
 var ChevronRightIcon = h(
   "svg",
@@ -149,22 +171,15 @@ var Cascader = defineComponent({
       searchQuery.value = e.target.value;
     }
     function handleTriggerKeyDown(e) {
-      switch (e.key) {
-        case "Enter":
-        case " ":
-          e.preventDefault();
-          toggleOpen();
-          break;
-        case "Escape":
-          e.preventDefault();
-          closeDropdown();
-          break;
-        case "ArrowDown":
-          e.preventDefault();
-          if (!isOpen.value) {
-            isOpen.value = true;
-          }
-          break;
+      const action = getPickerTriggerKeyAction(e.key, isOpen.value);
+      if (action === "none") return;
+      e.preventDefault();
+      if (action === "toggle") {
+        toggleOpen();
+      } else if (action === "open") {
+        isOpen.value = true;
+      } else if (action === "close") {
+        closeDropdown();
       }
     }
     function handleDocumentClick(e) {
@@ -240,10 +255,7 @@ var Cascader = defineComponent({
           type: "button",
           class: triggerClasses.value,
           disabled: props.disabled,
-          role: "combobox",
-          "aria-expanded": isOpen.value,
-          "aria-haspopup": "listbox",
-          "aria-controls": isOpen.value ? listboxId : void 0,
+          ...getPickerComboboxAria({ expanded: isOpen.value, listboxId }),
           onClick: toggleOpen,
           onKeydown: handleTriggerKeyDown
         },
@@ -283,7 +295,7 @@ var Cascader = defineComponent({
           } else {
             const searchList = h(
               "div",
-              { class: "max-h-64 overflow-auto", role: "listbox", id: listboxId },
+              { class: "max-h-64 overflow-auto", ...getPickerListboxAria({ id: listboxId }) },
               searchResults.value.map(
                 (item) => h(
                   "div",
@@ -292,9 +304,10 @@ var Cascader = defineComponent({
                       cascaderSearchResultClasses,
                       item.disabled && "opacity-50 cursor-not-allowed"
                     ),
-                    role: "option",
-                    "aria-selected": props.modelValue?.join(",") === item.valuePath.join(","),
-                    "aria-disabled": item.disabled,
+                    ...getPickerOptionAria({
+                      selected: props.modelValue?.join(",") === item.valuePath.join(","),
+                      disabled: item.disabled
+                    }),
                     onClick: () => handleSearchResultClick(item.valuePath, item.disabled)
                   },
                   item.label
@@ -309,9 +322,10 @@ var Cascader = defineComponent({
               "div",
               {
                 class: cascaderColumnClasses,
-                role: "listbox",
-                id: colIndex === 0 ? listboxId : void 0,
-                "aria-label": `Level ${colIndex + 1}`
+                ...getPickerListboxAria({
+                  id: colIndex === 0 ? listboxId : void 0,
+                  label: `Level ${colIndex + 1}`
+                })
               },
               col.options.map((option) => {
                 const isSelected = col.selectedValue === option.value;
@@ -320,9 +334,7 @@ var Cascader = defineComponent({
                   "div",
                   {
                     class: getCascaderOptionClasses(isSelected, !!option.disabled, props.size),
-                    role: "option",
-                    "aria-selected": isSelected,
-                    "aria-disabled": option.disabled,
+                    ...getPickerOptionAria({ selected: isSelected, disabled: !!option.disabled }),
                     onClick: () => handleOptionClick(option, colIndex),
                     onMouseenter: () => handleOptionHover(option, colIndex)
                   },
@@ -358,4 +370,7 @@ var Cascader = defineComponent({
 });
 var Cascader_default = Cascader;
 
-export { Cascader, Cascader_default };
+export {
+  Cascader,
+  Cascader_default
+};

package/dist/chunk-ODQOYMUQ.js

@@ -0,0 +1,72 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/AvatarGroup.ts
+var _vue = require('vue');
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var AVATAR_GROUP_INJECTION_KEY = /* @__PURE__ */ Symbol("TigerAvatarGroup");
+var AvatarGroup = _vue.defineComponent.call(void 0, {
+  name: "TigerAvatarGroup",
+  inheritAttrs: false,
+  props: {
+    max: {
+      type: Number,
+      default: void 0
+    },
+    size: {
+      type: String,
+      default: void 0
+    },
+    className: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    _vue.provide.call(void 0, AVATAR_GROUP_INJECTION_KEY, {
+      size: props.size,
+      itemClass: _tigercatcore.getAvatarGroupItemClasses.call(void 0, )
+    });
+    return () => {
+      const children = _nullishCoalesce(_optionalChain([slots, 'access', _ => _.default, 'optionalCall', _2 => _2()]), () => ( []));
+      const flatChildren = children.flatMap(
+        (vnode) => Array.isArray(vnode.children) ? vnode.children : [vnode]
+      );
+      const attrsRecord = attrs;
+      const attrsClass = attrsRecord.class;
+      const { visibleItems, overflowCount } = _tigercatcore.getVisibleGroupItems.call(void 0, flatChildren, props.max);
+      return _vue.h.call(void 0, 
+        "div",
+        {
+          ...attrs,
+          class: _tigercatcore.getAvatarGroupClasses.call(void 0, props.className, _tigercatcore.coerceClassValue.call(void 0, attrsClass)),
+          role: "group",
+          "aria-label": "Avatar group"
+        },
+        [
+          ...visibleItems,
+          overflowCount > 0 ? _vue.h.call(void 0, 
+            "span",
+            {
+              class: _tigercatcore.getAvatarGroupOverflowClasses.call(void 0, _nullishCoalesce(props.size, () => ( "md"))),
+              "aria-label": _tigercatcore.getAvatarGroupOverflowLabel.call(void 0, overflowCount)
+            },
+            _tigercatcore.getAvatarGroupOverflowText.call(void 0, overflowCount)
+          ) : null
+        ]
+      );
+    };
+  }
+});
+var AvatarGroup_default = AvatarGroup;
+
+
+
+
+
+exports.AVATAR_GROUP_INJECTION_KEY = AVATAR_GROUP_INJECTION_KEY; exports.AvatarGroup = AvatarGroup; exports.AvatarGroup_default = AvatarGroup_default;

package/dist/{chunk-FXGIIFGN.mjs → chunk-OK4PVFQG.mjs}

@@ -1,7 +1,6 @@
-import { defineComponent, ref, watch, computed, h, Teleport } from 'vue';
-import { classNames } from '@expcat/tigercat-core';
-
 // src/components/ChartTooltip.ts
+import { defineComponent, h, computed, ref, watch, Teleport } from "vue";
+import { classNames, getChartTooltipTransform } from "@expcat/tigercat-core";
 var ChartTooltip = defineComponent({
   name: "TigerChartTooltip",
   props: {
@@ -30,11 +29,11 @@ var ChartTooltip = defineComponent({
     const adjustedPosition = ref({ x: props.x, y: props.y });
     watch(
       () => [props.x, props.y, props.visible],
-      () => {
+      (_value, _oldValue, onCleanup) => {
         if (!props.visible) return;
         let x = props.x + 12;
         let y = props.y - 8;
-        requestAnimationFrame(() => {
+        const frameHandle = requestAnimationFrame(() => {
           if (!tooltipRef.value) return;
           const rect = tooltipRef.value.getBoundingClientRect();
           const viewportWidth = window.innerWidth;
@@ -49,14 +48,15 @@ var ChartTooltip = defineComponent({
           y = Math.max(8, y);
           adjustedPosition.value = { x, y };
         });
+        onCleanup(() => cancelAnimationFrame(frameHandle));
         adjustedPosition.value = { x, y };
       },
       { immediate: true }
     );
     const tooltipClasses = computed(
       () => classNames(
-        "fixed z-[9999] pointer-events-none",
-        "px-3 py-2 rounded-md shadow-lg",
+        "fixed left-0 top-0 z-[9999] pointer-events-none will-change-transform",
+        "px-3 py-2 rounded-[var(--tiger-radius-md,0.375rem)] shadow-[var(--tiger-shadow-glass,0_10px_15px_-3px_rgb(0_0_0_/_0.1),0_4px_6px_-4px_rgb(0_0_0_/_0.1))]",
         "bg-[color:var(--tiger-bg-elevated,#1f2937)]",
         "text-[color:var(--tiger-text-inverse,#f9fafb)]",
         "text-sm whitespace-nowrap",
@@ -74,8 +74,7 @@ var ChartTooltip = defineComponent({
             ref: tooltipRef,
             class: tooltipClasses.value,
             style: {
-              left: `${adjustedPosition.value.x}px`,
-              top: `${adjustedPosition.value.y}px`
+              transform: getChartTooltipTransform(adjustedPosition.value)
             },
             role: "tooltip",
             "data-chart-tooltip": "true"
@@ -88,4 +87,7 @@ var ChartTooltip = defineComponent({
 });
 var ChartTooltip_default = ChartTooltip;
 
-export { ChartTooltip, ChartTooltip_default };
+export {
+  ChartTooltip,
+  ChartTooltip_default
+};

package/dist/{chunk-UNR5RUET.mjs → chunk-OKR3GRG5.mjs}

@@ -1,13 +1,45 @@
-import { useChartInteraction } from './chunk-DU2NXX75.mjs';
-import { ChartLegend } from './chunk-F5HOHSFH.mjs';
-import { ChartSeries } from './chunk-2ZUEXCVJ.mjs';
-import { ChartTooltip } from './chunk-FXGIIFGN.mjs';
-import { ChartAxis } from './chunk-ZWVA7HT3.mjs';
-import { ChartCanvas } from './chunk-5WHLXWWT.mjs';
-import { ChartGrid } from './chunk-MI6TL3CQ.mjs';
-import { defineComponent, ref, computed, h } from 'vue';
-import { getLineGradientPrefix, getChartInnerRect, resolveSeriesData, getNumberExtent, createLinearScale, createPointScale, resolveChartPalette, createLinePath, createAreaPath, getChartElementOpacity, buildChartLegendItems, resolveMultiSeriesTooltipContent, defaultSeriesXYTooltipFormatter, classNames } from '@expcat/tigercat-core';
+import {
+  useChartInteraction
+} from "./chunk-R2HO74FE.mjs";
+import {
+  ChartLegend
+} from "./chunk-VVS2CQS4.mjs";
+import {
+  ChartSeries
+} from "./chunk-2ZUEXCVJ.mjs";
+import {
+  ChartTooltip
+} from "./chunk-OK4PVFQG.mjs";
+import {
+  ChartAxis
+} from "./chunk-ZWVA7HT3.mjs";
+import {
+  ChartCanvas
+} from "./chunk-W5RZPTFD.mjs";
+import {
+  ChartGrid
+} from "./chunk-MI6TL3CQ.mjs";
 
+// src/components/LineChart.ts
+import { defineComponent, computed, h, ref, useId } from "vue";
+import {
+  classNames,
+  createAreaPath,
+  createLinearScale,
+  createLinePath,
+  createPointScale,
+  getChartElementOpacity,
+  getChartInnerRect,
+  getStableChartGradientPrefix,
+  getNumberExtent,
+  linePointTransitionClasses,
+  resolveChartPalette,
+  buildChartLegendItems,
+  buildChartSeriesKeys,
+  resolveMultiSeriesTooltipContent,
+  resolveSeriesData,
+  defaultSeriesXYTooltipFormatter
+} from "@expcat/tigercat-core";
 var LineChart = defineComponent({
   name: "TigerLineChart",
   props: {
@@ -176,6 +208,16 @@ var LineChart = defineComponent({
       type: Boolean,
       default: false
     },
+    // Stroke gradient (modern look — opt-in)
+    strokeGradient: {
+      type: Boolean,
+      default: false
+    },
+    // Point fill radial gradient (modern look — opt-in)
+    pointGradient: {
+      type: Boolean,
+      default: false
+    },
     // Tooltip props
     showTooltip: {
       type: Boolean,
@@ -209,7 +251,7 @@ var LineChart = defineComponent({
   setup(props, { emit }) {
     const hoveredPointInfo = ref(null);
     const tooltipPosition = ref({ x: 0, y: 0 });
-    const gradientPrefix = getLineGradientPrefix();
+    const gradientPrefix = getStableChartGradientPrefix("line", useId());
     const innerRect = computed(() => getChartInnerRect(props.width, props.height, props.padding));
     const resolvedSeries = computed(
       () => resolveSeriesData(props.series, props.data)
@@ -260,8 +302,12 @@ var LineChart = defineComponent({
     const shouldShowXAxis = computed(() => props.showAxis && props.showXAxis);
     const shouldShowYAxis = computed(() => props.showAxis && props.showYAxis);
     const palette = computed(() => resolveChartPalette(props.colors));
+    const seriesKeys = computed(
+      () => buildChartSeriesKeys(resolvedSeries.value, { prefix: "line-" })
+    );
     const seriesData = computed(
       () => resolvedSeries.value.map((series, seriesIndex) => {
+        const seriesKey = seriesKeys.value[seriesIndex];
         const color = series.color ?? palette.value[seriesIndex % palette.value.length];
         const points = series.data.map((datum, pointIndex) => ({
           x: resolvedXScale.value.map(datum.x),
@@ -279,6 +325,7 @@ var LineChart = defineComponent({
         return {
           series,
           seriesIndex,
+          seriesKey,
           color,
           linePath,
           areaPath,
@@ -386,19 +433,22 @@ var LineChart = defineComponent({
               label: props.yAxisLabel
             }) : null,
             // Gradient defs and animation styles
-            seriesData.value.some((sd) => sd.showArea) || props.animated ? h("defs", null, [
+            seriesData.value.some((sd) => sd.showArea) || props.animated || props.strokeGradient || props.pointGradient ? h("defs", null, [
               // Animation keyframes
               props.animated ? h(
                 "style",
                 null,
                 `
                           .tiger-line-animated {
-                            animation: tiger-line-draw 1.2s cubic-bezier(.4,0,.2,1) forwards;
+                            animation: tiger-line-draw var(--tiger-motion-duration-slow,1.2s) var(--tiger-motion-ease-emphasized,cubic-bezier(.4,0,.2,1)) forwards;
                           }
                           @keyframes tiger-line-draw {
                             from { stroke-dashoffset: 1; }
                             to { stroke-dashoffset: 0; }
                           }
+                          @media (prefers-reduced-motion: reduce) {
+                            .tiger-line-animated { animation-duration: 0ms; }
+                          }
                         `
               ) : null,
               // Area fill gradients
@@ -406,8 +456,8 @@ var LineChart = defineComponent({
                 (sd) => h(
                   "linearGradient",
                   {
-                    key: `area-grad-${sd.seriesIndex}`,
-                    id: `${gradientPrefix}-${sd.seriesIndex}`,
+                    key: `area-grad-${sd.seriesKey}`,
+                    id: `${gradientPrefix}-${sd.seriesKey}`,
                     x1: "0",
                     y1: "0",
                     x2: "0",
@@ -426,18 +476,74 @@ var LineChart = defineComponent({
                     })
                   ]
                 )
-              )
+              ),
+              // Point fill radial gradients (bright center → series color edge)
+              ...props.pointGradient ? seriesData.value.map(
+                (sd) => h(
+                  "radialGradient",
+                  {
+                    key: `point-grad-${sd.seriesKey}`,
+                    id: `${gradientPrefix}-point-${sd.seriesKey}`,
+                    cx: "0.5",
+                    cy: "0.5",
+                    r: "0.5"
+                  },
+                  [
+                    h("stop", {
+                      offset: "0%",
+                      "stop-color": `color-mix(in oklab, ${sd.color} 100%, white 30%)`
+                    }),
+                    h("stop", {
+                      offset: "70%",
+                      "stop-color": sd.color
+                    }),
+                    h("stop", {
+                      offset: "100%",
+                      "stop-color": `color-mix(in oklab, ${sd.color} 100%, black 12%)`
+                    })
+                  ]
+                )
+              ) : [],
+              // Stroke gradients (3-stop horizontal lighter→base→darker)
+              ...props.strokeGradient ? seriesData.value.map(
+                (sd) => h(
+                  "linearGradient",
+                  {
+                    key: `stroke-grad-${sd.seriesKey}`,
+                    id: `${gradientPrefix}-stroke-${sd.seriesKey}`,
+                    x1: "0",
+                    y1: "0",
+                    x2: "1",
+                    y2: "0"
+                  },
+                  [
+                    h("stop", {
+                      offset: "0%",
+                      "stop-color": `color-mix(in oklab, ${sd.color} 100%, white 12%)`
+                    }),
+                    h("stop", {
+                      offset: "50%",
+                      "stop-color": sd.color
+                    }),
+                    h("stop", {
+                      offset: "100%",
+                      "stop-color": `color-mix(in oklab, ${sd.color} 100%, black 8%)`
+                    })
+                  ]
+                )
+              ) : []
             ]) : null,
             // Render each series
             ...seriesData.value.map(
               (sd) => h(
                 ChartSeries,
                 {
-                  key: `series-${sd.seriesIndex}`,
+                  key: sd.seriesKey,
                   data: sd.series.data,
                   name: sd.series.name,
                   type: "line",
                   opacity: sd.opacity,
+                  "data-series-key": sd.seriesKey,
                   class: classNames(
                     sd.series.className,
                     (props.hoverable || props.selectable) && "cursor-pointer"
@@ -453,16 +559,17 @@ var LineChart = defineComponent({
                     // Area fill path
                     sd.showArea && sd.areaPath ? h("path", {
                       d: sd.areaPath,
-                      fill: `url(#${gradientPrefix}-${sd.seriesIndex})`,
+                      fill: `url(#${gradientPrefix}-${sd.seriesKey})`,
                       stroke: "none",
                       class: "transition-opacity duration-300",
-                      "data-area-series": sd.seriesIndex
+                      "data-area-series": sd.seriesIndex,
+                      "data-series-key": sd.seriesKey
                     }) : null,
                     // Line path
                     h("path", {
                       d: sd.linePath,
                       fill: "none",
-                      stroke: sd.color,
+                      stroke: props.strokeGradient ? `url(#${gradientPrefix}-stroke-${sd.seriesKey})` : sd.color,
                       "stroke-width": sd.strokeWidth,
                       "stroke-dasharray": props.animated ? sd.strokeDasharray ?? "1" : sd.strokeDasharray,
                       "stroke-dashoffset": props.animated ? "1" : void 0,
@@ -470,26 +577,28 @@ var LineChart = defineComponent({
                       "stroke-linejoin": "round",
                       pathLength: props.animated ? 1 : void 0,
                       class: classNames(
-                        "transition-opacity duration-200",
+                        "transition-opacity [transition-duration:var(--tiger-motion-duration-base,200ms)]",
                         props.animated && "tiger-line-animated"
                       ),
-                      "data-line-series": sd.seriesIndex
+                      "data-line-series": sd.seriesIndex,
+                      "data-series-key": sd.seriesKey
                     }),
                     // Data points
                     sd.showPoints ? sd.points.map((point) => {
                       const isHovered = hoveredPointInfo.value?.seriesIndex === sd.seriesIndex && hoveredPointInfo.value?.pointIndex === point.pointIndex;
                       const hoverSize = sd.pointSize + 2;
                       return h("circle", {
-                        key: `point-${sd.seriesIndex}-${point.pointIndex}`,
+                        key: `point-${sd.seriesKey}-${point.pointIndex}`,
                         cx: point.x,
                         cy: point.y,
                         r: isHovered ? hoverSize : sd.pointSize,
-                        fill: sd.pointHollow ? "white" : sd.pointColor,
+                        fill: sd.pointHollow ? "white" : props.pointGradient ? `url(#${gradientPrefix}-point-${sd.seriesKey})` : sd.pointColor,
                         stroke: sd.pointHollow ? sd.pointColor : "none",
                         "stroke-width": sd.pointHollow ? 2 : 0,
-                        class: "transition-all duration-200 ease-out",
+                        class: linePointTransitionClasses,
                         style: isHovered ? `filter: drop-shadow(0 0 4px ${sd.color})` : void 0,
                         "data-point-index": point.pointIndex,
+                        "data-series-key": sd.seriesKey,
                         onMouseenter: (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e),
                         onMousemove: handlePointMouseMove,
                         onMouseleave: handlePointMouseLeave,
@@ -534,4 +643,7 @@ var LineChart = defineComponent({
 });
 var LineChart_default = LineChart;
 
-export { LineChart, LineChart_default };
+export {
+  LineChart,
+  LineChart_default
+};