@expcat/tigercat-react 0.0.67 → 0.1.0

package/dist/chunk-VSF4DF7N.js

@@ -0,0 +1,84 @@
+'use strict';
+
+var React = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// src/components/RadioGroup.tsx
+var RadioGroupContext = React__default.default.createContext(null);
+var RadioGroup = ({
+  value,
+  defaultValue,
+  name,
+  disabled = false,
+  size = "md",
+  onChange,
+  children,
+  className,
+  ...props
+}) => {
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const isControlled = value !== void 0;
+  const currentValue = isControlled ? value : internalValue;
+  const generatedNameRef = React.useRef(
+    `tiger-radio-group-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`
+  );
+  const groupName = name || generatedNameRef.current;
+  const handleChange = (newValue) => {
+    if (disabled) return;
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
+    onChange?.(newValue);
+  };
+  const handleKeyDown = (event) => {
+    if (disabled) return;
+    if (event.key !== "ArrowDown" && event.key !== "ArrowRight" && event.key !== "ArrowUp" && event.key !== "ArrowLeft") {
+      return;
+    }
+    const target = event.target;
+    const currentInput = target.closest('input[type="radio"]');
+    if (!currentInput) return;
+    const container = event.currentTarget;
+    const inputs = Array.from(
+      container.querySelectorAll('input[type="radio"]')
+    );
+    const enabledInputs = inputs.filter((input) => !input.disabled);
+    if (enabledInputs.length === 0) return;
+    const currentIndex = enabledInputs.indexOf(currentInput);
+    if (currentIndex === -1) return;
+    event.preventDefault();
+    const direction = event.key === "ArrowDown" || event.key === "ArrowRight" ? 1 : -1;
+    const nextIndex = (currentIndex + direction + enabledInputs.length) % enabledInputs.length;
+    const nextInput = enabledInputs[nextIndex];
+    nextInput.focus();
+    nextInput.click();
+  };
+  const contextValue = {
+    value: currentValue,
+    name: groupName,
+    disabled,
+    size,
+    onChange: handleChange
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: tigercatCore.getRadioGroupClasses({
+        className,
+        hasCustomClass: !!className
+      }),
+      role: "radiogroup",
+      onKeyDown: handleKeyDown,
+      ...props,
+      children
+    }
+  ) });
+};
+
+exports.RadioGroup = RadioGroup;
+exports.RadioGroupContext = RadioGroupContext;

package/dist/chunk-VVO4V4IK.js

@@ -0,0 +1,56 @@
+'use strict';
+
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Switch.tsx
+var Switch = ({
+  checked = false,
+  disabled = false,
+  size = "md",
+  onChange,
+  className,
+  onClick,
+  onKeyDown,
+  tabIndex,
+  ...props
+}) => {
+  const switchClasses = tigercatCore.classNames(tigercatCore.getSwitchClasses(size, checked, disabled), className);
+  const thumbClasses = tigercatCore.getSwitchThumbClasses(size, checked);
+  const toggle = () => {
+    if (disabled) return;
+    onChange?.(!checked);
+  };
+  const handleClick = (event) => {
+    onClick?.(event);
+    if (event.defaultPrevented) return;
+    toggle();
+  };
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+    if (disabled) return;
+    if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      toggle();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ...props,
+      type: "button",
+      role: "switch",
+      "aria-checked": checked,
+      className: switchClasses,
+      disabled,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      "aria-disabled": disabled || void 0,
+      tabIndex: disabled ? -1 : tabIndex,
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: thumbClasses, "aria-hidden": "true" })
+    }
+  );
+};
+
+exports.Switch = Switch;

package/dist/chunk-WK5HN4OH.js

@@ -0,0 +1,113 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Tooltip.tsx
+var tooltipIdCounter = 0;
+var createTooltipId = () => `tiger-tooltip-${++tooltipIdCounter}`;
+var Tooltip = ({
+  visible,
+  defaultVisible = false,
+  content,
+  trigger = "hover",
+  placement = "top",
+  disabled = false,
+  className,
+  style,
+  children,
+  contentContent,
+  onVisibleChange,
+  ...divProps
+}) => {
+  const isControlled = visible !== void 0;
+  const [internalVisible, setInternalVisible] = react.useState(defaultVisible);
+  const currentVisible = isControlled ? visible : internalVisible;
+  const containerRef = react.useRef(null);
+  const tooltipIdRef = react.useRef(null);
+  if (!tooltipIdRef.current) {
+    tooltipIdRef.current = createTooltipId();
+  }
+  const tooltipId = tooltipIdRef.current;
+  const tooltipContent = contentContent ?? content;
+  const describedBy = tooltipContent != null ? tooltipId : void 0;
+  const setVisible = react.useCallback(
+    (newVisible) => {
+      if (disabled && newVisible) return;
+      if (!isControlled) {
+        setInternalVisible(newVisible);
+      }
+      onVisibleChange?.(newVisible);
+    },
+    [disabled, isControlled, onVisibleChange]
+  );
+  const handleTriggerClick = () => {
+    if (disabled || trigger !== "click") return;
+    setVisible(!currentVisible);
+  };
+  const handleTriggerMouseEnter = () => {
+    if (disabled || trigger !== "hover") return;
+    setVisible(true);
+  };
+  const handleTriggerMouseLeave = () => {
+    if (disabled || trigger !== "hover") return;
+    setVisible(false);
+  };
+  const handleTriggerFocus = () => {
+    if (disabled || trigger !== "focus") return;
+    setVisible(true);
+  };
+  const handleTriggerBlur = () => {
+    if (disabled || trigger !== "focus") return;
+    setVisible(false);
+  };
+  react.useEffect(() => {
+    if (!currentVisible || trigger !== "click") return;
+    const handleClickOutside = (event) => {
+      const target = event.target;
+      if (!target) return;
+      if (containerRef.current?.contains(target)) return;
+      setVisible(false);
+    };
+    const timeoutId = setTimeout(() => {
+      document.addEventListener("click", handleClickOutside);
+    }, 0);
+    return () => {
+      clearTimeout(timeoutId);
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }, [currentVisible, trigger, setVisible]);
+  react.useEffect(() => {
+    if (!currentVisible) return;
+    const handleKeyDown = (event) => {
+      if (event.key !== "Escape") return;
+      setVisible(false);
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [currentVisible, setVisible]);
+  const containerClasses = tigercatCore.classNames(tigercatCore.getTooltipContainerClasses(), className);
+  const triggerClasses = tigercatCore.getTooltipTriggerClasses(disabled);
+  const contentWrapperClasses = tigercatCore.getDropdownMenuWrapperClasses(currentVisible, placement);
+  const contentClasses = tigercatCore.getTooltipContentClasses();
+  const triggerHandlers = {};
+  if (trigger === "click") {
+    triggerHandlers.onClick = handleTriggerClick;
+  } else if (trigger === "hover") {
+    triggerHandlers.onMouseEnter = handleTriggerMouseEnter;
+    triggerHandlers.onMouseLeave = handleTriggerMouseLeave;
+  } else if (trigger === "focus") {
+    triggerHandlers.onFocus = handleTriggerFocus;
+    triggerHandlers.onBlur = handleTriggerBlur;
+  }
+  if (!children) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: containerClasses, style, ...divProps, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: triggerClasses, "aria-describedby": describedBy, ...triggerHandlers, children }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: contentWrapperClasses, hidden: !currentVisible, "aria-hidden": !currentVisible, children: /* @__PURE__ */ jsxRuntime.jsx("div", { id: tooltipId, role: "tooltip", className: contentClasses, children: tooltipContent }) })
+  ] });
+};
+
+exports.Tooltip = Tooltip;

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;