@expcat/tigercat-react 2.1.1 → 2.1.3

package/dist/chunk-BKIINKEY.mjs

@@ -0,0 +1,138 @@
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/Segmented.tsx
+import { forwardRef } from "react";
+import {
+  getSegmentedContainerClasses,
+  getSegmentedContainerStyle,
+  getSegmentedIndicatorClasses,
+  getSegmentedIndicatorStyle,
+  getSegmentedOptionClasses,
+  getSegmentedTrackClasses,
+  getSegmentedKeyboardTarget,
+  classNames,
+  getLocaleDirection,
+  devWarn,
+  icon24ViewBox
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Segmented = forwardRef(function Segmented2({
+  value,
+  defaultValue,
+  options = [],
+  disabled = false,
+  size = "md",
+  block = false,
+  name,
+  className,
+  style,
+  onChange,
+  ...rest
+}, ref) {
+  const config = useTigerConfig();
+  const rtl = getLocaleDirection(config.locale) === "rtl";
+  const [currentValue, setCurrentValue] = useControlledState({
+    value,
+    defaultValue,
+    onChange: (next) => {
+      if (next !== void 0) onChange?.(next);
+    }
+  });
+  if (new Set(options.map((opt) => opt.value)).size !== options.length) {
+    devWarn("Segmented.duplicateValue", "Segmented: option values should be unique.");
+  }
+  function handleSelect(opt) {
+    if (opt.disabled || disabled) return;
+    setCurrentValue(opt.value);
+  }
+  const selectedIndex = options.findIndex((opt) => opt.value === currentValue);
+  const firstEnabledIndex = options.findIndex((opt) => !opt.disabled);
+  const rovingIndex = selectedIndex >= 0 ? selectedIndex : firstEnabledIndex;
+  const enabledIdxs = options.reduce((acc, opt, i) => {
+    if (!opt.disabled) acc.push(i);
+    return acc;
+  }, []);
+  function focusOption(container, index) {
+    if (!container) return;
+    const els = container.querySelectorAll('[role="radio"]');
+    els[index]?.focus();
+  }
+  function handleKeyDown(e, index) {
+    if (disabled) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handleSelect(options[index]);
+      return;
+    }
+    const target = getSegmentedKeyboardTarget(e.key, index, enabledIdxs, rtl);
+    if (target == null) return;
+    e.preventDefault();
+    const container = e.currentTarget.closest('[role="radiogroup"]');
+    focusOption(container, target);
+    handleSelect(options[target]);
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      ...rest,
+      className: classNames(getSegmentedContainerClasses(size, block), className),
+      style: { ...style, ...getSegmentedContainerStyle(options.length) },
+      role: "radiogroup",
+      "aria-disabled": disabled || void 0,
+      children: [
+        name != null ? /* @__PURE__ */ jsx("input", { type: "hidden", name, value: currentValue ?? "" }) : null,
+        /* @__PURE__ */ jsx("div", { className: getSegmentedTrackClasses(), "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-tiger-segmented-indicator": "true",
+            className: getSegmentedIndicatorClasses(size),
+            style: getSegmentedIndicatorStyle(selectedIndex, options.length, size)
+          }
+        ) }),
+        options.map((opt, index) => {
+          const selected = opt.value === currentValue;
+          const isDisabled = Boolean(opt.disabled) || disabled;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: getSegmentedOptionClasses(size, selected, isDisabled),
+              role: "radio",
+              "aria-checked": selected,
+              "aria-disabled": isDisabled || void 0,
+              tabIndex: isDisabled ? -1 : index === rovingIndex ? 0 : -1,
+              onClick: () => handleSelect(opt),
+              onKeyDown: (e) => handleKeyDown(e, index),
+              children: [
+                opt.icon ? /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    viewBox: icon24ViewBox,
+                    className: "h-4 w-4",
+                    fill: "none",
+                    stroke: "currentColor",
+                    "aria-hidden": "true",
+                    focusable: "false",
+                    children: /* @__PURE__ */ jsx("path", { d: opt.icon })
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx("span", { children: opt.label })
+              ]
+            },
+            `${String(opt.value)}-${index}`
+          );
+        })
+      ]
+    }
+  );
+});
+
+export {
+  Segmented
+};

package/dist/{chunk-OKYMTHFQ.mjs → chunk-BKSYS4D6.mjs}

@@ -1,6 +1,14 @@
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
 // src/components/ImageCompare.tsx
 import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
 import {
+  createDocumentDragSession,
   getImageCompareAfterClasses,
   getImageCompareBeforeClasses,
   getImageCompareClipStyle,
@@ -9,6 +17,7 @@ import {
   getImageCompareImgClasses,
   getImageCompareKeyboardPosition,
   getImageCompareKnobClasses,
+  getImageCompareLabels,
   getImageCompareLineClasses,
   getImageComparePointerClientPoint,
   getImageComparePositionFromPointer,
@@ -20,6 +29,7 @@ import {
   resolveImageCompareFit,
   resolveImageCompareOrientation,
   resolveImageComparePosition,
+  resolveImageCompareRtl,
   resolveImageCompareStep
 } from "@expcat/tigercat-core";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -56,9 +66,9 @@ var ImageCompare = forwardRef(
     before,
     after,
     onChange,
-    onMouseDown,
-    onTouchStart,
+    onPointerDown,
     onKeyDown,
+    dir,
     ...rest
   }, ref) => {
     const {
@@ -67,24 +77,27 @@ var ImageCompare = forwardRef(
       "aria-describedby": ariaDescribedby,
       ...domProps
     } = rest;
+    const config = useTigerConfig();
+    const labels = getImageCompareLabels(config.locale);
     const resolvedOrientation = resolveImageCompareOrientation(orientation);
     const resolvedStep = resolveImageCompareStep(step);
-    const [uncontrolledPosition, setUncontrolledPosition] = useState(
-      () => resolveImageComparePosition(controlledPosition ?? defaultPosition, step)
-    );
+    const resolvedDir = typeof dir === "string" ? dir : config.direction;
+    const rtl = resolveImageCompareRtl(resolvedDir);
+    const [current, setCurrent] = useControlledState({
+      value: controlledPosition,
+      defaultValue: defaultPosition ?? 50,
+      onChange,
+      postState: (position) => resolveImageComparePosition(position, step)
+    });
     const [dragging, setDragging] = useState(false);
     const rootRef = useRef(null);
     const handleRef = useRef(null);
-    const draggingRef = useRef(false);
-    const isControlled = controlledPosition !== void 0;
-    const current = resolveImageComparePosition(
-      isControlled ? controlledPosition : uncontrolledPosition,
-      step
-    );
+    const dragSessionRef = useRef(null);
     const vertical = isImageCompareVertical(resolvedOrientation);
-    const resolvedAriaLabel = resolveImageCompareAriaLabel(
+    const explicitAriaLabel = resolveImageCompareAriaLabel(
       typeof ariaLabelAttr === "string" ? ariaLabelAttr : ariaLabel
     );
+    const resolvedAriaLabel = ariaLabelledby ? explicitAriaLabel : explicitAriaLabel ?? labels.ariaLabel;
     const setRootRef = useCallback(
       (node) => {
         rootRef.current = node;
@@ -95,81 +108,64 @@ var ImageCompare = forwardRef(
     );
     const commit = useCallback(
       (next) => {
-        const resolved = resolveImageComparePosition(next, step);
-        if (!isControlled) setUncontrolledPosition(resolved);
-        onChange?.(resolved);
+        setCurrent(next);
       },
-      [isControlled, onChange, step]
+      [setCurrent]
     );
-    const positionFromEvent = useCallback(
-      (event) => {
+    const positionFromPoint = useCallback(
+      (clientX, clientY) => {
         const root = rootRef.current;
-        const source = "nativeEvent" in event ? event.nativeEvent : event;
-        const point = getImageComparePointerClientPoint(source);
-        if (!root || !point) return null;
+        if (!root) return null;
         return getImageComparePositionFromPointer({
-          clientX: point.clientX,
-          clientY: point.clientY,
+          clientX,
+          clientY,
           rect: root.getBoundingClientRect(),
           orientation: resolvedOrientation,
-          step: resolvedStep
+          step: resolvedStep,
+          rtl
         });
       },
-      [resolvedOrientation, resolvedStep]
+      [resolvedOrientation, resolvedStep, rtl]
     );
-    const handleMove = useCallback(
-      (event) => {
-        if (disabled || !draggingRef.current) return;
-        const next = positionFromEvent(event);
-        if (next === null) return;
-        commit(next);
-      },
-      [commit, disabled, positionFromEvent]
-    );
-    const handleEnd = useCallback(() => {
-      draggingRef.current = false;
+    const stopDrag = useCallback(() => {
+      dragSessionRef.current?.dispose();
+      dragSessionRef.current = null;
       setDragging(false);
     }, []);
-    useEffect(() => {
-      if (!dragging) return;
-      document.addEventListener("mousemove", handleMove);
-      document.addEventListener("mouseup", handleEnd);
-      document.addEventListener("touchmove", handleMove);
-      document.addEventListener("touchend", handleEnd);
-      return () => {
-        document.removeEventListener("mousemove", handleMove);
-        document.removeEventListener("mouseup", handleEnd);
-        document.removeEventListener("touchmove", handleMove);
-        document.removeEventListener("touchend", handleEnd);
-      };
-    }, [dragging, handleEnd, handleMove]);
-    const startDrag = useCallback(
+    useEffect(() => stopDrag, [stopDrag]);
+    const handlePointerDown = useCallback(
       (event) => {
+        onPointerDown?.(event);
+        if (event.defaultPrevented) return;
         if (disabled) return;
-        if ("button" in event && event.button !== 0) return;
+        if (event.button !== 0) return;
         if (isImageCompareInteractiveTarget(event.target, handleRef.current)) return;
         event.preventDefault();
-        draggingRef.current = true;
-        setDragging(true);
-        const next = positionFromEvent(event);
+        const point = getImageComparePointerClientPoint(event);
+        if (!point) return;
+        const next = positionFromPoint(point.clientX, point.clientY);
         if (next !== null) commit(next);
         handleRef.current?.focus();
+        setDragging(true);
+        dragSessionRef.current?.dispose();
+        dragSessionRef.current = createDocumentDragSession({
+          startX: point.clientX,
+          startY: point.clientY,
+          ownerDocument: event.currentTarget.ownerDocument,
+          pointerId: event.pointerId,
+          pointerTarget: event.currentTarget,
+          onMove: ({ event: moveEvent, currentX, currentY }) => {
+            if (moveEvent.cancelable) moveEvent.preventDefault();
+            const moved = positionFromPoint(currentX, currentY);
+            if (moved !== null) commit(moved);
+          },
+          onEnd: () => {
+            dragSessionRef.current = null;
+            setDragging(false);
+          }
+        });
       },
-      [commit, disabled, positionFromEvent]
-    );
-    const handleMouseDown = useCallback(
-      (event) => {
-        startDrag(event);
-        onMouseDown?.(event);
-      },
-      [onMouseDown, startDrag]
-    );
-    const handleTouchStart = useCallback(
-      (event) => {
-        startDrag(event);
-        onTouchStart?.(event);
-      },
-      [onTouchStart, startDrag]
+      [commit, disabled, onPointerDown, positionFromPoint]
     );
     const handleKeyDown = useCallback(
       (event) => {
@@ -177,20 +173,24 @@ var ImageCompare = forwardRef(
           onKeyDown?.(event);
           return;
         }
-        const next = getImageCompareKeyboardPosition(event.key, current, resolvedStep);
+        const next = getImageCompareKeyboardPosition(event.key, current, resolvedStep, {
+          orientation: resolvedOrientation,
+          rtl
+        });
         if (next !== null) {
           event.preventDefault();
           commit(next);
         }
         onKeyDown?.(event);
       },
-      [commit, current, disabled, onKeyDown, resolvedStep]
+      [commit, current, disabled, onKeyDown, resolvedOrientation, resolvedStep, rtl]
     );
     return /* @__PURE__ */ jsxs(
       "div",
       {
         ...domProps,
         ref: setRootRef,
+        dir: resolvedDir,
         "data-image-compare": "",
         "data-image-compare-orientation": resolvedOrientation,
         "data-image-compare-position": String(current),
@@ -203,22 +203,19 @@ var ImageCompare = forwardRef(
         }),
         style: {
           ...getImageCompareRootStyle({
-            position: current,
-            step: resolvedStep,
             width,
             height
           }),
           ...style
         },
-        onMouseDown: handleMouseDown,
-        onTouchStart: handleTouchStart,
+        onPointerDown: handlePointerDown,
         children: [
           /* @__PURE__ */ jsx("div", { className: getImageCompareAfterClasses(), "data-image-compare-after": "", children: renderPaneContent(after, afterSrc, afterAlt, fit) }),
           /* @__PURE__ */ jsx(
             "div",
             {
               className: getImageCompareBeforeClasses(),
-              style: getImageCompareClipStyle(current, resolvedOrientation, resolvedStep),
+              style: getImageCompareClipStyle(current, resolvedOrientation, resolvedStep, rtl),
               "data-image-compare-before": "",
               children: renderPaneContent(before, beforeSrc, beforeAlt, fit)
             }
@@ -231,7 +228,7 @@ var ImageCompare = forwardRef(
                 orientation: resolvedOrientation,
                 disabled
               }),
-              style: getImageCompareHandleStyle(current, resolvedOrientation, resolvedStep),
+              style: getImageCompareHandleStyle(current, resolvedOrientation, resolvedStep, rtl),
               "data-image-compare-handle": "",
               role: "slider",
               tabIndex: disabled ? -1 : 0,

package/dist/chunk-BNCUJLRV.mjs

@@ -0,0 +1,152 @@
+import {
+  renderBodyPortal,
+  useBackgroundInert,
+  useBodyScrollLock
+} from "./chunk-NPGU6VYD.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/Loading.tsx
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import {
+  classNames,
+  getLoadingIndicator,
+  getLoadingLabel,
+  getLoadingTextClasses,
+  mergeTigerLocale,
+  DEFAULT_LOADING_BACKGROUND,
+  loadingContainerBaseClasses,
+  loadingFullscreenBaseClasses,
+  loadingRegionBaseClasses,
+  loadingRegionOverlayClasses
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+function renderIndicator(node) {
+  if (node.kind === "items") {
+    return /* @__PURE__ */ jsx("div", { className: node.className, "aria-hidden": "true", children: node.items.map((item, index) => /* @__PURE__ */ jsx("div", { className: item.className }, index)) });
+  }
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: node.className,
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: node.viewBox,
+      "aria-hidden": "true",
+      focusable: "false",
+      children: node.elements.map((el, index) => React.createElement(el.type, { key: index, ...el.attrs }))
+    }
+  );
+}
+var Loading = ({
+  variant = "spinner",
+  size = "md",
+  color = "primary",
+  text,
+  spinning = true,
+  fullscreen = false,
+  delay = 0,
+  background = DEFAULT_LOADING_BACKGROUND,
+  customColor,
+  lockScroll = true,
+  className,
+  style,
+  locale,
+  children,
+  ...props
+}) => {
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const [visible, setVisible] = useState(delay <= 0);
+  const containerRef = useRef(null);
+  const hasRegion = children != null && children !== false;
+  const showIndicator = visible && spinning;
+  const showFullscreen = fullscreen && showIndicator && !hasRegion;
+  useBodyScrollLock({ enabled: showFullscreen && lockScroll });
+  useBackgroundInert({ enabled: showFullscreen, containerRef });
+  useEffect(() => {
+    if (delay <= 0) {
+      setVisible(true);
+      return;
+    }
+    setVisible(false);
+    const timer = setTimeout(() => setVisible(true), delay);
+    return () => clearTimeout(timer);
+  }, [delay]);
+  const indicator = useMemo(
+    () => getLoadingIndicator({ variant, size, color, customColor }),
+    [variant, size, color, customColor]
+  );
+  const inlineStyle = useMemo(
+    () => ({
+      ...customColor ? { color: customColor } : null,
+      ...fullscreen ? { backgroundColor: background } : null,
+      ...style
+    }),
+    [customColor, fullscreen, background, style]
+  );
+  const overlayStyle = useMemo(
+    () => ({
+      ...customColor ? { color: customColor } : null,
+      backgroundColor: background,
+      ...style
+    }),
+    [customColor, background, style]
+  );
+  const label = getLoadingLabel(mergedLocale, text);
+  const indicatorNode = renderIndicator(indicator);
+  const textNode = text ? /* @__PURE__ */ jsx("div", { className: getLoadingTextClasses(size, color, customColor), children: text }) : null;
+  const decorative = props["aria-hidden"] === true || props["aria-hidden"] === "true" || props.role === "presentation";
+  const statusProps = decorative ? { role: "presentation", "aria-hidden": true } : { role: "status", "aria-label": label, "aria-busy": true };
+  if (hasRegion) {
+    return /* @__PURE__ */ jsxs("div", { className: classNames(loadingRegionBaseClasses, className), children: [
+      /* @__PURE__ */ jsx("div", { inert: showIndicator || void 0, children }),
+      showIndicator ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ...props,
+          ref: containerRef,
+          className: loadingRegionOverlayClasses,
+          style: overlayStyle,
+          ...statusProps,
+          children: [
+            indicatorNode,
+            textNode
+          ]
+        }
+      ) : null
+    ] });
+  }
+  if (!showIndicator) {
+    return null;
+  }
+  const loadingNode = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      ref: containerRef,
+      className: classNames(
+        fullscreen ? loadingFullscreenBaseClasses : loadingContainerBaseClasses,
+        className
+      ),
+      style: inlineStyle,
+      ...statusProps,
+      children: [
+        indicatorNode,
+        textNode
+      ]
+    }
+  );
+  if (fullscreen) {
+    return renderBodyPortal(loadingNode);
+  }
+  return loadingNode;
+};
+
+export {
+  Loading
+};