@expcat/tigercat-vue 1.0.7 → 1.2.0

package/dist/chunk-XH4ZZ6KJ.js

@@ -0,0 +1,427 @@
+"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/Carousel.ts
+
+
+
+
+
+
+
+
+
+
+var _vue = require('vue');
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var Carousel = _vue.defineComponent.call(void 0, {
+  name: "TigerCarousel",
+  props: {
+    /**
+     * Whether to enable automatic slide switching
+     * @default false
+     */
+    autoplay: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Time interval for auto-play in milliseconds
+     * @default 3000
+     */
+    autoplaySpeed: {
+      type: Number,
+      default: 3e3
+    },
+    /**
+     * Whether to show navigation dots
+     * @default true
+     */
+    dots: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Position of navigation dots
+     * @default 'bottom'
+     */
+    dotPosition: {
+      type: String,
+      default: "bottom"
+    },
+    /**
+     * Transition effect type
+     * @default 'scroll'
+     */
+    effect: {
+      type: String,
+      default: "scroll"
+    },
+    /**
+     * Whether to show prev/next arrows
+     * @default false
+     */
+    arrows: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Whether to enable infinite loop
+     * @default true
+     */
+    infinite: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Transition animation duration in milliseconds
+     * @default 500
+     */
+    speed: {
+      type: Number,
+      default: 500
+    },
+    /**
+     * Initial slide index (0-based)
+     * @default 0
+     */
+    initialSlide: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * Whether to pause autoplay on hover
+     * @default true
+     */
+    pauseOnHover: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Whether to pause autoplay on focus
+     * @default true
+     */
+    pauseOnFocus: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Additional CSS classes
+     */
+    className: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Custom styles
+     */
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["change", "before-change"],
+  setup(props, { slots, emit, attrs, expose }) {
+    const currentIndex = _vue.ref.call(void 0, props.initialSlide);
+    const isPaused = _vue.ref.call(void 0, false);
+    const slideCount = _vue.ref.call(void 0, 0);
+    const containerRef = _vue.ref.call(void 0, null);
+    let autoplayController = null;
+    let touchStartPoint = null;
+    let touchCurrentPoint = null;
+    const containerClasses = _vue.computed.call(void 0, () => {
+      return _tigercatcore.classNames.call(void 0, _tigercatcore.getCarouselContainerClasses.call(void 0, props.className), _tigercatcore.coerceClassValue.call(void 0, attrs.class));
+    });
+    const trackClasses = _vue.computed.call(void 0, () => {
+      if (props.effect === "fade") {
+        return _tigercatcore.carouselTrackFadeClasses;
+      }
+      return _tigercatcore.carouselTrackScrollClasses;
+    });
+    const trackStyle = _vue.computed.call(void 0, () => {
+      if (props.effect === "scroll") {
+        return {
+          transform: _tigercatcore.getScrollTransform.call(void 0, currentIndex.value),
+          transitionDuration: `${props.speed}ms`
+        };
+      }
+      return {};
+    });
+    const getSlideClasses = (index) => {
+      const isActive = index === currentIndex.value;
+      if (props.effect === "fade") {
+        const positionClass = index === 0 ? "relative" : "absolute inset-0";
+        return _tigercatcore.classNames.call(void 0, 
+          positionClass,
+          "w-full transition-opacity ease-in-out",
+          isActive ? "opacity-100 z-10" : "opacity-0 z-0"
+        );
+      }
+      return _tigercatcore.carouselSlideBaseClasses;
+    };
+    const slideStyle = _vue.computed.call(void 0, () => ({
+      transitionDuration: `${props.speed}ms`
+    }));
+    const dotsClasses = _vue.computed.call(void 0, () => {
+      return _tigercatcore.getCarouselDotsClasses.call(void 0, props.dotPosition);
+    });
+    const next = () => {
+      const nextIdx = _tigercatcore.getNextSlideIndex.call(void 0, currentIndex.value, slideCount.value, props.infinite);
+      if (nextIdx !== currentIndex.value) {
+        goTo(nextIdx);
+      }
+    };
+    const prev = () => {
+      const prevIdx = _tigercatcore.getPrevSlideIndex.call(void 0, currentIndex.value, slideCount.value, props.infinite);
+      if (prevIdx !== currentIndex.value) {
+        goTo(prevIdx);
+      }
+    };
+    const goTo = (index) => {
+      const clampedIndex = _tigercatcore.clampSlideIndex.call(void 0, index, slideCount.value);
+      if (clampedIndex === currentIndex.value) {
+        return;
+      }
+      emit("before-change", currentIndex.value, clampedIndex);
+      const prevIndex = currentIndex.value;
+      currentIndex.value = clampedIndex;
+      emit("change", clampedIndex, prevIndex);
+    };
+    const startAutoplay = () => {
+      if (!props.autoplay || isPaused.value || autoplayController) return;
+      autoplayController = _tigercatcore.createCarouselAutoplayController.call(void 0, {
+        interval: props.autoplaySpeed,
+        onAdvance: next
+      });
+      autoplayController.start();
+    };
+    const stopAutoplay = () => {
+      _optionalChain([autoplayController, 'optionalAccess', _2 => _2.stop, 'call', _3 => _3()]);
+      autoplayController = null;
+    };
+    const syncAutoplay = () => {
+      stopAutoplay();
+      startAutoplay();
+    };
+    const resetTouchGesture = () => {
+      touchStartPoint = null;
+      touchCurrentPoint = null;
+    };
+    const handleTouchStart = (event) => {
+      const point = _tigercatcore.getCarouselTouchPoint.call(void 0, event.touches);
+      touchStartPoint = point;
+      touchCurrentPoint = point;
+    };
+    const handleTouchMove = (event) => {
+      if (!touchStartPoint) return;
+      const point = _tigercatcore.getCarouselTouchPoint.call(void 0, event.touches);
+      if (point) {
+        touchCurrentPoint = point;
+      }
+    };
+    const handleTouchEnd = (event) => {
+      const direction = _tigercatcore.resolveCarouselSwipeDirection.call(void 0, 
+        touchStartPoint,
+        _nullishCoalesce(_tigercatcore.getCarouselTouchPoint.call(void 0, event.changedTouches), () => ( touchCurrentPoint))
+      );
+      resetTouchGesture();
+      if (direction === "next") {
+        next();
+      } else if (direction === "prev") {
+        prev();
+      }
+    };
+    const handleTouchCancel = () => {
+      resetTouchGesture();
+    };
+    const handleMouseEnter = () => {
+      if (props.pauseOnHover && props.autoplay) {
+        isPaused.value = true;
+      }
+    };
+    const handleMouseLeave = () => {
+      if (props.pauseOnHover && props.autoplay) {
+        isPaused.value = false;
+      }
+    };
+    const handleFocus = () => {
+      if (props.pauseOnFocus && props.autoplay) {
+        isPaused.value = true;
+      }
+    };
+    const handleBlur = () => {
+      if (props.pauseOnFocus && props.autoplay) {
+        isPaused.value = false;
+      }
+    };
+    const isPrevArrowDisabled = _vue.computed.call(void 0, 
+      () => _tigercatcore.isPrevDisabled.call(void 0, currentIndex.value, slideCount.value, props.infinite)
+    );
+    const isNextArrowDisabled = _vue.computed.call(void 0, 
+      () => _tigercatcore.isNextDisabled.call(void 0, currentIndex.value, slideCount.value, props.infinite)
+    );
+    _vue.watch.call(void 0, [() => props.autoplay, () => props.autoplaySpeed, isPaused], syncAutoplay);
+    _vue.onMounted.call(void 0, () => {
+      if (props.autoplay) {
+        startAutoplay();
+      }
+      _optionalChain([containerRef, 'access', _4 => _4.value, 'optionalAccess', _5 => _5.addEventListener, 'call', _6 => _6("touchstart", handleTouchStart, { passive: true })]);
+      _optionalChain([containerRef, 'access', _7 => _7.value, 'optionalAccess', _8 => _8.addEventListener, 'call', _9 => _9("touchmove", handleTouchMove, { passive: true })]);
+      _optionalChain([containerRef, 'access', _10 => _10.value, 'optionalAccess', _11 => _11.addEventListener, 'call', _12 => _12("touchend", handleTouchEnd, { passive: true })]);
+      _optionalChain([containerRef, 'access', _13 => _13.value, 'optionalAccess', _14 => _14.addEventListener, 'call', _15 => _15("touchcancel", handleTouchCancel, { passive: true })]);
+    });
+    _vue.onUnmounted.call(void 0, () => {
+      stopAutoplay();
+      resetTouchGesture();
+      _optionalChain([containerRef, 'access', _16 => _16.value, 'optionalAccess', _17 => _17.removeEventListener, 'call', _18 => _18("touchstart", handleTouchStart)]);
+      _optionalChain([containerRef, 'access', _19 => _19.value, 'optionalAccess', _20 => _20.removeEventListener, 'call', _21 => _21("touchmove", handleTouchMove)]);
+      _optionalChain([containerRef, 'access', _22 => _22.value, 'optionalAccess', _23 => _23.removeEventListener, 'call', _24 => _24("touchend", handleTouchEnd)]);
+      _optionalChain([containerRef, 'access', _25 => _25.value, 'optionalAccess', _26 => _26.removeEventListener, 'call', _27 => _27("touchcancel", handleTouchCancel)]);
+    });
+    expose({
+      next,
+      prev,
+      goTo
+    });
+    return () => {
+      const defaultSlot = _optionalChain([slots, 'access', _28 => _28.default, 'optionalCall', _29 => _29()]) || [];
+      const flattenSlots = (nodes) => {
+        return nodes.flatMap((node) => {
+          if (node.type === _vue.Fragment && Array.isArray(node.children)) {
+            return flattenSlots(node.children);
+          }
+          return node;
+        });
+      };
+      const slides = flattenSlots(defaultSlot).filter((child) => child.type !== _vue.Comment);
+      slideCount.value = slides.length;
+      const renderArrowButton = (type, disabled, onClick, path) => _vue.h.call(void 0, 
+        "button",
+        {
+          type: "button",
+          class: _tigercatcore.getCarouselArrowClasses.call(void 0, type, disabled),
+          onClick,
+          disabled,
+          "aria-label": type === "prev" ? "Previous slide" : "Next slide"
+        },
+        _vue.h.call(void 0, 
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-width": "2",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            class: "w-6 h-6"
+          },
+          _vue.h.call(void 0, "path", { d: path })
+        )
+      );
+      const renderArrows = () => {
+        if (!props.arrows) return null;
+        return [
+          renderArrowButton("prev", isPrevArrowDisabled.value, prev, _tigercatcore.carouselPrevArrowPath),
+          renderArrowButton("next", isNextArrowDisabled.value, next, _tigercatcore.carouselNextArrowPath)
+        ];
+      };
+      const renderDots = () => {
+        if (!props.dots || slides.length <= 1) return null;
+        const dots = slides.map(
+          (_, index) => _vue.h.call(void 0, "button", {
+            type: "button",
+            key: index,
+            class: _tigercatcore.getCarouselDotClasses.call(void 0, index === currentIndex.value),
+            onClick: () => goTo(index),
+            "aria-label": `Go to slide ${index + 1}`,
+            "aria-current": index === currentIndex.value ? "true" : "false"
+          })
+        );
+        return _vue.h.call(void 0, 
+          "div",
+          {
+            class: dotsClasses.value,
+            role: "tablist",
+            "aria-label": "Carousel navigation"
+          },
+          dots
+        );
+      };
+      const renderSlides = () => {
+        const slideElements = slides.map(
+          (slide, index) => _vue.h.call(void 0, 
+            "div",
+            {
+              key: index,
+              class: getSlideClasses(index),
+              style: props.effect === "fade" ? slideStyle.value : void 0,
+              role: "group",
+              "aria-roledescription": "slide",
+              "aria-label": `Slide ${index + 1} of ${slides.length}`,
+              "aria-hidden": index !== currentIndex.value
+            },
+            slide
+          )
+        );
+        if (props.effect === "fade") {
+          return _vue.h.call(void 0, 
+            "div",
+            {
+              class: _tigercatcore.classNames.call(void 0, trackClasses.value, "h-full")
+            },
+            slideElements
+          );
+        }
+        return _vue.h.call(void 0, 
+          "div",
+          {
+            class: trackClasses.value,
+            style: trackStyle.value
+          },
+          slideElements
+        );
+      };
+      return _vue.h.call(void 0, 
+        "div",
+        {
+          ref: containerRef,
+          class: containerClasses.value,
+          style: props.style,
+          role: "region",
+          "aria-roledescription": "carousel",
+          "aria-label": "Image carousel",
+          onMouseenter: handleMouseEnter,
+          onMouseleave: handleMouseLeave,
+          onFocusin: handleFocus,
+          onFocusout: handleBlur
+        },
+        [renderSlides(), renderArrows(), renderDots()]
+      );
+    };
+  }
+});
+var Carousel_default = Carousel;
+
+
+
+
+exports.Carousel = Carousel; exports.Carousel_default = Carousel_default;

package/dist/chunk-XJXGVNNF.js

@@ -0,0 +1,120 @@
+"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/InfiniteScroll.ts
+var _vue = require('vue');
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var InfiniteScroll = _vue.defineComponent.call(void 0, {
+  name: "TigerInfiniteScroll",
+  inheritAttrs: false,
+  props: {
+    hasMore: { type: Boolean, default: true },
+    loading: { type: Boolean, default: false },
+    threshold: { type: Number, default: 100 },
+    loadingText: { type: String, default: "Loading..." },
+    endText: { type: String, default: "No more data" },
+    direction: {
+      type: String,
+      default: "vertical"
+    },
+    inverse: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    className: { type: String, default: void 0 }
+  },
+  emits: ["load-more"],
+  setup(props, { emit, slots, attrs }) {
+    const containerRef = _vue.ref.call(void 0, null);
+    const sentinelRef = _vue.ref.call(void 0, null);
+    let cleanupObserver = null;
+    let _usingFallback = false;
+    const containerClasses = _vue.computed.call(void 0, 
+      () => _tigercatcore.classNames.call(void 0, 
+        _tigercatcore.getInfiniteScrollContainerClasses.call(void 0, props.direction, props.className),
+        _tigercatcore.coerceClassValue.call(void 0, attrs.class)
+      )
+    );
+    function handleLoadMore() {
+      if (props.disabled || props.loading || !props.hasMore) return;
+      emit("load-more");
+    }
+    function checkScroll() {
+      if (props.disabled || props.loading || !props.hasMore) return;
+      const el = containerRef.value;
+      if (!el) return;
+      if (_tigercatcore.shouldLoadMore.call(void 0, el, props.threshold, props.direction, props.inverse)) {
+        emit("load-more");
+      }
+    }
+    function setupObserver() {
+      _optionalChain([cleanupObserver, 'optionalCall', _ => _()]);
+      cleanupObserver = null;
+      _usingFallback = false;
+      if (props.disabled || !props.hasMore) return;
+      const sentinel = sentinelRef.value;
+      if (!sentinel) return;
+      const teardown = _tigercatcore.createInfiniteScrollObserver.call(void 0, sentinel, {
+        threshold: props.threshold,
+        direction: props.direction,
+        root: containerRef.value,
+        onLoadMore: handleLoadMore
+      });
+      if (teardown) {
+        cleanupObserver = teardown;
+      } else {
+        _usingFallback = true;
+        _optionalChain([containerRef, 'access', _2 => _2.value, 'optionalAccess', _3 => _3.addEventListener, 'call', _4 => _4("scroll", checkScroll, { passive: true })]);
+        cleanupObserver = () => {
+          _optionalChain([containerRef, 'access', _5 => _5.value, 'optionalAccess', _6 => _6.removeEventListener, 'call', _7 => _7("scroll", checkScroll)]);
+        };
+      }
+    }
+    _vue.onMounted.call(void 0, setupObserver);
+    _vue.watch.call(void 0, 
+      () => [props.hasMore, props.disabled, props.threshold, props.direction, props.inverse],
+      setupObserver
+    );
+    _vue.onBeforeUnmount.call(void 0, () => {
+      _optionalChain([cleanupObserver, 'optionalCall', _8 => _8()]);
+    });
+    return () => {
+      const content = _optionalChain([slots, 'access', _9 => _9.default, 'optionalCall', _10 => _10()]);
+      const sentinel = props.hasMore ? _vue.h.call(void 0, "div", {
+        ref: sentinelRef,
+        class: _tigercatcore.infiniteScrollSentinelClasses,
+        "aria-hidden": "true",
+        style: "height:0;overflow:hidden"
+      }) : null;
+      const loader = props.loading ? _vue.h.call(void 0, 
+        "div",
+        {
+          class: _tigercatcore.infiniteScrollLoaderClasses,
+          role: "status",
+          "aria-live": "polite"
+        },
+        _nullishCoalesce(_optionalChain([slots, 'access', _11 => _11.loader, 'optionalCall', _12 => _12()]), () => ( props.loadingText))
+      ) : null;
+      const end = !props.hasMore && !props.loading ? _vue.h.call(void 0, "div", { class: _tigercatcore.infiniteScrollEndClasses }, _nullishCoalesce(_optionalChain([slots, 'access', _13 => _13.end, 'optionalCall', _14 => _14()]), () => ( props.endText))) : null;
+      const children = props.inverse ? [sentinel, loader, content, end] : [content, sentinel, loader, end];
+      return _vue.h.call(void 0, 
+        "div",
+        {
+          ref: containerRef,
+          class: containerClasses.value
+        },
+        children
+      );
+    };
+  }
+});
+var InfiniteScroll_default = InfiniteScroll;
+
+
+
+
+exports.InfiniteScroll = InfiniteScroll; exports.InfiniteScroll_default = InfiniteScroll_default;

package/dist/chunk-XSMDZOBF.js

@@ -0,0 +1,154 @@
+"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/ColorSwatch.ts
+var _vue = require('vue');
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var checkPathD = "M5 10.5 8 13.5 15 6.5";
+var ColorSwatch = _vue.defineComponent.call(void 0, {
+  name: "TigerColorSwatch",
+  props: {
+    modelValue: { type: String, default: void 0 },
+    disabled: { type: Boolean, default: false },
+    size: { type: String, default: "md" },
+    colors: { type: Array, default: void 0 },
+    groups: { type: Array, default: void 0 },
+    columns: { type: Number, default: 6 },
+    ariaLabel: { type: String, default: "Color swatches" }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(props, { attrs, emit }) {
+    const focusIndex = _vue.ref.call(void 0, -1);
+    const optionRefs = _vue.ref.call(void 0, []);
+    const normalizedGroups = _vue.computed.call(void 0, () => _tigercatcore.normalizeColorSwatchGroups.call(void 0, props.groups, props.colors));
+    const options = _vue.computed.call(void 0, () => _tigercatcore.flattenColorSwatchGroups.call(void 0, normalizedGroups.value));
+    const selectedIndex = _vue.computed.call(void 0, 
+      () => options.value.findIndex((option) => _tigercatcore.isColorSwatchSelected.call(void 0, option.value, props.modelValue))
+    );
+    const firstEnabledIndex = _vue.computed.call(void 0, () => options.value.findIndex((option) => !option.disabled));
+    const activeIndex = _vue.computed.call(void 0, 
+      () => selectedIndex.value >= 0 ? selectedIndex.value : firstEnabledIndex.value
+    );
+    function handleSelect(option) {
+      if (props.disabled || option.disabled) return;
+      emit("update:modelValue", option.value);
+      emit("change", option.value, option);
+    }
+    function handleKeydown(optionIndex, event) {
+      if (props.disabled) return;
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        const option = options.value[optionIndex];
+        if (option) handleSelect(option);
+        return;
+      }
+      const nextIndex = _tigercatcore.getNextColorSwatchIndex.call(void 0, 
+        options.value,
+        optionIndex,
+        event.key,
+        props.columns
+      );
+      if (nextIndex === -1 || nextIndex === optionIndex) return;
+      event.preventDefault();
+      focusIndex.value = nextIndex;
+      _vue.nextTick.call(void 0, () => _optionalChain([optionRefs, 'access', _ => _.value, 'access', _2 => _2[nextIndex], 'optionalAccess', _3 => _3.focus, 'call', _4 => _4()]));
+    }
+    return () => {
+      let flatIndex = 0;
+      optionRefs.value = [];
+      return _vue.h.call(void 0, 
+        "div",
+        {
+          class: _tigercatcore.classNames.call(void 0, _tigercatcore.colorSwatchBaseClasses, _tigercatcore.coerceClassValue.call(void 0, attrs.class)),
+          role: "radiogroup",
+          "aria-label": props.ariaLabel,
+          "aria-disabled": props.disabled || void 0
+        },
+        normalizedGroups.value.map(
+          (group, groupIndex) => _vue.h.call(void 0, 
+            "div",
+            { key: `${groupIndex}-${_nullishCoalesce(group.label, () => ( "group"))}`, class: _tigercatcore.colorSwatchGroupClasses },
+            [
+              group.label ? _vue.h.call(void 0, "div", { class: _tigercatcore.colorSwatchGroupLabelClasses }, group.label) : null,
+              _vue.h.call(void 0, 
+                "div",
+                {
+                  class: _tigercatcore.colorSwatchGridClasses,
+                  style: { gridTemplateColumns: `repeat(${props.columns}, minmax(0, 1fr))` }
+                },
+                group.colors.map((option) => {
+                  const optionIndex = flatIndex;
+                  flatIndex += 1;
+                  const selected = _tigercatcore.isColorSwatchSelected.call(void 0, option.value, props.modelValue);
+                  const optionDisabled = props.disabled || !!option.disabled;
+                  const tabIndex = !optionDisabled && optionIndex === (focusIndex.value >= 0 ? focusIndex.value : activeIndex.value) ? 0 : -1;
+                  return _vue.h.call(void 0, 
+                    "button",
+                    {
+                      key: `${option.groupIndex}-${option.index}-${option.value}`,
+                      ref: ((el) => {
+                        if (el instanceof HTMLElement) optionRefs.value[optionIndex] = el;
+                      }),
+                      type: "button",
+                      class: _tigercatcore.getColorSwatchButtonClasses.call(void 0, props.size, selected, optionDisabled),
+                      style: { backgroundColor: option.value },
+                      role: "radio",
+                      "aria-checked": selected,
+                      "aria-label": option.label,
+                      "aria-disabled": optionDisabled || void 0,
+                      tabindex: tabIndex,
+                      onFocus: () => {
+                        focusIndex.value = optionIndex;
+                      },
+                      onClick: () => handleSelect(option),
+                      onKeydown: (event) => handleKeydown(optionIndex, event)
+                    },
+                    selected ? _vue.h.call(void 0, 
+                      "span",
+                      { class: _tigercatcore.getColorSwatchCheckClasses.call(void 0, props.size), "aria-hidden": "true" },
+                      [
+                        _vue.h.call(void 0, 
+                          "svg",
+                          {
+                            viewBox: "0 0 20 20",
+                            fill: "none",
+                            stroke: "currentColor",
+                            strokeWidth: "2.5",
+                            class: "h-full w-full"
+                          },
+                          [
+                            _vue.h.call(void 0, "path", {
+                              d: checkPathD,
+                              strokeLinecap: "round",
+                              strokeLinejoin: "round"
+                            })
+                          ]
+                        )
+                      ]
+                    ) : void 0
+                  );
+                })
+              )
+            ]
+          )
+        )
+      );
+    };
+  }
+});
+var ColorSwatch_default = ColorSwatch;
+
+
+
+
+exports.ColorSwatch = ColorSwatch; exports.ColorSwatch_default = ColorSwatch_default;