@expcat/tigercat-react 0.0.1

package/dist/chunk-XZDJ5FRB.js

@@ -0,0 +1,333 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Slider.tsx
+var Thumb = react.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__ */ jsxRuntime.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__ */ jsxRuntime.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] = react.useState(getInitialValue());
+  const [isDragging, setIsDragging] = react.useState(false);
+  const [activeThumb, setActiveThumb] = react.useState(null);
+  const [showTooltip, setShowTooltip] = react.useState(false);
+  const trackRef = react.useRef(null);
+  react.useEffect(() => {
+    if (controlledValue !== void 0) {
+      setInternalValue(controlledValue);
+    }
+  }, [controlledValue]);
+  const normalizeValue = react.useCallback(
+    (val) => {
+      const steps = Math.round((val - min) / step);
+      return Math.min(Math.max(min + steps * step, min), max);
+    },
+    [min, max, step]
+  );
+  const getPercentage = react.useCallback(
+    (val) => {
+      return (val - min) / (max - min) * 100;
+    },
+    [min, max]
+  );
+  const getValueFromPosition = react.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 = react.useCallback(
+    (newValue) => {
+      setInternalValue(newValue);
+      onChange?.(newValue);
+    },
+    [onChange]
+  );
+  const handleMove = react.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 = react.useCallback(() => {
+    setIsDragging(false);
+    setActiveThumb(null);
+    setShowTooltip(false);
+  }, []);
+  react.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 = 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 renderMarks = () => {
+    if (!marks) return null;
+    const marksObj = typeof marks === "boolean" ? {} : marks;
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "absolute text-xs text-[var(--tiger-text-muted,#6b7280)]",
+          style: { left: `${left}%`, transform: "translateX(-50%)" },
+          children: label
+        },
+        key
+      );
+    }) });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      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.jsx("div", { className: tigercatCore.sliderRangeClasses, style: rangeStyles }),
+          range && Array.isArray(internalValue) ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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()
+      ]
+    }
+  );
+};
+
+exports.Slider = Slider;

package/dist/chunk-YE2M2HNM.js

@@ -0,0 +1,168 @@
+'use strict';
+
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Progress.tsx
+var Progress = ({
+  variant = "primary",
+  size = "md",
+  type = "line",
+  percentage = 0,
+  status = "normal",
+  showText,
+  text,
+  format,
+  striped = false,
+  stripedAnimation = false,
+  strokeWidth = 6,
+  width = "auto",
+  height,
+  className,
+  style,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  "aria-describedby": ariaDescribedby,
+  ...props
+}) => {
+  const clampedPercentage = tigercatCore.clampPercentage(percentage);
+  const effectiveVariant = tigercatCore.getStatusVariant(status) || variant;
+  const shouldShowText = showText ?? type === "line";
+  const displayText = shouldShowText ? tigercatCore.formatProgressText(clampedPercentage, text, format) : "";
+  const resolvedAriaLabel = ariaLabel ?? (ariaLabelledby ? void 0 : `Progress: ${clampedPercentage}%`);
+  const lineTrackClasses = tigercatCore.classNames(
+    tigercatCore.progressLineBaseClasses,
+    tigercatCore.progressTrackBgClasses,
+    !height && tigercatCore.progressLineSizeClasses[size]
+  );
+  const lineBarClasses = tigercatCore.classNames(
+    tigercatCore.progressLineInnerClasses,
+    tigercatCore.getProgressVariantClasses(effectiveVariant),
+    striped && tigercatCore.progressStripedClasses,
+    striped && stripedAnimation && tigercatCore.progressStripedAnimationClasses
+  );
+  const textClasses = tigercatCore.classNames(
+    tigercatCore.progressTextBaseClasses,
+    tigercatCore.progressTextSizeClasses[size],
+    tigercatCore.getProgressTextColorClasses(effectiveVariant)
+  );
+  const renderLineProgress = () => {
+    const containerStyle = width !== "auto" ? { width: typeof width === "number" ? `${width}px` : width } : {};
+    const mergedStyle = {
+      ...style ?? {},
+      ...containerStyle
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ...props,
+        className: tigercatCore.classNames("flex items-center w-full", className),
+        style: mergedStyle,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: lineTrackClasses,
+              style: { flex: 1, ...height ? { height: `${height}px` } : {} },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: lineBarClasses,
+                  style: { width: `${clampedPercentage}%` },
+                  role: "progressbar",
+                  "aria-label": resolvedAriaLabel,
+                  "aria-labelledby": ariaLabelledby,
+                  "aria-describedby": ariaDescribedby,
+                  "aria-valuenow": clampedPercentage,
+                  "aria-valuemin": 0,
+                  "aria-valuemax": 100
+                }
+              )
+            }
+          ),
+          shouldShowText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: textClasses, children: displayText })
+        ]
+      }
+    );
+  };
+  const renderCircleProgress = () => {
+    const { width: svgWidth, height: svgHeight, radius, cx, cy } = tigercatCore.getCircleSize(size, strokeWidth);
+    const { strokeDasharray, strokeDashoffset } = tigercatCore.calculateCirclePath(
+      radius,
+      strokeWidth,
+      clampedPercentage
+    );
+    const strokeColor = tigercatCore.getProgressVariantClasses(effectiveVariant).replace("bg-", "text-");
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ...props,
+        className: tigercatCore.classNames(tigercatCore.progressCircleBaseClasses, className),
+        style: {
+          ...style ?? {},
+          width: `${svgWidth}px`,
+          height: `${svgHeight}px`
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: svgWidth, height: svgHeight, viewBox: `0 0 ${svgWidth} ${svgHeight}`, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "circle",
+              {
+                cx,
+                cy,
+                r: radius,
+                fill: "none",
+                stroke: "currentColor",
+                className: tigercatCore.progressCircleTrackStrokeClasses,
+                strokeWidth
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "circle",
+              {
+                cx,
+                cy,
+                r: radius,
+                fill: "none",
+                stroke: "currentColor",
+                className: strokeColor,
+                strokeWidth,
+                strokeLinecap: "round",
+                strokeDasharray,
+                strokeDashoffset,
+                style: {
+                  transition: "stroke-dashoffset 0.3s ease",
+                  transform: "rotate(-90deg)",
+                  transformOrigin: "center"
+                },
+                role: "progressbar",
+                "aria-label": resolvedAriaLabel,
+                "aria-labelledby": ariaLabelledby,
+                "aria-describedby": ariaDescribedby,
+                "aria-valuenow": clampedPercentage,
+                "aria-valuemin": 0,
+                "aria-valuemax": 100
+              }
+            )
+          ] }),
+          shouldShowText && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: tigercatCore.classNames(
+                tigercatCore.progressCircleTextClasses,
+                tigercatCore.progressTextSizeClasses[size],
+                "font-medium",
+                tigercatCore.getProgressTextColorClasses(effectiveVariant)
+              ),
+              children: displayText
+            }
+          )
+        ]
+      }
+    );
+  };
+  if (type === "circle") return renderCircleProgress();
+  return renderLineProgress();
+};
+
+exports.Progress = Progress;

package/dist/chunk-YYGTJKP5.js

@@ -0,0 +1,39 @@
+'use strict';
+
+var React = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// src/components/Text.tsx
+var Text = ({
+  tag = "p",
+  size = "base",
+  weight = "normal",
+  align,
+  color = "default",
+  truncate = false,
+  italic = false,
+  underline = false,
+  lineThrough = false,
+  children,
+  className,
+  ...props
+}) => {
+  const textClasses = tigercatCore.classNames(
+    tigercatCore.textSizeClasses[size],
+    tigercatCore.textWeightClasses[weight],
+    align && tigercatCore.textAlignClasses[align],
+    tigercatCore.textColorClasses[color],
+    truncate && tigercatCore.textDecorationClasses.truncate,
+    italic && tigercatCore.textDecorationClasses.italic,
+    underline && tigercatCore.textDecorationClasses.underline,
+    lineThrough && tigercatCore.textDecorationClasses.lineThrough,
+    className
+  );
+  return React__default.default.createElement(tag, { ...props, className: textClasses }, children);
+};
+
+exports.Text = Text;