@expcat/tigercat-react 0.0.1

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-WSCSDSV7.mjs

@@ -0,0 +1,145 @@
+import { useClickOutside, useEscapeKey } from './chunk-ZO4XVOHU.mjs';
+import { DropdownMenu } from './chunk-SIVJX7VU.mjs';
+import React, { createContext, useState, useRef, useCallback, useEffect } from 'react';
+import { classNames, getDropdownContainerClasses, getDropdownTriggerClasses, getDropdownMenuWrapperClasses } from '@expcat/tigercat-core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var DropdownContext = createContext(null);
+var Dropdown = ({
+  trigger = "hover",
+  placement = "bottom-start",
+  disabled = false,
+  visible: controlledVisible,
+  defaultVisible = false,
+  closeOnClick = true,
+  className,
+  style,
+  onVisibleChange,
+  children,
+  onKeyDown,
+  ...divProps
+}) => {
+  const [internalVisible, setInternalVisible] = useState(defaultVisible);
+  const visible = controlledVisible !== void 0 ? controlledVisible : internalVisible;
+  const containerRef = useRef(null);
+  const hoverTimerRef = useRef(null);
+  const setVisible = useCallback(
+    (newVisible) => {
+      if (disabled && newVisible) return;
+      if (controlledVisible === void 0) {
+        setInternalVisible(newVisible);
+      }
+      onVisibleChange?.(newVisible);
+    },
+    [disabled, controlledVisible, onVisibleChange]
+  );
+  const handleItemClick = useCallback(() => {
+    if (closeOnClick) {
+      setVisible(false);
+    }
+  }, [closeOnClick, setVisible]);
+  const handleMouseEnter = useCallback(() => {
+    if (trigger !== "hover") return;
+    if (hoverTimerRef.current) {
+      clearTimeout(hoverTimerRef.current);
+    }
+    hoverTimerRef.current = setTimeout(() => {
+      setVisible(true);
+    }, 100);
+  }, [trigger, setVisible]);
+  const handleMouseLeave = useCallback(() => {
+    if (trigger !== "hover") return;
+    if (hoverTimerRef.current) {
+      clearTimeout(hoverTimerRef.current);
+    }
+    hoverTimerRef.current = setTimeout(() => {
+      setVisible(false);
+    }, 150);
+  }, [trigger, setVisible]);
+  const handleClick = useCallback(() => {
+    if (trigger !== "click") return;
+    setVisible(!visible);
+  }, [trigger, visible, setVisible]);
+  useClickOutside({
+    enabled: trigger === "click" && visible,
+    refs: [containerRef],
+    onOutsideClick: () => setVisible(false)
+  });
+  useEscapeKey({
+    enabled: visible,
+    onEscape: () => setVisible(false)
+  });
+  useEffect(() => {
+    return () => {
+      if (hoverTimerRef.current) {
+        clearTimeout(hoverTimerRef.current);
+      }
+    };
+  }, []);
+  const containerClasses = classNames(
+    getDropdownContainerClasses(),
+    "tiger-dropdown-container",
+    className
+  );
+  const triggerClasses = getDropdownTriggerClasses(disabled);
+  const menuWrapperClasses = getDropdownMenuWrapperClasses(visible, placement);
+  const contextValue = {
+    closeOnClick,
+    handleItemClick
+  };
+  const childrenArray = React.Children.toArray(children);
+  let triggerElement = null;
+  let menuElement = null;
+  childrenArray.forEach((child) => {
+    if (!React.isValidElement(child)) {
+      if (triggerElement == null) triggerElement = child;
+      return;
+    }
+    if (child.type === DropdownMenu) {
+      menuElement = child;
+      return;
+    }
+    if (triggerElement == null) {
+      triggerElement = child;
+    }
+  });
+  const handleContainerKeyDown = (event) => {
+    onKeyDown?.(event);
+  };
+  return /* @__PURE__ */ jsx(DropdownContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: containerClasses,
+      style,
+      onKeyDown: handleContainerKeyDown,
+      ...divProps,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: triggerClasses,
+            onClick: handleClick,
+            onMouseEnter: handleMouseEnter,
+            onMouseLeave: handleMouseLeave,
+            "aria-haspopup": "menu",
+            "aria-expanded": visible,
+            children: triggerElement
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: menuWrapperClasses,
+            hidden: !visible,
+            onMouseEnter: handleMouseEnter,
+            onMouseLeave: handleMouseLeave,
+            children: menuElement
+          }
+        )
+      ]
+    }
+  ) });
+};
+
+export { Dropdown, DropdownContext };

package/dist/chunk-WSJO2PIE.mjs

@@ -0,0 +1,72 @@
+import { useMemo, useCallback } from 'react';
+import { classNames, linkBaseClasses, getLinkVariantClasses, linkSizeClasses, linkDisabledClasses, getSecureRel } from '@expcat/tigercat-core';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/Link.tsx
+var Link = ({
+  variant = "primary",
+  size = "md",
+  disabled = false,
+  href,
+  target,
+  rel,
+  underline = true,
+  onClick,
+  onKeyDown,
+  tabIndex,
+  children,
+  className,
+  ...props
+}) => {
+  const linkClasses = useMemo(
+    () => classNames(
+      linkBaseClasses,
+      getLinkVariantClasses(variant, void 0, { disabled }),
+      linkSizeClasses[size],
+      underline && "hover:underline",
+      disabled && linkDisabledClasses,
+      className
+    ),
+    [variant, size, underline, disabled, className]
+  );
+  const computedRel = useMemo(() => getSecureRel(target, rel), [target, rel]);
+  const handleClick = useCallback(
+    (event) => {
+      if (disabled) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      onClick?.(event);
+    },
+    [disabled, onClick]
+  );
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (disabled && (event.key === "Enter" || event.key === " ")) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      onKeyDown?.(event);
+    },
+    [disabled, onKeyDown]
+  );
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      className: linkClasses,
+      href: disabled ? void 0 : href,
+      target,
+      rel: computedRel,
+      "aria-disabled": disabled || void 0,
+      tabIndex: disabled ? -1 : tabIndex,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      ...props,
+      children
+    }
+  );
+};
+
+export { Link };

package/dist/chunk-XDKXL2BP.mjs

@@ -0,0 +1,188 @@
+import { useEscapeKey } from './chunk-ZO4XVOHU.mjs';
+import React, { useEffect, useCallback, useRef, useId, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { resolveLocaleText, captureActiveElement, focusFirst, restoreFocus, classNames, getDrawerContainerClasses, getDrawerMaskClasses, getDrawerPanelClasses, getDrawerHeaderClasses, getDrawerBodyClasses, getDrawerFooterClasses, getDrawerCloseButtonClasses, getDrawerTitleClasses, closeIconViewBox, closeIconPathD, closeIconPathStrokeWidth, closeIconPathStrokeLinejoin, closeIconPathStrokeLinecap } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var CloseIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: "w-5 h-5",
+    fill: "none",
+    stroke: "currentColor",
+    viewBox: closeIconViewBox,
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        strokeLinecap: closeIconPathStrokeLinecap,
+        strokeLinejoin: closeIconPathStrokeLinejoin,
+        strokeWidth: closeIconPathStrokeWidth,
+        d: closeIconPathD
+      }
+    )
+  }
+);
+var Drawer = ({
+  visible = false,
+  placement = "right",
+  size = "md",
+  title,
+  header,
+  closable = true,
+  mask = true,
+  maskClosable = true,
+  zIndex = 1e3,
+  className,
+  bodyClassName,
+  destroyOnClose = false,
+  onClose,
+  onAfterEnter,
+  onAfterLeave,
+  closeAriaLabel,
+  locale,
+  children,
+  footer,
+  style,
+  ...rest
+}) => {
+  const [hasBeenOpened, setHasBeenOpened] = React.useState(visible);
+  useEffect(() => {
+    if (visible) setHasBeenOpened(true);
+  }, [visible]);
+  const shouldRender = destroyOnClose ? visible : hasBeenOpened;
+  const handleClose = useCallback(() => {
+    onClose?.();
+  }, [onClose]);
+  const handleMaskClick = useCallback(
+    (event) => {
+      if (!maskClosable) return;
+      if (event.target === event.currentTarget) {
+        handleClose();
+      }
+    },
+    [maskClosable, handleClose]
+  );
+  useEscapeKey({ enabled: visible, onEscape: handleClose });
+  const previousVisible = useRef(false);
+  useEffect(() => {
+    if (visible === previousVisible.current) return;
+    previousVisible.current = visible;
+    const timer = window.setTimeout(() => {
+      if (visible) {
+        onAfterEnter?.();
+      } else {
+        onAfterLeave?.();
+      }
+    }, 300);
+    return () => window.clearTimeout(timer);
+  }, [visible, onAfterEnter, onAfterLeave]);
+  const reactId = useId();
+  const drawerId = useMemo(() => `tiger-drawer-${reactId}`, [reactId]);
+  const titleId = `${drawerId}-title`;
+  const {
+    ["aria-labelledby"]: _ariaLabelledby,
+    role: _role,
+    tabIndex: _tabIndex,
+    ...dialogDivProps
+  } = rest;
+  const ariaLabelledby = rest["aria-labelledby"] ?? (title || header ? titleId : void 0);
+  const dialogRef = useRef(null);
+  const closeButtonRef = useRef(null);
+  const previousActiveElementRef = useRef(null);
+  const resolvedCloseAriaLabel = resolveLocaleText(
+    "Close drawer",
+    closeAriaLabel,
+    locale?.drawer?.closeAriaLabel,
+    locale?.common?.closeText
+  );
+  useEffect(() => {
+    if (!visible) return;
+    previousActiveElementRef.current = captureActiveElement();
+    const timer = window.setTimeout(() => {
+      focusFirst([closeButtonRef.current, dialogRef.current]);
+    }, 0);
+    return () => window.clearTimeout(timer);
+  }, [visible]);
+  useEffect(() => {
+    if (visible) return;
+    restoreFocus(previousActiveElementRef.current);
+  }, [visible]);
+  const containerClasses = classNames(
+    getDrawerContainerClasses(zIndex),
+    !visible && "pointer-events-none"
+  );
+  const maskClasses = getDrawerMaskClasses(visible);
+  const panelClasses = classNames(
+    getDrawerPanelClasses(placement, visible, size),
+    "flex flex-col",
+    className
+  );
+  const headerClasses = getDrawerHeaderClasses();
+  const bodyClasses = getDrawerBodyClasses(bodyClassName);
+  const footerClasses = getDrawerFooterClasses();
+  const closeButtonClasses = getDrawerCloseButtonClasses();
+  const titleClasses = getDrawerTitleClasses();
+  if (!shouldRender) {
+    return null;
+  }
+  const drawerContent = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: containerClasses,
+      style: { zIndex },
+      hidden: !visible,
+      "aria-hidden": !visible ? "true" : void 0,
+      "data-tiger-drawer-root": "",
+      children: [
+        mask && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: maskClasses,
+            onClick: handleMaskClick,
+            "aria-hidden": "true",
+            "data-tiger-drawer-mask": ""
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: panelClasses,
+            style,
+            ...dialogDivProps,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": ariaLabelledby,
+            tabIndex: -1,
+            ref: dialogRef,
+            "data-tiger-drawer": "",
+            children: [
+              (title || header || closable) && /* @__PURE__ */ jsxs("div", { className: headerClasses, children: [
+                (title || header) && /* @__PURE__ */ jsx("h3", { className: titleClasses, id: titleId, children: header || title }),
+                closable && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: closeButtonClasses,
+                    onClick: handleClose,
+                    "aria-label": resolvedCloseAriaLabel,
+                    ref: closeButtonRef,
+                    children: /* @__PURE__ */ jsx(CloseIcon, {})
+                  }
+                )
+              ] }),
+              children && /* @__PURE__ */ jsx("div", { className: bodyClasses, children }),
+              footer && /* @__PURE__ */ jsx("div", { className: footerClasses, children: footer })
+            ]
+          }
+        )
+      ]
+    }
+  );
+  if (typeof document === "undefined") {
+    return null;
+  }
+  return createPortal(drawerContent, document.body);
+};
+
+export { Drawer };