@expcat/tigercat-react 1.0.7 → 1.2.0

package/dist/chunk-B5TUTAVX.js

@@ -0,0 +1,321 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 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.tsx
+
+
+
+
+
+
+
+
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var _jsxruntime = require('react/jsx-runtime');
+var Carousel = _react.forwardRef.call(void 0, 
+  ({
+    autoplay = false,
+    autoplaySpeed = 3e3,
+    dots = true,
+    dotPosition = "bottom",
+    effect = "scroll",
+    arrows = false,
+    infinite = true,
+    speed = 500,
+    initialSlide = 0,
+    pauseOnHover = true,
+    pauseOnFocus = true,
+    className,
+    style,
+    onChange,
+    onBeforeChange,
+    children
+  }, ref) => {
+    const [currentIndex, setCurrentIndex] = _react.useState.call(void 0, initialSlide);
+    const [isPaused, setIsPaused] = _react.useState.call(void 0, false);
+    const containerRef = _react.useRef.call(void 0, null);
+    const touchStartRef = _react.useRef.call(void 0, null);
+    const touchCurrentRef = _react.useRef.call(void 0, null);
+    const onChangeRef = _react.useRef.call(void 0, onChange);
+    const onBeforeChangeRef = _react.useRef.call(void 0, onBeforeChange);
+    onChangeRef.current = onChange;
+    onBeforeChangeRef.current = onBeforeChange;
+    const currentIndexRef = _react.useRef.call(void 0, currentIndex);
+    currentIndexRef.current = currentIndex;
+    const slides = _react.useMemo.call(void 0, () => {
+      return _react2.default.Children.toArray(children).filter((child) => _react2.default.isValidElement(child));
+    }, [children]);
+    const slideCount = slides.length;
+    const navigateByDirection = _react.useCallback.call(void 0, 
+      (direction) => {
+        const current = currentIndexRef.current;
+        const targetIndex = direction === "next" ? _tigercatcore.getNextSlideIndex.call(void 0, current, slideCount, infinite) : _tigercatcore.getPrevSlideIndex.call(void 0, current, slideCount, infinite);
+        if (targetIndex === current) return;
+        _optionalChain([onBeforeChangeRef, 'access', _2 => _2.current, 'optionalCall', _3 => _3(current, targetIndex)]);
+        setCurrentIndex(targetIndex);
+        _optionalChain([onChangeRef, 'access', _4 => _4.current, 'optionalCall', _5 => _5(targetIndex, current)]);
+      },
+      [slideCount, infinite]
+    );
+    const containerClasses = _react.useMemo.call(void 0, 
+      () => _tigercatcore.classNames.call(void 0, _tigercatcore.getCarouselContainerClasses.call(void 0, className)),
+      [className]
+    );
+    const trackClasses = _react.useMemo.call(void 0, () => {
+      return effect === "fade" ? _tigercatcore.carouselTrackFadeClasses : _tigercatcore.carouselTrackScrollClasses;
+    }, [effect]);
+    const trackStyle = _react.useMemo.call(void 0, () => {
+      if (effect === "scroll") {
+        return {
+          transform: _tigercatcore.getScrollTransform.call(void 0, currentIndex),
+          transitionDuration: `${speed}ms`
+        };
+      }
+      return {};
+    }, [effect, currentIndex, speed]);
+    const slideStyle = _react.useMemo.call(void 0, () => ({ transitionDuration: `${speed}ms` }), [speed]);
+    const getSlideClasses = (index) => {
+      const isActive = index === currentIndex;
+      if (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 dotsClasses = _react.useMemo.call(void 0, () => {
+      return _tigercatcore.getCarouselDotsClasses.call(void 0, dotPosition);
+    }, [dotPosition]);
+    const goTo = _react.useCallback.call(void 0, 
+      (index) => {
+        const clampedIndex = _tigercatcore.clampSlideIndex.call(void 0, index, slideCount);
+        if (clampedIndex === currentIndex) return;
+        _optionalChain([onBeforeChange, 'optionalCall', _6 => _6(currentIndex, clampedIndex)]);
+        const prevIndex = currentIndex;
+        setCurrentIndex(clampedIndex);
+        _optionalChain([onChange, 'optionalCall', _7 => _7(clampedIndex, prevIndex)]);
+      },
+      [currentIndex, slideCount, onBeforeChange, onChange]
+    );
+    const next = _react.useCallback.call(void 0, () => {
+      const nextIdx = _tigercatcore.getNextSlideIndex.call(void 0, currentIndex, slideCount, infinite);
+      if (nextIdx !== currentIndex) {
+        goTo(nextIdx);
+      }
+    }, [currentIndex, slideCount, infinite, goTo]);
+    const prev = _react.useCallback.call(void 0, () => {
+      const prevIdx = _tigercatcore.getPrevSlideIndex.call(void 0, currentIndex, slideCount, infinite);
+      if (prevIdx !== currentIndex) {
+        goTo(prevIdx);
+      }
+    }, [currentIndex, slideCount, infinite, goTo]);
+    _react.useImperativeHandle.call(void 0, 
+      ref,
+      () => ({
+        next,
+        prev,
+        goTo
+      }),
+      [next, prev, goTo]
+    );
+    _react.useEffect.call(void 0, () => {
+      if (!autoplay || isPaused) return;
+      const controller = _tigercatcore.createCarouselAutoplayController.call(void 0, {
+        interval: autoplaySpeed,
+        onAdvance: () => {
+          const curr = currentIndexRef.current;
+          const nextIdx = _tigercatcore.getNextSlideIndex.call(void 0, curr, slideCount, infinite);
+          if (nextIdx !== curr) {
+            _optionalChain([onBeforeChangeRef, 'access', _8 => _8.current, 'optionalCall', _9 => _9(curr, nextIdx)]);
+            setCurrentIndex(nextIdx);
+            _optionalChain([onChangeRef, 'access', _10 => _10.current, 'optionalCall', _11 => _11(nextIdx, curr)]);
+          }
+        }
+      });
+      controller.start();
+      return () => controller.stop();
+    }, [autoplay, autoplaySpeed, isPaused, slideCount, infinite]);
+    _react.useEffect.call(void 0, () => {
+      const container = containerRef.current;
+      if (!container || slideCount <= 1) return;
+      const resetTouchGesture = () => {
+        touchStartRef.current = null;
+        touchCurrentRef.current = null;
+      };
+      const handleTouchStart = (event) => {
+        const point = _tigercatcore.getCarouselTouchPoint.call(void 0, event.touches);
+        touchStartRef.current = point;
+        touchCurrentRef.current = point;
+      };
+      const handleTouchMove = (event) => {
+        if (!touchStartRef.current) return;
+        const point = _tigercatcore.getCarouselTouchPoint.call(void 0, event.touches);
+        if (point) {
+          touchCurrentRef.current = point;
+        }
+      };
+      const handleTouchEnd = (event) => {
+        const direction = _tigercatcore.resolveCarouselSwipeDirection.call(void 0, 
+          touchStartRef.current,
+          _nullishCoalesce(_tigercatcore.getCarouselTouchPoint.call(void 0, event.changedTouches), () => ( touchCurrentRef.current))
+        );
+        resetTouchGesture();
+        if (direction) {
+          navigateByDirection(direction);
+        }
+      };
+      const handleTouchCancel = () => {
+        resetTouchGesture();
+      };
+      container.addEventListener("touchstart", handleTouchStart, { passive: true });
+      container.addEventListener("touchmove", handleTouchMove, { passive: true });
+      container.addEventListener("touchend", handleTouchEnd, { passive: true });
+      container.addEventListener("touchcancel", handleTouchCancel, { passive: true });
+      return () => {
+        resetTouchGesture();
+        container.removeEventListener("touchstart", handleTouchStart);
+        container.removeEventListener("touchmove", handleTouchMove);
+        container.removeEventListener("touchend", handleTouchEnd);
+        container.removeEventListener("touchcancel", handleTouchCancel);
+      };
+    }, [navigateByDirection, slideCount]);
+    const handleMouseEnter = _react.useCallback.call(void 0, () => {
+      if (pauseOnHover && autoplay) {
+        setIsPaused(true);
+      }
+    }, [pauseOnHover, autoplay]);
+    const handleMouseLeave = _react.useCallback.call(void 0, () => {
+      if (pauseOnHover && autoplay) {
+        setIsPaused(false);
+      }
+    }, [pauseOnHover, autoplay]);
+    const handleFocus = _react.useCallback.call(void 0, () => {
+      if (pauseOnFocus && autoplay) {
+        setIsPaused(true);
+      }
+    }, [pauseOnFocus, autoplay]);
+    const handleBlur = _react.useCallback.call(void 0, () => {
+      if (pauseOnFocus && autoplay) {
+        setIsPaused(false);
+      }
+    }, [pauseOnFocus, autoplay]);
+    const isPrevArrowDisabled = _react.useMemo.call(void 0, 
+      () => _tigercatcore.isPrevDisabled.call(void 0, currentIndex, slideCount, infinite),
+      [currentIndex, slideCount, infinite]
+    );
+    const isNextArrowDisabled = _react.useMemo.call(void 0, 
+      () => _tigercatcore.isNextDisabled.call(void 0, currentIndex, slideCount, infinite),
+      [currentIndex, slideCount, infinite]
+    );
+    const renderArrowButton = (type, disabled, onClick, path) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "button",
+      {
+        type: "button",
+        className: _tigercatcore.getCarouselArrowClasses.call(void 0, type, disabled),
+        onClick,
+        disabled,
+        "aria-label": type === "prev" ? "Previous slide" : "Next slide",
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            className: "w-6 h-6",
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: path })
+          }
+        )
+      }
+    );
+    const renderArrows = () => {
+      if (!arrows) return null;
+      return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+        renderArrowButton("prev", isPrevArrowDisabled, prev, _tigercatcore.carouselPrevArrowPath),
+        renderArrowButton("next", isNextArrowDisabled, next, _tigercatcore.carouselNextArrowPath)
+      ] });
+    };
+    const renderDots = () => {
+      if (!dots || slideCount <= 1) return null;
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: dotsClasses, role: "tablist", "aria-label": "Carousel navigation", children: slides.map((_, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "button",
+        {
+          type: "button",
+          className: _tigercatcore.getCarouselDotClasses.call(void 0, index === currentIndex),
+          onClick: () => goTo(index),
+          "aria-label": `Go to slide ${index + 1}`,
+          "aria-current": index === currentIndex ? "true" : "false"
+        },
+        index
+      )) });
+    };
+    const renderSlides = () => {
+      const slideElements = slides.map((slide, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "div",
+        {
+          className: getSlideClasses(index),
+          style: effect === "fade" ? slideStyle : void 0,
+          role: "group",
+          "aria-roledescription": "slide",
+          "aria-label": `Slide ${index + 1} of ${slideCount}`,
+          "aria-hidden": index !== currentIndex,
+          children: slide
+        },
+        index
+      ));
+      if (effect === "fade") {
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.classNames.call(void 0, trackClasses, "h-full"), children: slideElements });
+      }
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: trackClasses, style: trackStyle, children: slideElements });
+    };
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        ref: containerRef,
+        className: containerClasses,
+        style,
+        role: "region",
+        "aria-roledescription": "carousel",
+        "aria-label": "Image carousel",
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        children: [
+          renderSlides(),
+          renderArrows(),
+          renderDots()
+        ]
+      }
+    );
+  }
+);
+Carousel.displayName = "Carousel";
+
+
+
+exports.Carousel = Carousel;

package/dist/{chunk-AYDTXJOR.mjs → chunk-BBAYDH2M.mjs}

@@ -1,10 +1,26 @@
-import { Modal } from './chunk-BJ2GUKPU.mjs';
-import { ImageCropper } from './chunk-2EOXY2LP.mjs';
-import { Button } from './chunk-3KMKMAE3.mjs';
-import { useRef, useState, useCallback, useMemo } from 'react';
-import { classNames, cropUploadTriggerDisabledClasses, cropUploadTriggerClasses, uploadPlusIconPath } from '@expcat/tigercat-core';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import {
+  Modal
+} from "./chunk-HWG4HNQH.mjs";
+import {
+  ImageCropper
+} from "./chunk-SY23FAXK.mjs";
+import {
+  Button
+} from "./chunk-GKJNQUTW.mjs";
 
+// src/components/CropUpload.tsx
+import { useState, useRef, useCallback, useMemo } from "react";
+import {
+  classNames,
+  cropUploadTriggerClasses,
+  cropUploadTriggerDisabledClasses,
+  uploadPlusIconPath,
+  validateUploadFile,
+  readFileAsDataUrl,
+  getCropperResult,
+  isActivationKey
+} from "@expcat/tigercat-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var CropUpload = ({
   accept = "image/*",
   disabled = false,
@@ -30,17 +46,16 @@ var CropUpload = ({
     (e) => {
       const file = e.target.files?.[0];
       if (!file) return;
-      if (maxSize && file.size > maxSize) {
-        onError?.(new Error(`File size exceeds maximum of ${maxSize} bytes`));
+      const sizeError = validateUploadFile(file, maxSize);
+      if (sizeError) {
+        onError?.(sizeError);
         e.target.value = "";
         return;
       }
-      const reader = new FileReader();
-      reader.onload = (ev) => {
-        setImageSrc(ev.target?.result);
+      readFileAsDataUrl(file).then((url) => {
+        setImageSrc(url);
         setModalVisible(true);
-      };
-      reader.readAsDataURL(file);
+      }).catch((err) => onError?.(err));
       e.target.value = "";
     },
     [maxSize, onError]
@@ -49,9 +64,13 @@ var CropUpload = ({
     if (!cropperRef.current) return;
     setCropping(true);
     try {
-      const result = await cropperRef.current.getCropResult();
-      onCropComplete?.(result);
-      setModalVisible(false);
+      const result = await getCropperResult(
+        cropperRef.current
+      );
+      if (result) {
+        onCropComplete?.(result);
+        setModalVisible(false);
+      }
     } catch (err) {
       onError?.(err);
     } finally {
@@ -68,7 +87,7 @@ var CropUpload = ({
   );
   const handleKeyDown = useCallback(
     (e) => {
-      if (e.key === "Enter" || e.key === " ") {
+      if (isActivationKey(e)) {
         e.preventDefault();
         handleTriggerClick();
       }
@@ -139,4 +158,6 @@ var CropUpload = ({
   ] });
 };
 
-export { CropUpload };
+export {
+  CropUpload
+};

package/dist/chunk-BCQQYERG.js

@@ -0,0 +1,278 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 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; }
+
+var _chunkUPPHGL64js = require('./chunk-UPPHGL64.js');
+
+// src/components/FormItem.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var _jsxruntime = require('react/jsx-runtime');
+function hasRequiredRule(maybeRules) {
+  if (!maybeRules) return false;
+  const ruleArr = Array.isArray(maybeRules) ? maybeRules : [maybeRules];
+  return ruleArr.some((rule) => !!rule && typeof rule === "object" && !!rule.required);
+}
+function mergeAriaDescribedBy(existing, next) {
+  if (!existing) return next;
+  if (!next) return existing;
+  const parts = new Set(
+    `${existing} ${next}`.split(" ").map((s) => s.trim()).filter(Boolean)
+  );
+  return Array.from(parts).join(" ");
+}
+var FIELD_CLASSES = _tigercatcore.getFormItemFieldClasses.call(void 0, );
+var ASTERISK_CLASSES = _tigercatcore.getFormItemAsteriskClasses.call(void 0, );
+var FormItem = ({
+  name,
+  label,
+  labelWidth,
+  required,
+  rules,
+  error: controlledError,
+  showMessage = true,
+  errorDisplayMode = "inline",
+  size,
+  children,
+  className,
+  condition
+}) => {
+  const formContext = _chunkUPPHGL64js.useFormContext.call(void 0, );
+  const [errorMessage, setErrorMessage] = _react.useState.call(void 0, "");
+  const [shakeTrigger, setShakeTrigger] = _react.useState.call(void 0, 0);
+  const prevFormErrorRef = _react.useRef.call(void 0, "");
+  const reactId = _react.useId.call(void 0, );
+  const baseId = `tiger-form-item-${reactId}`;
+  const labelId = `${baseId}-label`;
+  const fieldId = `${baseId}-field`;
+  const errorId = `${baseId}-error`;
+  const actualSize = size || _optionalChain([formContext, 'optionalAccess', _ => _.size]) || "md";
+  const labelPosition = _optionalChain([formContext, 'optionalAccess', _2 => _2.labelPosition]) || "right";
+  const labelAlign = _optionalChain([formContext, 'optionalAccess', _3 => _3.labelAlign]) || "right";
+  const conditionState = _react.useMemo.call(void 0, () => {
+    if (!name || !formContext) {
+      return { shown: true, disabled: false, required: false };
+    }
+    return formContext.getFieldConditionState(name, condition);
+  }, [name, formContext, condition]);
+  const actualLabelWidth = _react.useMemo.call(void 0, () => {
+    const width = labelWidth || _optionalChain([formContext, 'optionalAccess', _4 => _4.labelWidth]);
+    if (typeof width === "number") {
+      return `${width}px`;
+    }
+    return width;
+  }, [labelWidth, _optionalChain([formContext, 'optionalAccess', _5 => _5.labelWidth])]);
+  const showRequiredAsterisk = _react.useMemo.call(void 0, () => {
+    if (required !== void 0) {
+      return required;
+    }
+    if (rules) {
+      return hasRequiredRule(rules);
+    }
+    if (name && _optionalChain([formContext, 'optionalAccess', _6 => _6.rules])) {
+      const fieldRules = formContext.rules[name];
+      if (fieldRules) {
+        return hasRequiredRule(fieldRules);
+      }
+    }
+    return false;
+  }, [required, rules, name, _optionalChain([formContext, 'optionalAccess', _7 => _7.rules])]);
+  const isRequired = _react.useMemo.call(void 0, 
+    () => (showRequiredAsterisk || conditionState.required) && (_nullishCoalesce(_optionalChain([formContext, 'optionalAccess', _8 => _8.showRequiredAsterisk]), () => ( true))),
+    [showRequiredAsterisk, conditionState.required, _optionalChain([formContext, 'optionalAccess', _9 => _9.showRequiredAsterisk])]
+  );
+  _react.useEffect.call(void 0, () => {
+    if (name && _optionalChain([formContext, 'optionalAccess', _10 => _10.errorsByField])) {
+      const error = formContext.errorsByField[name] || "";
+      setErrorMessage(error);
+      if (error && error !== prevFormErrorRef.current) {
+        setShakeTrigger((prev) => prev + 1);
+      }
+      prevFormErrorRef.current = error;
+    }
+  }, [name, _optionalChain([formContext, 'optionalAccess', _11 => _11.errorsByField])]);
+  _react.useEffect.call(void 0, () => {
+    if (controlledError !== void 0) {
+      setErrorMessage(controlledError);
+    }
+  }, [controlledError]);
+  _react.useEffect.call(void 0, () => {
+    if (!name || !formContext) {
+      return;
+    }
+    if (rules) {
+      formContext.registerFieldRules(name, rules);
+    }
+    formContext.registerFieldCondition(name, condition);
+    return () => {
+      formContext.registerFieldRules(name, void 0);
+      formContext.registerFieldCondition(name, void 0);
+    };
+  }, [name, rules, condition, formContext]);
+  const handleBlur = _react.useCallback.call(void 0, () => {
+    if (name && formContext) {
+      formContext.validateField(name, rules, "blur");
+    }
+  }, [name, formContext, rules]);
+  const handleChange = _react.useCallback.call(void 0, () => {
+    if (name && formContext) {
+      formContext.validateField(name, rules, "change");
+    }
+  }, [name, formContext, rules]);
+  const hasError = !!errorMessage;
+  const describedById = _react.useMemo.call(void 0, 
+    () => showMessage && hasError ? errorId : void 0,
+    [showMessage, hasError, errorId]
+  );
+  const onlyChild = _react.useMemo.call(void 0, () => {
+    const count = _react2.default.Children.count(children);
+    if (count !== 1) {
+      return null;
+    }
+    return _nullishCoalesce(_react2.default.Children.toArray(children)[0], () => ( null));
+  }, [children]);
+  const isClonableChild = _react2.default.isValidElement(onlyChild);
+  const isNativeElement = isClonableChild && typeof onlyChild.type === "string";
+  const childId = isClonableChild ? onlyChild.props.id : void 0;
+  const effectiveFieldId = _nullishCoalesce(childId, () => ( fieldId));
+  const enhancedChild = _react.useMemo.call(void 0, () => {
+    if (!isClonableChild) {
+      return children;
+    }
+    const nextProps = {
+      id: effectiveFieldId,
+      "aria-invalid": hasError ? true : onlyChild.props["aria-invalid"],
+      "aria-required": isRequired ? true : onlyChild.props["aria-required"],
+      disabled: conditionState.disabled || _optionalChain([formContext, 'optionalAccess', _12 => _12.disabled]) ? true : onlyChild.props.disabled,
+      "aria-describedby": mergeAriaDescribedBy(onlyChild.props["aria-describedby"], describedById),
+      onBlur: (event) => {
+        _optionalChain([onlyChild, 'access', _13 => _13.props, 'access', _14 => _14.onBlur, 'optionalCall', _15 => _15(event)]);
+        handleBlur();
+      },
+      onChange: (event) => {
+        _optionalChain([onlyChild, 'access', _16 => _16.props, 'access', _17 => _17.onChange, 'optionalCall', _18 => _18(event)]);
+        handleChange();
+      }
+    };
+    if (!isNativeElement) {
+      nextProps.status = hasError ? "error" : onlyChild.props.status;
+      nextProps.errorMessage = hasError && !showMessage ? errorMessage : onlyChild.props.errorMessage;
+      nextProps._shakeTrigger = hasError ? shakeTrigger : void 0;
+    }
+    return _react2.default.cloneElement(onlyChild, nextProps);
+  }, [
+    isClonableChild,
+    children,
+    onlyChild,
+    effectiveFieldId,
+    hasError,
+    errorMessage,
+    showMessage,
+    shakeTrigger,
+    isRequired,
+    conditionState.disabled,
+    _optionalChain([formContext, 'optionalAccess', _19 => _19.disabled]),
+    isNativeElement,
+    describedById,
+    handleBlur,
+    handleChange
+  ]);
+  const formItemClasses = _react.useMemo.call(void 0, 
+    () => _tigercatcore.classNames.call(void 0, 
+      _tigercatcore.getFormItemClasses.call(void 0, {
+        size: actualSize,
+        labelPosition,
+        hasError,
+        disabled: _optionalChain([formContext, 'optionalAccess', _20 => _20.disabled]) || conditionState.disabled
+      }),
+      className
+    ),
+    [actualSize, labelPosition, hasError, _optionalChain([formContext, 'optionalAccess', _21 => _21.disabled]), conditionState.disabled, className]
+  );
+  const labelClasses = _react.useMemo.call(void 0, 
+    () => _tigercatcore.getFormItemLabelClasses.call(void 0, {
+      size: actualSize,
+      labelAlign,
+      labelPosition,
+      isRequired
+    }),
+    [actualSize, labelAlign, labelPosition, isRequired]
+  );
+  const labelStyles = _react.useMemo.call(void 0, () => {
+    if (labelPosition === "top") {
+      return {};
+    }
+    return actualLabelWidth ? { width: actualLabelWidth } : {};
+  }, [labelPosition, actualLabelWidth]);
+  const errorClasses = _react.useMemo.call(void 0, 
+    () => _tigercatcore.classNames.call(void 0, _tigercatcore.getFormItemErrorClasses.call(void 0, actualSize), hasError && "opacity-100"),
+    [actualSize, hasError]
+  );
+  const contentClasses = _react.useMemo.call(void 0, 
+    () => _tigercatcore.classNames.call(void 0, 
+      _tigercatcore.getFormItemContentClasses.call(void 0, labelPosition),
+      errorDisplayMode === "popup" && "relative"
+    ),
+    [labelPosition, errorDisplayMode]
+  );
+  if (!conditionState.shown) {
+    return null;
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: formItemClasses, children: [
+    label && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "label",
+      {
+        id: labelId,
+        className: labelClasses,
+        style: labelStyles,
+        htmlFor: isClonableChild ? effectiveFieldId : void 0,
+        children: [
+          isRequired && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: ASTERISK_CLASSES, children: "*" }),
+          label
+        ]
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: contentClasses, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "div",
+        {
+          className: FIELD_CLASSES,
+          role: "group",
+          "aria-labelledby": label ? labelId : void 0,
+          "aria-describedby": describedById,
+          "aria-invalid": hasError ? true : void 0,
+          onBlur: isClonableChild ? void 0 : handleBlur,
+          onChange: isClonableChild ? void 0 : handleChange,
+          children: enhancedChild
+        }
+      ),
+      showMessage && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "div",
+        {
+          id: hasError ? errorId : void 0,
+          role: hasError ? "alert" : void 0,
+          className: errorDisplayMode === "block" ? _tigercatcore.classNames.call(void 0, 
+            "mt-1 p-2 rounded bg-red-50 border border-red-200 text-red-600 text-sm",
+            !hasError && "hidden"
+          ) : errorDisplayMode === "popup" ? _tigercatcore.classNames.call(void 0, 
+            "absolute z-10 mt-1 px-2 py-1 rounded bg-red-600 text-white text-xs shadow-lg",
+            !hasError && "hidden"
+          ) : errorClasses,
+          "aria-hidden": hasError ? void 0 : true,
+          children: hasError ? errorMessage : ""
+        }
+      )
+    ] })
+  ] });
+};
+FormItem.displayName = "TigerFormItem";
+
+
+
+exports.FormItem = FormItem;