@expcat/tigercat-react 0.3.0 → 0.3.69

package/dist/{chunk-KPZTGRNA.js → chunk-7Z64GEMN.js}

@@ -19,8 +19,8 @@ var Thumb = react.memo(
     ariaLabel,
     ariaLabelledby,
     ariaDescribedby,
-    thumbClassesCombined,
-    tooltipClassesCombined,
+    thumbClasses,
+    tooltipClasses,
     setShowTooltip,
     handleStart,
     handleKeyDown,
@@ -31,7 +31,7 @@ var Thumb = react.memo(
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: thumbClassesCombined,
+        className: thumbClasses,
         style: { left: `${left}%` },
         tabIndex: disabled ? -1 : 0,
         role: "slider",
@@ -52,7 +52,7 @@ var Thumb = react.memo(
           if (!isDragging) setShowTooltip(false);
         },
         onKeyDown: (e) => handleKeyDown(e, value, thumbType),
-        children: showThumbTooltip && tooltip && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tooltipClassesCombined, children: value })
+        children: showThumbTooltip && tooltip && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tooltipClasses, children: value })
       }
     );
   }
@@ -93,10 +93,6 @@ var Slider = ({
       setInternalValue(controlledValue);
     }
   }, [controlledValue]);
-  const normalizeValue = react.useCallback(
-    (val) => tigercatCore.sliderNormalizeValue(val, min, max, step),
-    [min, max, step]
-  );
   const getPercentage = react.useCallback(
     (val) => tigercatCore.sliderGetPercentage(val, min, max),
     [min, max]
@@ -105,11 +101,9 @@ var Slider = ({
     (clientX) => {
       if (!trackRef.current) return min;
       const rect = trackRef.current.getBoundingClientRect();
-      const percentage = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
-      const rawValue = min + percentage * (max - min);
-      return normalizeValue(rawValue);
+      return tigercatCore.sliderGetValueFromPosition(clientX - rect.left, rect.width, min, max, step);
     },
-    [min, max, normalizeValue]
+    [min, max, step]
   );
   const updateValue = react.useCallback(
     (newValue) => {
@@ -157,13 +151,16 @@ var Slider = ({
       };
     }
   }, [isDragging, handleMove, handleEnd]);
-  const handleStart = (event, thumb) => {
-    if (disabled) return;
-    event.preventDefault();
-    setIsDragging(true);
-    setActiveThumb(thumb);
-    if (tooltip) setShowTooltip(true);
-  };
+  const handleStart = react.useCallback(
+    (event, thumb) => {
+      if (disabled) return;
+      event.preventDefault();
+      setIsDragging(true);
+      setActiveThumb(thumb);
+      if (tooltip) setShowTooltip(true);
+    },
+    [disabled, tooltip]
+  );
   const handleTrackClick = (e) => {
     if (disabled) return;
     const newValue = getValueFromPosition(e.clientX);
@@ -180,34 +177,36 @@ var Slider = ({
       updateValue(newValue);
     }
   };
-  const handleKeyDown = (e, value, thumbType) => {
-    if (disabled) return;
-    const newValue = tigercatCore.sliderGetKeyboardValue(e.key, value, min, max, step);
-    if (newValue === null) return;
-    e.preventDefault();
-    if (range && Array.isArray(internalValue)) {
-      const [minVal, maxVal] = internalValue;
-      if (thumbType === "min") {
-        updateValue([Math.min(newValue, maxVal), maxVal]);
-      } else if (thumbType === "max") {
-        updateValue([minVal, Math.max(newValue, minVal)]);
+  const handleKeyDown = react.useCallback(
+    (e, value, thumbType) => {
+      if (disabled) return;
+      const newValue = tigercatCore.sliderGetKeyboardValue(e.key, value, min, max, step);
+      if (newValue === null) return;
+      e.preventDefault();
+      if (range && Array.isArray(internalValue)) {
+        const [minVal, maxVal] = internalValue;
+        if (thumbType === "min") {
+          updateValue([Math.min(newValue, maxVal), maxVal]);
+        } else if (thumbType === "max") {
+          updateValue([minVal, Math.max(newValue, minVal)]);
+        }
+      } else {
+        updateValue(newValue);
       }
-    } else {
-      updateValue(newValue);
+    },
+    [disabled, min, max, step, range, internalValue, updateValue]
+  );
+  const trackClasses = react.useMemo(() => tigercatCore.getSliderTrackClasses(size, disabled), [size, disabled]);
+  const rangeStyles = react.useMemo(() => {
+    if (range && Array.isArray(internalValue)) {
+      const left = getPercentage(internalValue[0]);
+      return { left: `${left}%`, width: `${getPercentage(internalValue[1]) - left}%` };
     }
-  };
-  const trackStyles = tigercatCore.getSliderTrackClasses(size, disabled);
-  const rangeStyles = range && Array.isArray(internalValue) ? {
-    left: `${getPercentage(internalValue[0])}%`,
-    width: `${getPercentage(internalValue[1]) - getPercentage(internalValue[0])}%`
-  } : {
-    left: "0%",
-    width: `${getPercentage(
-      typeof internalValue === "number" ? internalValue : internalValue[0]
-    )}%`
-  };
-  const thumbClassesCombined = tigercatCore.getSliderThumbClasses(size, disabled);
-  const tooltipClassesCombined = tigercatCore.getSliderTooltipClasses(size);
+    const val = typeof internalValue === "number" ? internalValue : internalValue[0];
+    return { left: "0%", width: `${getPercentage(val)}%` };
+  }, [range, internalValue, getPercentage]);
+  const thumbClasses = react.useMemo(() => tigercatCore.getSliderThumbClasses(size, disabled), [size, disabled]);
+  const tooltipClasses = react.useMemo(() => tigercatCore.getSliderTooltipClasses(size), [size]);
   const renderMarks = () => {
     if (!marks) return null;
     const marksObj = typeof marks === "boolean" ? {} : marks;
@@ -231,7 +230,7 @@ var Slider = ({
       className: tigercatCore.classNames(tigercatCore.sliderBaseClasses, disabled && "cursor-not-allowed", className),
       ...divProps,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: trackRef, className: trackStyles, onClick: handleTrackClick, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: trackRef, className: trackClasses, onClick: handleTrackClick, children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.sliderRangeClasses, style: rangeStyles }),
           range && Array.isArray(internalValue) ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -244,14 +243,13 @@ var Slider = ({
                 showTooltip,
                 activeThumb,
                 isDragging,
-                size,
                 min,
                 max,
                 ariaLabel: ariaLabel ? `${ariaLabel} (min)` : "Minimum value",
                 ariaLabelledby,
                 ariaDescribedby,
-                thumbClassesCombined,
-                tooltipClassesCombined,
+                thumbClasses,
+                tooltipClasses,
                 setShowTooltip,
                 handleStart,
                 handleKeyDown,
@@ -268,14 +266,13 @@ var Slider = ({
                 showTooltip,
                 activeThumb,
                 isDragging,
-                size,
                 min,
                 max,
                 ariaLabel: ariaLabel ? `${ariaLabel} (max)` : "Maximum value",
                 ariaLabelledby,
                 ariaDescribedby,
-                thumbClassesCombined,
-                tooltipClassesCombined,
+                thumbClasses,
+                tooltipClasses,
                 setShowTooltip,
                 handleStart,
                 handleKeyDown,
@@ -291,14 +288,13 @@ var Slider = ({
               showTooltip,
               activeThumb,
               isDragging,
-              size,
               min,
               max,
               ariaLabel,
               ariaLabelledby,
               ariaDescribedby,
-              thumbClassesCombined,
-              tooltipClassesCombined,
+              thumbClasses,
+              tooltipClasses,
               setShowTooltip,
               handleStart,
               handleKeyDown,

package/dist/{chunk-3WPKVV4N.js → chunk-A3PYG3D6.js}

@@ -1,43 +1,10 @@
 'use strict';
 
-var chunkQFVE7GKD_js = require('./chunk-QFVE7GKD.js');
+var chunkIBYIPXIO_js = require('./chunk-IBYIPXIO.js');
 var react = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
 
-function getMenuButtonsWithin(menuEl) {
-  return Array.from(
-    menuEl.querySelectorAll('button[data-tiger-menuitem="true"]')
-  ).filter((el) => !el.disabled);
-}
-function roveFocus(current, next) {
-  const menuEl = current.closest('ul[role="menu"]');
-  if (!menuEl) {
-    next.focus();
-    return;
-  }
-  const items = getMenuButtonsWithin(menuEl);
-  items.forEach((el) => {
-    el.tabIndex = el === next ? 0 : -1;
-  });
-  next.focus();
-}
-function moveFocus(current, delta) {
-  const menuEl = current.closest('ul[role="menu"]');
-  if (!menuEl) return;
-  const items = getMenuButtonsWithin(menuEl);
-  const currentIndex = items.indexOf(current);
-  if (currentIndex < 0) return;
-  const nextIndex = (currentIndex + delta + items.length) % items.length;
-  roveFocus(current, items[nextIndex]);
-}
-function focusEdge(current, edge) {
-  const menuEl = current.closest('ul[role="menu"]');
-  if (!menuEl) return;
-  const items = getMenuButtonsWithin(menuEl);
-  if (items.length === 0) return;
-  roveFocus(current, edge === "start" ? items[0] : items[items.length - 1]);
-}
 var MenuItem = ({
   itemKey,
   disabled = false,
@@ -47,7 +14,7 @@ var MenuItem = ({
   level = 0,
   collapsed: collapsedOverride
 }) => {
-  const menuContext = chunkQFVE7GKD_js.useMenuContext();
+  const menuContext = chunkIBYIPXIO_js.useMenuContext();
   if (!menuContext) {
     console.warn("MenuItem must be used within Menu component");
   }
@@ -74,22 +41,22 @@ var MenuItem = ({
       const prevKey = isHorizontalRoot ? "ArrowLeft" : "ArrowUp";
       if (event.key === nextKey) {
         event.preventDefault();
-        moveFocus(current, 1);
+        tigercatCore.moveFocusInMenu(current, 1);
         return;
       }
       if (event.key === prevKey) {
         event.preventDefault();
-        moveFocus(current, -1);
+        tigercatCore.moveFocusInMenu(current, -1);
         return;
       }
       if (event.key === "Home") {
         event.preventDefault();
-        focusEdge(current, "start");
+        tigercatCore.focusMenuEdge(current, "start");
         return;
       }
       if (event.key === "End") {
         event.preventDefault();
-        focusEdge(current, "end");
+        tigercatCore.focusMenuEdge(current, "end");
         return;
       }
       if (event.key === "Enter" || event.key === " ") {

package/dist/chunk-AQ72JVUG.js

@@ -0,0 +1,41 @@
+'use strict';
+
+var chunkXLVEI7GS_js = require('./chunk-XLVEI7GS.js');
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+var Col = ({
+  span = 24,
+  offset = 0,
+  order,
+  flex,
+  children,
+  className,
+  style,
+  ...divProps
+}) => {
+  const { gutter } = react.useContext(chunkXLVEI7GS_js.RowContext);
+  const isFlexSpanMode = flex !== void 0 && span === 0;
+  const colClasses = react.useMemo(
+    () => tigercatCore.classNames(
+      isFlexSpanMode ? "" : tigercatCore.getSpanClasses(span),
+      tigercatCore.getOffsetClasses(offset),
+      tigercatCore.getOrderClasses(order),
+      tigercatCore.getFlexClasses(flex),
+      className
+    ),
+    [isFlexSpanMode, span, offset, order, flex, className]
+  );
+  const mergedStyle = react.useMemo(
+    () => ({
+      ...tigercatCore.getGutterStyles(gutter || 0).colStyle,
+      ...tigercatCore.getColMergedStyleVars(isFlexSpanMode ? void 0 : span, offset, order, flex),
+      ...style
+    }),
+    [gutter, isFlexSpanMode, span, offset, order, flex, style]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: colClasses, style: mergedStyle, ...divProps, children });
+};
+
+exports.Col = Col;

package/dist/{chunk-P4EFJIXU.mjs → chunk-AUP3PMDD.mjs}

@@ -1,5 +1,5 @@
-import { classNames, getStepsContainerClasses, calculateStepStatus, getStepItemClasses, getStepIconClasses, getStepTailClasses, getStepContentClasses, getStepTitleClasses, getStepDescriptionClasses, stepFinishIconViewBox, stepFinishIconSvgClasses, stepFinishIconPathD, stepFinishIconPathStrokeWidth, stepFinishIconPathStrokeLinejoin, stepFinishIconPathStrokeLinecap } from '@expcat/tigercat-core';
-import React, { createContext, useContext } from 'react';
+import { classNames, getStepsContainerClasses, calculateStepStatus, getStepItemClasses, getStepIconClasses, getStepTailClasses, getStepContentClasses, getStepTitleClasses, getStepDescriptionClasses, stepFinishChar } from '@expcat/tigercat-core';
+import React, { createContext, useContext, useMemo, useCallback } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/components/StepsItem.tsx
@@ -20,14 +20,15 @@ var Steps = ({
   children,
   ...props
 }) => {
-  const containerClasses = classNames(getStepsContainerClasses(direction), className);
-  const handleStepClick = (index) => {
-    if (!clickable) {
-      return;
-    }
+  const containerClasses = useMemo(
+    () => classNames(getStepsContainerClasses(direction), className),
+    [direction, className]
+  );
+  const handleStepClick = useCallback((index) => {
+    if (!clickable) return;
     onChange?.(index);
-  };
-  const contextValue = {
+  }, [clickable, onChange]);
+  const contextValue = useMemo(() => ({
     current,
     status,
     direction,
@@ -35,7 +36,7 @@ var Steps = ({
     simple,
     clickable,
     handleStepClick: clickable ? handleStepClick : void 0
-  };
+  }), [current, status, direction, size, simple, clickable, handleStepClick]);
   const totalCount = React.Children.count(children);
   const stepsWithProps = React.Children.map(children, (child, index) => {
     if (React.isValidElement(child) && child.type === StepsItem) {
@@ -46,10 +47,7 @@ var Steps = ({
     }
     return child;
   });
-  const mergedStyle = {
-    ...style ?? {}
-  };
-  return /* @__PURE__ */ jsx(StepsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("ol", { ...props, className: containerClasses, style: mergedStyle, children: stepsWithProps }) });
+  return /* @__PURE__ */ jsx(StepsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("ol", { ...props, className: containerClasses, style, children: stepsWithProps }) });
 };
 var StepsItem = ({
   title,
@@ -79,18 +77,16 @@ var StepsItem = ({
   );
   const isClickable = !!stepsContext.handleStepClick && !disabled;
   const itemClasses = classNames(
-    getStepItemClasses(stepsContext.direction, isLast, stepsContext.simple),
+    getStepItemClasses(stepsContext.direction, isLast),
     className
   );
   const iconClasses = getStepIconClasses(stepStatus, stepsContext.size, stepsContext.simple, !!icon);
-  const tailClasses = getStepTailClasses(stepsContext.direction, stepStatus, isLast);
-  const contentClasses = getStepContentClasses(stepsContext.direction, stepsContext.simple);
+  const tailClasses = getStepTailClasses(stepsContext.direction, stepStatus, isLast, stepsContext.size, stepsContext.simple);
+  const contentClasses = getStepContentClasses(stepsContext.direction);
   const titleClasses = getStepTitleClasses(stepStatus, stepsContext.size, isClickable);
   const descriptionClasses = getStepDescriptionClasses(stepStatus, stepsContext.size);
-  const handleClick = (_event) => {
-    if (!isClickable) {
-      return;
-    }
+  const handleClick = () => {
+    if (!isClickable) return;
     stepsContext.handleStepClick?.(stepIndex);
   };
   const renderIcon = () => {
@@ -98,26 +94,7 @@ var StepsItem = ({
       return /* @__PURE__ */ jsx("div", { className: iconClasses, children: icon });
     }
     if (stepStatus === "finish") {
-      return /* @__PURE__ */ jsx("div", { className: iconClasses, children: /* @__PURE__ */ jsx(
-        "svg",
-        {
-          className: stepFinishIconSvgClasses,
-          fill: "none",
-          stroke: "currentColor",
-          viewBox: stepFinishIconViewBox,
-          "aria-hidden": "true",
-          focusable: "false",
-          children: /* @__PURE__ */ jsx(
-            "path",
-            {
-              strokeLinecap: stepFinishIconPathStrokeLinecap,
-              strokeLinejoin: stepFinishIconPathStrokeLinejoin,
-              strokeWidth: stepFinishIconPathStrokeWidth,
-              d: stepFinishIconPathD
-            }
-          )
-        }
-      ) });
+      return /* @__PURE__ */ jsx("div", { className: iconClasses, "aria-hidden": "true", children: stepFinishChar });
     }
     return /* @__PURE__ */ jsx("div", { className: iconClasses, children: stepIndex + 1 });
   };

package/dist/{chunk-PUDU34R4.mjs → chunk-AVUXDQYO.mjs}

@@ -1,5 +1,5 @@
-import { useEffect, useState } from 'react';
-import { injectLoadingAnimationStyles, getLoadingClasses, getLoadingTextClasses, classNames, loadingFullscreenBaseClasses, loadingContainerBaseClasses, getSpinnerSVG, loadingColorClasses, getLoadingBarsWrapperClasses, getLoadingBarClasses, getLoadingDotsWrapperClasses, getLoadingDotClasses } from '@expcat/tigercat-core';
+import { useEffect, useState, useMemo } from 'react';
+import { injectLoadingAnimationStyles, classNames, loadingFullscreenBaseClasses, loadingContainerBaseClasses, getLoadingTextClasses, getSpinnerSVG, getLoadingClasses, loadingColorClasses, getLoadingBarsWrapperClasses, getLoadingBarClasses, getLoadingDotsWrapperClasses, getLoadingDotClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/components/Loading.tsx
@@ -12,35 +12,41 @@ var Loading = ({
   delay = 0,
   background = "rgba(255, 255, 255, 0.9)",
   customColor,
-  className = "",
+  className,
   style,
   ...props
 }) => {
   useEffect(() => {
     injectLoadingAnimationStyles();
   }, []);
-  const [visible, setVisible] = useState(delay === 0);
+  const [visible, setVisible] = useState(delay <= 0);
   useEffect(() => {
-    if (delay > 0) {
-      const timer = setTimeout(() => {
-        setVisible(true);
-      }, delay);
-      return () => clearTimeout(timer);
+    if (delay <= 0) {
+      setVisible(true);
+      return;
     }
+    setVisible(false);
+    const timer = setTimeout(() => setVisible(true), delay);
+    return () => clearTimeout(timer);
   }, [delay]);
-  const spinnerClasses = getLoadingClasses(variant, size, color, customColor);
-  const textClasses = getLoadingTextClasses(size, color, customColor);
-  const containerClasses = classNames(
-    fullscreen ? loadingFullscreenBaseClasses : loadingContainerBaseClasses,
-    className
+  const containerClasses = useMemo(
+    () => classNames(
+      fullscreen ? loadingFullscreenBaseClasses : loadingContainerBaseClasses,
+      className
+    ),
+    [fullscreen, className]
+  );
+  const mergedStyle = useMemo(
+    () => ({
+      ...customColor ? { color: customColor } : null,
+      ...fullscreen ? { backgroundColor: background } : null,
+      ...style
+    }),
+    [customColor, fullscreen, background, style]
   );
-  const mergedStyle = {
-    ...customColor ? { color: customColor } : null,
-    ...fullscreen ? { backgroundColor: background } : null,
-    ...style
-  };
   const renderSpinner = () => {
     const svg = getSpinnerSVG(variant);
+    const spinnerClasses = getLoadingClasses(variant, size, color, customColor);
     return /* @__PURE__ */ jsx(
       "svg",
       {
@@ -97,7 +103,7 @@ var Loading = ({
       ...props,
       children: [
         renderIndicator(),
-        text && /* @__PURE__ */ jsx("div", { className: textClasses, children: text })
+        text && /* @__PURE__ */ jsx("div", { className: getLoadingTextClasses(size, color, customColor), children: text })
       ]
     }
   );

package/dist/{chunk-HUZVBDHV.js → chunk-AY5Z3NIW.js}

@@ -29,34 +29,29 @@ var BackTop = ({
   ...props
 }) => {
   const [visible, setVisible] = react.useState(false);
-  const handleScroll = react.useCallback(() => {
-    const targetElement = target();
-    if (!targetElement) return;
-    const scrollTop = tigercatCore.getScrollTop(targetElement);
-    setVisible(scrollTop >= visibilityHeight);
+  react.useEffect(() => {
+    const el = target();
+    if (!el) return;
+    const onScroll = () => {
+      setVisible(tigercatCore.getScrollTop(el) >= visibilityHeight);
+    };
+    el.addEventListener("scroll", onScroll, { passive: true });
+    onScroll();
+    return () => {
+      el.removeEventListener("scroll", onScroll);
+    };
   }, [target, visibilityHeight]);
   const handleClick = react.useCallback(
     (event) => {
-      const targetElement = target();
-      if (targetElement) {
-        tigercatCore.scrollToTop(targetElement, duration);
-      }
+      const el = target();
+      if (el) tigercatCore.scrollToTop(el, duration);
       onClick?.(event);
     },
     [target, duration, onClick]
   );
-  react.useEffect(() => {
-    const targetElement = target();
-    if (!targetElement) return;
-    targetElement.addEventListener("scroll", handleScroll, { passive: true });
-    handleScroll();
-    return () => {
-      targetElement.removeEventListener("scroll", handleScroll);
-    };
-  }, [target, handleScroll]);
   const buttonClasses = react.useMemo(() => {
-    const targetElement = target();
-    const positionClasses = !targetElement || targetElement === window ? tigercatCore.backTopButtonClasses : tigercatCore.backTopContainerClasses;
+    const el = target();
+    const positionClasses = !el || el === window ? tigercatCore.backTopButtonClasses : tigercatCore.backTopContainerClasses;
     return tigercatCore.classNames(
       positionClasses,
       visible ? tigercatCore.backTopVisibleClasses : tigercatCore.backTopHiddenClasses,

package/dist/{chunk-67EK62HG.mjs → chunk-B3LRUKXM.mjs}

@@ -1,4 +1,4 @@
-import { useAnchorContext } from './chunk-YIF5VX7K.mjs';
+import { useAnchorContext } from './chunk-FNDPGSEW.mjs';
 import React, { useEffect, useMemo } from 'react';
 import { classNames, getAnchorLinkClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';