@expcat/tigercat-react 0.0.1

package/dist/chunk-PAD2DX5M.mjs

@@ -0,0 +1,331 @@
+import { memo, useState, useRef, useEffect, useCallback } from 'react';
+import { getSliderTrackClasses, getSliderThumbClasses, getSliderTooltipClasses, classNames, sliderRangeClasses, sliderBaseClasses } from '@expcat/tigercat-core';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/components/Slider.tsx
+var Thumb = memo(
+  ({
+    value,
+    thumbType = null,
+    disabled,
+    tooltip,
+    showTooltip,
+    activeThumb,
+    isDragging,
+    min,
+    max,
+    ariaLabel,
+    ariaLabelledby,
+    ariaDescribedby,
+    thumbClassesCombined,
+    tooltipClassesCombined,
+    setShowTooltip,
+    handleStart,
+    handleKeyDown,
+    getPercentage
+  }) => {
+    const left = getPercentage(value);
+    const showThumbTooltip = showTooltip && (thumbType === activeThumb || thumbType === null);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: thumbClassesCombined,
+        style: { left: `${left}%` },
+        tabIndex: disabled ? -1 : 0,
+        role: "slider",
+        "aria-valuenow": value,
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-orientation": "horizontal",
+        "aria-disabled": disabled,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledby,
+        "aria-describedby": ariaDescribedby,
+        onMouseDown: (e) => handleStart(e, thumbType),
+        onTouchStart: (e) => handleStart(e, thumbType),
+        onMouseEnter: () => {
+          if (tooltip) setShowTooltip(true);
+        },
+        onMouseLeave: () => {
+          if (!isDragging) setShowTooltip(false);
+        },
+        onKeyDown: (e) => handleKeyDown(e, value, thumbType),
+        children: showThumbTooltip && tooltip && /* @__PURE__ */ jsx("div", { className: tooltipClassesCombined, children: value })
+      }
+    );
+  }
+);
+var Slider = ({
+  value: controlledValue,
+  defaultValue,
+  min = 0,
+  max = 100,
+  step = 1,
+  disabled = false,
+  marks = false,
+  tooltip = true,
+  size = "md",
+  range = false,
+  onChange,
+  className,
+  ...props
+}) => {
+  const {
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby,
+    ...divProps
+  } = props;
+  const getInitialValue = () => {
+    if (controlledValue !== void 0) return controlledValue;
+    if (defaultValue !== void 0) return defaultValue;
+    return range ? [min, max] : min;
+  };
+  const [internalValue, setInternalValue] = useState(getInitialValue());
+  const [isDragging, setIsDragging] = useState(false);
+  const [activeThumb, setActiveThumb] = useState(null);
+  const [showTooltip, setShowTooltip] = useState(false);
+  const trackRef = useRef(null);
+  useEffect(() => {
+    if (controlledValue !== void 0) {
+      setInternalValue(controlledValue);
+    }
+  }, [controlledValue]);
+  const normalizeValue = useCallback(
+    (val) => {
+      const steps = Math.round((val - min) / step);
+      return Math.min(Math.max(min + steps * step, min), max);
+    },
+    [min, max, step]
+  );
+  const getPercentage = useCallback(
+    (val) => {
+      return (val - min) / (max - min) * 100;
+    },
+    [min, max]
+  );
+  const getValueFromPosition = useCallback(
+    (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);
+    },
+    [min, max, normalizeValue]
+  );
+  const updateValue = useCallback(
+    (newValue) => {
+      setInternalValue(newValue);
+      onChange?.(newValue);
+    },
+    [onChange]
+  );
+  const handleMove = useCallback(
+    (event) => {
+      if (disabled || !isDragging) return;
+      const clientX = "touches" in event ? event.touches[0].clientX : event.clientX;
+      const newValue = getValueFromPosition(clientX);
+      if (range && Array.isArray(internalValue)) {
+        const [minVal, maxVal] = internalValue;
+        if (activeThumb === "min") {
+          updateValue([Math.min(newValue, maxVal), maxVal]);
+        } else if (activeThumb === "max") {
+          updateValue([minVal, Math.max(newValue, minVal)]);
+        }
+      } else {
+        updateValue(newValue);
+      }
+    },
+    [disabled, isDragging, activeThumb, range, internalValue, getValueFromPosition, updateValue]
+  );
+  const handleEnd = useCallback(() => {
+    setIsDragging(false);
+    setActiveThumb(null);
+    setShowTooltip(false);
+  }, []);
+  useEffect(() => {
+    if (isDragging) {
+      const handleMouseMove = (e) => handleMove(e);
+      const handleTouchMove = (e) => handleMove(e);
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleEnd);
+      document.addEventListener("touchmove", handleTouchMove);
+      document.addEventListener("touchend", handleEnd);
+      return () => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleEnd);
+        document.removeEventListener("touchmove", handleTouchMove);
+        document.removeEventListener("touchend", handleEnd);
+      };
+    }
+  }, [isDragging, handleMove, handleEnd]);
+  const handleStart = (event, thumb) => {
+    if (disabled) return;
+    event.preventDefault();
+    setIsDragging(true);
+    setActiveThumb(thumb);
+    if (tooltip) setShowTooltip(true);
+  };
+  const handleTrackClick = (e) => {
+    if (disabled) return;
+    const newValue = getValueFromPosition(e.clientX);
+    if (range && Array.isArray(internalValue)) {
+      const [minVal, maxVal] = internalValue;
+      const distToMin = Math.abs(newValue - minVal);
+      const distToMax = Math.abs(newValue - maxVal);
+      if (distToMin < distToMax) {
+        updateValue([newValue, maxVal]);
+      } else {
+        updateValue([minVal, newValue]);
+      }
+    } else {
+      updateValue(newValue);
+    }
+  };
+  const handleKeyDown = (e, value, thumbType) => {
+    if (disabled) return;
+    let newValue = value;
+    if (e.key === "ArrowRight" || e.key === "ArrowUp") {
+      e.preventDefault();
+      newValue = normalizeValue(value + step);
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
+      e.preventDefault();
+      newValue = normalizeValue(value - step);
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      newValue = min;
+    } else if (e.key === "End") {
+      e.preventDefault();
+      newValue = max;
+    } else {
+      return;
+    }
+    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);
+    }
+  };
+  const trackStyles = 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 = getSliderThumbClasses(size, disabled);
+  const tooltipClassesCombined = getSliderTooltipClasses(size);
+  const renderMarks = () => {
+    if (!marks) return null;
+    const marksObj = typeof marks === "boolean" ? {} : marks;
+    return /* @__PURE__ */ jsx("div", { className: "absolute w-full top-full mt-2", children: Object.entries(marksObj).map(([key, label]) => {
+      const value = Number(key);
+      const left = getPercentage(value);
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute text-xs text-[var(--tiger-text-muted,#6b7280)]",
+          style: { left: `${left}%`, transform: "translateX(-50%)" },
+          children: label
+        },
+        key
+      );
+    }) });
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames(sliderBaseClasses, disabled && "cursor-not-allowed", className),
+      ...divProps,
+      children: [
+        /* @__PURE__ */ jsxs("div", { ref: trackRef, className: trackStyles, onClick: handleTrackClick, children: [
+          /* @__PURE__ */ jsx("div", { className: sliderRangeClasses, style: rangeStyles }),
+          range && Array.isArray(internalValue) ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              Thumb,
+              {
+                value: internalValue[0],
+                thumbType: "min",
+                disabled,
+                tooltip,
+                showTooltip,
+                activeThumb,
+                isDragging,
+                size,
+                min,
+                max,
+                ariaLabel: ariaLabel ? `${ariaLabel} (min)` : "Minimum value",
+                ariaLabelledby,
+                ariaDescribedby,
+                thumbClassesCombined,
+                tooltipClassesCombined,
+                setShowTooltip,
+                handleStart,
+                handleKeyDown,
+                getPercentage
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Thumb,
+              {
+                value: internalValue[1],
+                thumbType: "max",
+                disabled,
+                tooltip,
+                showTooltip,
+                activeThumb,
+                isDragging,
+                size,
+                min,
+                max,
+                ariaLabel: ariaLabel ? `${ariaLabel} (max)` : "Maximum value",
+                ariaLabelledby,
+                ariaDescribedby,
+                thumbClassesCombined,
+                tooltipClassesCombined,
+                setShowTooltip,
+                handleStart,
+                handleKeyDown,
+                getPercentage
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx(
+            Thumb,
+            {
+              value: typeof internalValue === "number" ? internalValue : internalValue[0],
+              disabled,
+              tooltip,
+              showTooltip,
+              activeThumb,
+              isDragging,
+              size,
+              min,
+              max,
+              ariaLabel,
+              ariaLabelledby,
+              ariaDescribedby,
+              thumbClassesCombined,
+              tooltipClassesCombined,
+              setShowTooltip,
+              handleStart,
+              handleKeyDown,
+              getPercentage
+            }
+          )
+        ] }),
+        renderMarks()
+      ]
+    }
+  );
+};
+
+export { Slider };

package/dist/chunk-PUDU34R4.mjs

@@ -0,0 +1,106 @@
+import { useEffect, useState } from 'react';
+import { injectLoadingAnimationStyles, getLoadingClasses, getLoadingTextClasses, classNames, loadingFullscreenBaseClasses, loadingContainerBaseClasses, getSpinnerSVG, loadingColorClasses, getLoadingBarsWrapperClasses, getLoadingBarClasses, getLoadingDotsWrapperClasses, getLoadingDotClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/Loading.tsx
+var Loading = ({
+  variant = "spinner",
+  size = "md",
+  color = "primary",
+  text,
+  fullscreen = false,
+  delay = 0,
+  background = "rgba(255, 255, 255, 0.9)",
+  customColor,
+  className = "",
+  style,
+  ...props
+}) => {
+  useEffect(() => {
+    injectLoadingAnimationStyles();
+  }, []);
+  const [visible, setVisible] = useState(delay === 0);
+  useEffect(() => {
+    if (delay > 0) {
+      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 mergedStyle = {
+    ...customColor ? { color: customColor } : null,
+    ...fullscreen ? { backgroundColor: background } : null,
+    ...style
+  };
+  const renderSpinner = () => {
+    const svg = getSpinnerSVG(variant);
+    return /* @__PURE__ */ jsx(
+      "svg",
+      {
+        className: spinnerClasses,
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: svg.viewBox,
+        children: svg.elements.map((el, index) => {
+          if (el.type === "circle") {
+            return /* @__PURE__ */ jsx("circle", { ...el.attrs }, index);
+          } else if (el.type === "path") {
+            return /* @__PURE__ */ jsx("path", { ...el.attrs }, index);
+          }
+          return null;
+        })
+      }
+    );
+  };
+  const renderDots = () => {
+    const colorClass = customColor ? "" : loadingColorClasses[color];
+    const steps = [0, 1, 2];
+    return /* @__PURE__ */ jsx("div", { className: getLoadingDotsWrapperClasses(size), children: steps.map((i) => /* @__PURE__ */ jsx("div", { className: getLoadingDotClasses(size, i, colorClass) }, i)) });
+  };
+  const renderBars = () => {
+    const colorClass = customColor ? "" : loadingColorClasses[color];
+    const steps = [0, 1, 2];
+    return /* @__PURE__ */ jsx("div", { className: getLoadingBarsWrapperClasses(size), children: steps.map((i) => /* @__PURE__ */ jsx("div", { className: getLoadingBarClasses(size, i, colorClass) }, i)) });
+  };
+  const renderIndicator = () => {
+    switch (variant) {
+      case "dots":
+        return renderDots();
+      case "bars":
+        return renderBars();
+      case "spinner":
+      case "ring":
+      case "pulse":
+      default:
+        return renderSpinner();
+    }
+  };
+  if (!visible) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: containerClasses,
+      style: mergedStyle,
+      role: "status",
+      "aria-label": text || "Loading",
+      "aria-live": "polite",
+      "aria-busy": true,
+      ...props,
+      children: [
+        renderIndicator(),
+        text && /* @__PURE__ */ jsx("div", { className: textClasses, children: text })
+      ]
+    }
+  );
+};
+
+export { Loading };