@expcat/tigercat-react 2.1.2 → 2.1.4

package/dist/chunk-H3UEVWOO.mjs

@@ -0,0 +1,348 @@
+import {
+  composeRefs,
+  renderOverlayTrigger
+} from "./chunk-WWZZRB7H.mjs";
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  renderOverlayPortal,
+  useAnchoredOverlay
+} from "./chunk-OU2AV7DY.mjs";
+
+// src/components/Dropdown.tsx
+import React, {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef
+} from "react";
+import {
+  classNames,
+  createFloatingHoverDelayController,
+  DEFAULT_DROPDOWN_TRIGGER,
+  DROPDOWN_CHEVRON_PATH,
+  DROPDOWN_ENTER_CLASS,
+  devWarn,
+  focusFirstMenuItem,
+  getDropdownChevronClasses,
+  getDropdownContainerClasses,
+  getDropdownItemClasses,
+  getDropdownMenuClasses,
+  getDropdownTriggerClasses,
+  getOverlayTriggerAria,
+  getOverlayTriggerKeyboardAction,
+  handleMenuNavigation,
+  injectDropdownStyles,
+  restoreFocus
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DropdownContext = createContext(null);
+var DropdownMenu = ({
+  className,
+  style,
+  children,
+  role,
+  ...divProps
+}) => {
+  const menuClasses = classNames(getDropdownMenuClasses(), className);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: menuClasses,
+      style,
+      "data-tiger-dropdown-menu": "",
+      ...divProps,
+      role: role ?? "menu",
+      children
+    }
+  );
+};
+var DropdownItem = ({
+  disabled = false,
+  divided = false,
+  closeOnClick,
+  href,
+  className,
+  onClick,
+  children,
+  ...rest
+}) => {
+  const context = useContext(DropdownContext);
+  if (context == null) {
+    devWarn("DropdownItem.orphan", "DropdownItem must be used inside Dropdown.");
+  }
+  const handleClick = (event) => {
+    if (disabled) {
+      event.preventDefault();
+      return;
+    }
+    onClick?.(event);
+    const shouldClose = closeOnClick ?? context?.closeOnClick ?? true;
+    if (shouldClose) {
+      context?.handleItemClick();
+    }
+  };
+  const itemClasses = classNames(getDropdownItemClasses(disabled, divided), className);
+  const Comp = href && !disabled ? "a" : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ...rest,
+      ...Comp === "a" ? { href } : { type: "button" },
+      className: itemClasses,
+      role: "menuitem",
+      tabIndex: -1,
+      "aria-disabled": disabled || void 0,
+      disabled: Comp === "button" ? disabled : void 0,
+      onClick: handleClick,
+      children
+    }
+  );
+};
+var Dropdown = forwardRef(function Dropdown2({
+  trigger = DEFAULT_DROPDOWN_TRIGGER,
+  placement: initialPlacement = "bottom-start",
+  offset = 4,
+  disabled = false,
+  open: controlledOpen,
+  defaultOpen = false,
+  closeOnClick = true,
+  showArrow = true,
+  portal = true,
+  asChild = false,
+  className,
+  style,
+  onOpenChange,
+  children,
+  renderTrigger,
+  ...divProps
+}, forwardedRef) {
+  const [visible, setVisibleState] = useControlledState({
+    value: controlledOpen,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange
+  });
+  const containerRef = useRef(null);
+  const triggerRef = useRef(null);
+  const floatingRef = useRef(null);
+  const previousActiveElementRef = useRef(null);
+  const openIntentRef = useRef("menu");
+  const skipRestoreRef = useRef(false);
+  const reactId = useId();
+  const menuId = useMemo(() => `tiger-dropdown-menu-${reactId}`, [reactId]);
+  useEffect(() => {
+    injectDropdownStyles();
+  }, []);
+  const setVisibleRef = useRef(() => void 0);
+  const hoverControllerRef = useRef(
+    null
+  );
+  if (hoverControllerRef.current === null) {
+    hoverControllerRef.current = createFloatingHoverDelayController({
+      show: () => {
+        openIntentRef.current = "hover";
+        setVisibleRef.current(true);
+      },
+      hide: () => {
+        skipRestoreRef.current = true;
+        setVisibleRef.current(false);
+      }
+    });
+  }
+  const hoverController = hoverControllerRef.current;
+  const setVisible = useCallback(
+    (next) => {
+      if (disabled && next) return;
+      if (next && !visible) {
+        previousActiveElementRef.current = triggerRef.current;
+      }
+      setVisibleState(next);
+      if (!next) {
+        hoverController.cancel();
+        if (!skipRestoreRef.current) {
+          restoreFocus(previousActiveElementRef.current);
+        }
+        previousActiveElementRef.current = null;
+        skipRestoreRef.current = false;
+      }
+    },
+    [disabled, visible, setVisibleState, hoverController]
+  );
+  setVisibleRef.current = setVisible;
+  useEffect(() => {
+    if (!visible) return;
+    if (openIntentRef.current === "hover") return;
+    const frame = requestAnimationFrame(() => {
+      if (floatingRef.current) focusFirstMenuItem(floatingRef.current);
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [visible]);
+  const handleItemClick = useCallback(() => {
+    skipRestoreRef.current = false;
+    setVisible(false);
+  }, [setVisible]);
+  const handleMouseEnter = useCallback(() => {
+    if (trigger !== "hover" || disabled) return;
+    hoverController.enter();
+  }, [trigger, disabled, hoverController]);
+  const handleMouseLeave = useCallback(() => {
+    if (trigger !== "hover") return;
+    hoverController.leave();
+  }, [trigger, hoverController]);
+  const handleClick = useCallback(() => {
+    if (disabled) return;
+    if (triggerRef.current?.getAttribute("aria-disabled") === "true") return;
+    if (trigger === "hover") {
+      hoverController.cancel();
+    }
+    openIntentRef.current = "menu";
+    setVisible(!visible);
+  }, [disabled, trigger, visible, setVisible, hoverController]);
+  const handleTriggerKeyDown = useCallback(
+    (event) => {
+      const action = getOverlayTriggerKeyboardAction(event.nativeEvent, {
+        kind: "menu",
+        open: visible,
+        disabled
+      });
+      if (!action) return;
+      event.preventDefault();
+      hoverController.cancel();
+      if (action === "close") {
+        setVisible(false);
+        return;
+      }
+      openIntentRef.current = "menu";
+      if (!visible) setVisible(true);
+    },
+    [visible, disabled, hoverController, setVisible]
+  );
+  const handleMenuKeyDown = useCallback(
+    (event) => {
+      if (event.key === "Tab") {
+        skipRestoreRef.current = true;
+        setVisible(false);
+        return;
+      }
+      if (floatingRef.current) {
+        handleMenuNavigation(floatingRef.current, event.nativeEvent);
+      }
+    },
+    [setVisible]
+  );
+  const overlay = useAnchoredOverlay({
+    referenceRef: triggerRef,
+    floatingRef,
+    enabled: visible,
+    placement: initialPlacement,
+    offset,
+    portal,
+    containerRef,
+    dismissOnOutside: true,
+    dismissOnEscape: true,
+    onDismiss: (reason) => {
+      skipRestoreRef.current = reason !== "escape";
+      if (reason === "escape") openIntentRef.current = "menu";
+      setVisible(false);
+    }
+  });
+  useEffect(() => () => hoverController.dispose(), [hoverController]);
+  const containerClasses = useMemo(
+    () => classNames(getDropdownContainerClasses(), "tiger-dropdown-container", className),
+    [className]
+  );
+  const triggerClasses = useMemo(() => getDropdownTriggerClasses(disabled), [disabled]);
+  const contextValue = useMemo(
+    () => ({ closeOnClick, handleItemClick }),
+    [closeOnClick, handleItemClick]
+  );
+  const childrenArray = React.Children.toArray(children);
+  let triggerElement = renderTrigger ? renderTrigger({ open: visible }) : null;
+  let menuElement = null;
+  let sawTrigger = Boolean(renderTrigger);
+  childrenArray.forEach((child) => {
+    if (React.isValidElement(child) && child.type === DropdownMenu) {
+      menuElement = child;
+      return;
+    }
+    if (renderTrigger) return;
+    if (!sawTrigger) {
+      triggerElement = child;
+      sawTrigger = true;
+      return;
+    }
+    devWarn("Dropdown.extraTrigger", "Dropdown only uses the first non-menu child as the trigger.");
+  });
+  const triggerAria = getOverlayTriggerAria({
+    kind: "menu",
+    open: visible,
+    controlsId: menuId,
+    disabled
+  });
+  const composedTriggerRef = composeRefs(forwardedRef, triggerRef);
+  const chevronNode = showArrow && !asChild ? /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: getDropdownChevronClasses(visible),
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: DROPDOWN_CHEVRON_PATH })
+    }
+  ) : null;
+  const triggerNode = renderOverlayTrigger({
+    asChild,
+    child: triggerElement,
+    triggerRef: composedTriggerRef,
+    className: asChild ? void 0 : triggerClasses,
+    disabled,
+    extraChildren: chevronNode,
+    aria: triggerAria,
+    handlers: {
+      onClick: handleClick,
+      onKeyDown: handleTriggerKeyDown,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave
+    }
+  });
+  const menuWrapperNode = /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: floatingRef,
+      className: classNames(overlay.floatingClasses, DROPDOWN_ENTER_CLASS),
+      style: overlay.floatingStyles,
+      "data-positioned": overlay.positioned,
+      hidden: !visible,
+      "data-tiger-dropdown-menu": "",
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onKeyDown: handleMenuKeyDown,
+      children: menuElement && React.isValidElement(menuElement) ? React.cloneElement(menuElement, {
+        id: menuId
+      }) : menuElement
+    }
+  );
+  return /* @__PURE__ */ jsx(DropdownContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { ref: containerRef, className: containerClasses, style, ...divProps, children: [
+    triggerNode,
+    renderOverlayPortal(menuWrapperNode, overlay.target, !portal)
+  ] }) });
+});
+Dropdown.displayName = "Dropdown";
+DropdownMenu.displayName = "DropdownMenu";
+DropdownItem.displayName = "DropdownItem";
+
+export {
+  DropdownContext,
+  DropdownMenu,
+  DropdownItem,
+  Dropdown
+};

package/dist/chunk-HAG7TGPS.mjs

@@ -0,0 +1,157 @@
+import {
+  useCheckboxGroup
+} from "./chunk-UOF324U6.mjs";
+import {
+  useFormItemControlContext
+} from "./chunk-F6T3OLTQ.mjs";
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+
+// src/components/Checkbox.tsx
+import { useEffect, useRef, forwardRef, useImperativeHandle } from "react";
+import {
+  classNames,
+  checkboxCheckPathD,
+  checkboxIconSizeClasses,
+  checkboxIconViewBox,
+  checkboxIndeterminatePathD,
+  checkboxGroupIncludes,
+  devWarn,
+  getCheckboxLabelClasses,
+  getCheckboxLabelTextClasses,
+  getCheckboxVisualClasses,
+  mergeAriaDescribedBy,
+  runShakeAnimation
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Checkbox = forwardRef(function Checkbox2({
+  checked: controlledChecked,
+  defaultChecked = false,
+  value,
+  size: propSize,
+  disabled: propDisabled,
+  indeterminate = false,
+  status: statusProp,
+  onChange,
+  children,
+  className,
+  id,
+  name,
+  onBlur,
+  ...props
+}, ref) {
+  const groupContext = useCheckboxGroup();
+  const formItemControl = useFormItemControlContext();
+  const inGroup = Boolean(groupContext);
+  if (inGroup && value === void 0) {
+    devWarn(
+      "Checkbox.groupValue",
+      "Checkbox inside CheckboxGroup must set `value`. Independent `checked` is ignored while grouped."
+    );
+  }
+  const [checkedState, setChecked] = useControlledState({
+    value: inGroup ? void 0 : controlledChecked,
+    defaultValue: defaultChecked,
+    onChange
+  });
+  const effectiveSize = propSize || groupContext?.size || "md";
+  const effectiveDisabled = Boolean(
+    propDisabled || groupContext?.disabled || formItemControl?.disabled
+  );
+  const status = statusProp ?? formItemControl?.status ?? "default";
+  const shakeTrigger = formItemControl?.shakeTrigger;
+  const effectiveId = id ?? formItemControl?.id;
+  const effectiveName = name ?? formItemControl?.name;
+  const checked = inGroup ? value !== void 0 && checkboxGroupIncludes(groupContext.value, value) : checkedState;
+  const inputRef = useRef(null);
+  const rootRef = useRef(null);
+  useImperativeHandle(ref, () => inputRef.current, []);
+  useEffect(() => {
+    if (inputRef.current) inputRef.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+  useEffect(() => {
+    if (status === "error") runShakeAnimation(rootRef.current);
+  }, [status, shakeTrigger]);
+  const handleChange = (event) => {
+    if (effectiveDisabled) return;
+    const next = event.target.checked;
+    if (inGroup && value !== void 0) {
+      groupContext.updateValue(value, next);
+      return;
+    }
+    setChecked(next, event);
+    formItemControl?.onChange?.(next);
+  };
+  const handleBlur = (event) => {
+    onBlur?.(event);
+    formItemControl?.onBlur?.();
+  };
+  const describedBy = mergeAriaDescribedBy(
+    typeof props["aria-describedby"] === "string" ? props["aria-describedby"] : void 0,
+    formItemControl?.describedBy
+  );
+  const visual = /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: getCheckboxVisualClasses({
+        size: effectiveSize,
+        checked,
+        indeterminate,
+        disabled: effectiveDisabled,
+        status
+      }),
+      "aria-hidden": "true",
+      children: (checked || indeterminate) && /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: checkboxIconSizeClasses[effectiveSize],
+          viewBox: checkboxIconViewBox,
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: /* @__PURE__ */ jsx("path", { d: indeterminate ? checkboxIndeterminatePathD : checkboxCheckPathD })
+        }
+      )
+    }
+  );
+  const input = /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...props,
+      ref: inputRef,
+      id: effectiveId,
+      name: effectiveName,
+      type: "checkbox",
+      className: "sr-only peer",
+      checked,
+      disabled: effectiveDisabled,
+      value: typeof value === "boolean" ? String(value) : value,
+      "aria-checked": indeterminate ? "mixed" : checked,
+      "aria-invalid": status === "error" ? true : props["aria-invalid"],
+      "aria-required": formItemControl?.required || props["aria-required"] ? true : void 0,
+      "aria-describedby": describedBy,
+      onChange: handleChange,
+      onBlur: handleBlur
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      ref: rootRef,
+      className: classNames(getCheckboxLabelClasses(effectiveSize, effectiveDisabled), className),
+      children: [
+        input,
+        visual,
+        children != null && children !== false && /* @__PURE__ */ jsx("span", { className: getCheckboxLabelTextClasses(effectiveSize, effectiveDisabled), children })
+      ]
+    }
+  );
+});
+Checkbox.displayName = "Checkbox";
+
+export {
+  Checkbox
+};

package/dist/chunk-HEVB53MU.mjs

@@ -0,0 +1,41 @@
+import {
+  ImagePreview
+} from "./chunk-SGKPZW57.mjs";
+
+// src/components/ImageViewer.tsx
+import {
+  resolveLightboxScaleRange
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+var ImageViewer = ({
+  minZoom,
+  maxZoom,
+  minScale,
+  maxScale,
+  onOpenChange,
+  onClose,
+  onCurrentIndexChange,
+  onScaleChange,
+  ...rest
+}) => {
+  const scaleRange = resolveLightboxScaleRange({ minScale, maxScale, minZoom, maxZoom });
+  const handleOpenChange = (next) => {
+    onOpenChange?.(next);
+    if (!next) onClose?.();
+  };
+  return /* @__PURE__ */ jsx(
+    ImagePreview,
+    {
+      ...rest,
+      minScale: scaleRange.minScale,
+      maxScale: scaleRange.maxScale,
+      onOpenChange: handleOpenChange,
+      onCurrentIndexChange,
+      onScaleChange
+    }
+  );
+};
+
+export {
+  ImageViewer
+};