@expcat/tigercat-react 0.0.1

package/dist/chunk-LADCWARG.mjs

@@ -0,0 +1,97 @@
+import { classNames, getTimelineContainerClasses, timelineListClasses, getTimelineItemClasses, getTimelineTailClasses, getTimelineHeadClasses, getTimelineContentClasses, timelineLabelClasses, timelineDescriptionClasses, getPendingDotClasses, getTimelineDotClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/Timeline.tsx
+var Timeline = ({
+  items = [],
+  mode = "left",
+  pending = false,
+  pendingDot,
+  pendingContent,
+  reverse = false,
+  renderItem,
+  renderDot: customRenderDot,
+  className,
+  ...ulProps
+}) => {
+  let processedItems = [...items];
+  if (reverse) processedItems = processedItems.reverse();
+  if (mode === "alternate") {
+    processedItems = processedItems.map((item, index) => ({
+      ...item,
+      position: item.position || (index % 2 === 0 ? "left" : "right")
+    }));
+  }
+  const containerClasses = classNames(
+    getTimelineContainerClasses(mode),
+    timelineListClasses,
+    className
+  );
+  const getItemKey = (item, index) => item.key || index;
+  const wrapCustomDot = (node) => /* @__PURE__ */ jsx("div", { className: getTimelineDotClasses(void 0, true), children: node });
+  const renderDotElement = (item, isPending = false) => {
+    if (customRenderDot) return wrapCustomDot(customRenderDot(item));
+    if (item.dot) return wrapCustomDot(item.dot);
+    if (isPending) {
+      if (pendingDot) {
+        return wrapCustomDot(pendingDot);
+      }
+      return /* @__PURE__ */ jsx("div", { className: getPendingDotClasses() });
+    }
+    const dotClasses = getTimelineDotClasses(item.color);
+    const dotStyle = item.color ? { backgroundColor: item.color } : {};
+    return /* @__PURE__ */ jsx("div", { className: dotClasses, style: dotStyle });
+  };
+  const renderTimelineItem = (item, index) => {
+    const key = getItemKey(item, index);
+    const isLast = index === processedItems.length - 1 && !pending;
+    const position = item.position;
+    const itemClasses = getTimelineItemClasses(mode, position, isLast);
+    const tailClasses = getTimelineTailClasses(mode, position, isLast);
+    const headClasses = getTimelineHeadClasses(mode, position);
+    const contentClasses = getTimelineContentClasses(mode, position);
+    if (renderItem) {
+      return /* @__PURE__ */ jsxs("li", { className: itemClasses, children: [
+        /* @__PURE__ */ jsx("div", { className: tailClasses }),
+        /* @__PURE__ */ jsx("div", { className: headClasses, children: renderDotElement(item) }),
+        /* @__PURE__ */ jsx("div", { className: contentClasses, children: renderItem(item, index) })
+      ] }, key);
+    }
+    return /* @__PURE__ */ jsxs("li", { className: itemClasses, children: [
+      /* @__PURE__ */ jsx("div", { className: tailClasses }),
+      /* @__PURE__ */ jsx("div", { className: headClasses, children: renderDotElement(item) }),
+      /* @__PURE__ */ jsxs("div", { className: contentClasses, children: [
+        item.label && /* @__PURE__ */ jsx("div", { className: timelineLabelClasses, children: item.label }),
+        item.content && /* @__PURE__ */ jsx("div", { className: timelineDescriptionClasses, children: item.content })
+      ] })
+    ] }, key);
+  };
+  const renderPendingItem = () => {
+    if (!pending) {
+      return null;
+    }
+    const index = processedItems.length;
+    const position = mode === "alternate" ? index % 2 === 0 ? "left" : "right" : void 0;
+    const itemClasses = getTimelineItemClasses(mode, position, true);
+    const headClasses = getTimelineHeadClasses(mode, position);
+    const contentClasses = getTimelineContentClasses(mode, position);
+    return /* @__PURE__ */ jsxs("li", { className: itemClasses, children: [
+      /* @__PURE__ */ jsx("div", { className: headClasses, children: renderDotElement({}, true) }),
+      /* @__PURE__ */ jsx("div", { className: contentClasses, children: pendingContent || /* @__PURE__ */ jsx("div", { className: timelineDescriptionClasses, children: "Loading..." }) })
+    ] }, "pending");
+  };
+  return /* @__PURE__ */ jsxs(
+    "ul",
+    {
+      ...ulProps,
+      className: containerClasses,
+      "aria-busy": ulProps["aria-busy"] ?? (pending ? true : void 0),
+      children: [
+        processedItems.map((item, index) => renderTimelineItem(item, index)),
+        renderPendingItem()
+      ]
+    }
+  );
+};
+
+export { Timeline };

package/dist/chunk-LAZGEMA2.mjs

@@ -0,0 +1,176 @@
+import { classNames, getStepsContainerClasses, calculateStepStatus, getStepItemClasses, getStepIconClasses, getStepTailClasses, getStepContentClasses, getStepTitleClasses, getStepDescriptionClasses, stepFinishIconViewBox, stepFinishIconSvgClasses, stepFinishIconPathD, stepFinishIconPathStrokeWidth, stepFinishIconPathStrokeLinejoin, stepFinishIconPathStrokeLinecap } from '@expcat/tigercat-core';
+import React, { createContext, useContext } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/StepsItem.tsx
+var StepsContext = createContext(null);
+function useStepsContext() {
+  return useContext(StepsContext);
+}
+var Steps = ({
+  current = 0,
+  status = "process",
+  direction = "horizontal",
+  size = "default",
+  simple = false,
+  clickable = false,
+  className,
+  style,
+  onChange,
+  children,
+  ...props
+}) => {
+  const containerClasses = classNames(getStepsContainerClasses(direction), className);
+  const handleStepClick = (index) => {
+    if (!clickable) {
+      return;
+    }
+    onChange?.(index);
+  };
+  const contextValue = {
+    current,
+    status,
+    direction,
+    size,
+    simple,
+    clickable,
+    handleStepClick: clickable ? handleStepClick : void 0
+  };
+  const totalCount = React.Children.count(children);
+  const stepsWithProps = React.Children.map(children, (child, index) => {
+    if (React.isValidElement(child) && child.type === StepsItem) {
+      return React.cloneElement(child, {
+        stepIndex: index,
+        isLast: index === totalCount - 1
+      });
+    }
+    return child;
+  });
+  const mergedStyle = {
+    ...style ?? {}
+  };
+  return /* @__PURE__ */ jsx(StepsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("ol", { ...props, className: containerClasses, style: mergedStyle, children: stepsWithProps }) });
+};
+var StepsItem = ({
+  title,
+  description,
+  icon,
+  status: customStatus,
+  disabled = false,
+  stepIndex = 0,
+  isLast = false,
+  className,
+  style,
+  ...props
+}) => {
+  const stepsContext = useStepsContext() || {
+    current: 0,
+    status: "process",
+    direction: "horizontal",
+    size: "default",
+    simple: false,
+    clickable: false
+  };
+  const stepStatus = calculateStepStatus(
+    stepIndex,
+    stepsContext.current,
+    stepsContext.status,
+    customStatus
+  );
+  const isClickable = !!stepsContext.handleStepClick && !disabled;
+  const itemClasses = classNames(
+    getStepItemClasses(stepsContext.direction, isLast, stepsContext.simple),
+    className
+  );
+  const iconClasses = getStepIconClasses(stepStatus, stepsContext.size, stepsContext.simple, !!icon);
+  const tailClasses = getStepTailClasses(stepsContext.direction, stepStatus, isLast);
+  const contentClasses = getStepContentClasses(stepsContext.direction, stepsContext.simple);
+  const titleClasses = getStepTitleClasses(stepStatus, stepsContext.size, isClickable);
+  const descriptionClasses = getStepDescriptionClasses(stepStatus, stepsContext.size);
+  const handleClick = (event) => {
+    if (!isClickable) {
+      return;
+    }
+    stepsContext.handleStepClick?.(stepIndex);
+  };
+  const renderIcon = () => {
+    if (icon) {
+      return /* @__PURE__ */ jsx("div", { className: iconClasses, children: icon });
+    }
+    if (stepStatus === "finish") {
+      return /* @__PURE__ */ jsx("div", { className: iconClasses, children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: stepFinishIconSvgClasses,
+          fill: "none",
+          stroke: "currentColor",
+          viewBox: stepFinishIconViewBox,
+          "aria-hidden": "true",
+          focusable: "false",
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              strokeLinecap: stepFinishIconPathStrokeLinecap,
+              strokeLinejoin: stepFinishIconPathStrokeLinejoin,
+              strokeWidth: stepFinishIconPathStrokeWidth,
+              d: stepFinishIconPathD
+            }
+          )
+        }
+      ) });
+    }
+    return /* @__PURE__ */ jsx("div", { className: iconClasses, children: stepIndex + 1 });
+  };
+  const renderContent = () => {
+    return /* @__PURE__ */ jsxs("div", { className: contentClasses, children: [
+      stepsContext.clickable ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: titleClasses,
+          onClick: handleClick,
+          disabled: !isClickable,
+          "aria-disabled": disabled || void 0,
+          children: title
+        }
+      ) : /* @__PURE__ */ jsx("div", { className: titleClasses, children: title }),
+      !stepsContext.simple && description && /* @__PURE__ */ jsx("div", { className: descriptionClasses, children: description })
+    ] });
+  };
+  if (stepsContext.direction === "vertical") {
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        ...props,
+        className: itemClasses,
+        style,
+        "aria-current": stepIndex === stepsContext.current ? "step" : void 0,
+        "aria-disabled": disabled || void 0,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            renderIcon(),
+            /* @__PURE__ */ jsx("div", { className: tailClasses })
+          ] }),
+          renderContent()
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      ...props,
+      className: itemClasses,
+      style,
+      "aria-current": stepIndex === stepsContext.current ? "step" : void 0,
+      "aria-disabled": disabled || void 0,
+      children: [
+        renderIcon(),
+        /* @__PURE__ */ jsx("div", { className: tailClasses }),
+        renderContent()
+      ]
+    }
+  );
+};
+
+export { Steps, StepsItem, useStepsContext };

package/dist/chunk-LNKI6HQ3.js

@@ -0,0 +1,152 @@
+'use strict';
+
+var chunkNEULKOYJ_js = require('./chunk-NEULKOYJ.js');
+var chunkEQWQXURG_js = require('./chunk-EQWQXURG.js');
+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);
+
+var DropdownContext = React.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] = React.useState(defaultVisible);
+  const visible = controlledVisible !== void 0 ? controlledVisible : internalVisible;
+  const containerRef = React.useRef(null);
+  const hoverTimerRef = React.useRef(null);
+  const setVisible = React.useCallback(
+    (newVisible) => {
+      if (disabled && newVisible) return;
+      if (controlledVisible === void 0) {
+        setInternalVisible(newVisible);
+      }
+      onVisibleChange?.(newVisible);
+    },
+    [disabled, controlledVisible, onVisibleChange]
+  );
+  const handleItemClick = React.useCallback(() => {
+    if (closeOnClick) {
+      setVisible(false);
+    }
+  }, [closeOnClick, setVisible]);
+  const handleMouseEnter = React.useCallback(() => {
+    if (trigger !== "hover") return;
+    if (hoverTimerRef.current) {
+      clearTimeout(hoverTimerRef.current);
+    }
+    hoverTimerRef.current = setTimeout(() => {
+      setVisible(true);
+    }, 100);
+  }, [trigger, setVisible]);
+  const handleMouseLeave = React.useCallback(() => {
+    if (trigger !== "hover") return;
+    if (hoverTimerRef.current) {
+      clearTimeout(hoverTimerRef.current);
+    }
+    hoverTimerRef.current = setTimeout(() => {
+      setVisible(false);
+    }, 150);
+  }, [trigger, setVisible]);
+  const handleClick = React.useCallback(() => {
+    if (trigger !== "click") return;
+    setVisible(!visible);
+  }, [trigger, visible, setVisible]);
+  chunkNEULKOYJ_js.useClickOutside({
+    enabled: trigger === "click" && visible,
+    refs: [containerRef],
+    onOutsideClick: () => setVisible(false)
+  });
+  chunkNEULKOYJ_js.useEscapeKey({
+    enabled: visible,
+    onEscape: () => setVisible(false)
+  });
+  React.useEffect(() => {
+    return () => {
+      if (hoverTimerRef.current) {
+        clearTimeout(hoverTimerRef.current);
+      }
+    };
+  }, []);
+  const containerClasses = tigercatCore.classNames(
+    tigercatCore.getDropdownContainerClasses(),
+    "tiger-dropdown-container",
+    className
+  );
+  const triggerClasses = tigercatCore.getDropdownTriggerClasses(disabled);
+  const menuWrapperClasses = tigercatCore.getDropdownMenuWrapperClasses(visible, placement);
+  const contextValue = {
+    closeOnClick,
+    handleItemClick
+  };
+  const childrenArray = React__default.default.Children.toArray(children);
+  let triggerElement = null;
+  let menuElement = null;
+  childrenArray.forEach((child) => {
+    if (!React__default.default.isValidElement(child)) {
+      if (triggerElement == null) triggerElement = child;
+      return;
+    }
+    if (child.type === chunkEQWQXURG_js.DropdownMenu) {
+      menuElement = child;
+      return;
+    }
+    if (triggerElement == null) {
+      triggerElement = child;
+    }
+  });
+  const handleContainerKeyDown = (event) => {
+    onKeyDown?.(event);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(DropdownContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: containerClasses,
+      style,
+      onKeyDown: handleContainerKeyDown,
+      ...divProps,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: triggerClasses,
+            onClick: handleClick,
+            onMouseEnter: handleMouseEnter,
+            onMouseLeave: handleMouseLeave,
+            "aria-haspopup": "menu",
+            "aria-expanded": visible,
+            children: triggerElement
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: menuWrapperClasses,
+            hidden: !visible,
+            onMouseEnter: handleMouseEnter,
+            onMouseLeave: handleMouseLeave,
+            children: menuElement
+          }
+        )
+      ]
+    }
+  ) });
+};
+
+exports.Dropdown = Dropdown;
+exports.DropdownContext = DropdownContext;

package/dist/chunk-LXA2YBAO.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var chunk3WPKVV4N_js = require('./chunk-3WPKVV4N.js');
+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);
+
+function isComponentNamed(elementType, name) {
+  if (typeof elementType !== "function" && typeof elementType !== "object") return false;
+  const maybeFn = elementType;
+  return maybeFn.displayName === name || maybeFn.name === name;
+}
+var MenuItemGroup = ({
+  title,
+  className,
+  children,
+  level = 0
+}) => {
+  const enhancedChildren = React__default.default.Children.map(children, (child) => {
+    if (!React__default.default.isValidElement(child)) return child;
+    if (child.type === chunk3WPKVV4N_js.MenuItem || isComponentNamed(child.type, "SubMenu")) {
+      return React__default.default.cloneElement(child, {
+        level
+      });
+    }
+    return child;
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "list-none", children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.menuItemGroupTitleClasses, children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "group", className, children: enhancedChildren })
+  ] });
+};
+
+exports.MenuItemGroup = MenuItemGroup;

package/dist/chunk-MKWXJZ3T.js

@@ -0,0 +1,74 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('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 = react.useMemo(
+    () => tigercatCore.classNames(
+      tigercatCore.linkBaseClasses,
+      tigercatCore.getLinkVariantClasses(variant, void 0, { disabled }),
+      tigercatCore.linkSizeClasses[size],
+      underline && "hover:underline",
+      disabled && tigercatCore.linkDisabledClasses,
+      className
+    ),
+    [variant, size, underline, disabled, className]
+  );
+  const computedRel = react.useMemo(() => tigercatCore.getSecureRel(target, rel), [target, rel]);
+  const handleClick = react.useCallback(
+    (event) => {
+      if (disabled) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      onClick?.(event);
+    },
+    [disabled, onClick]
+  );
+  const handleKeyDown = react.useCallback(
+    (event) => {
+      if (disabled && (event.key === "Enter" || event.key === " ")) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      onKeyDown?.(event);
+    },
+    [disabled, onKeyDown]
+  );
+  return /* @__PURE__ */ jsxRuntime.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
+    }
+  );
+};
+
+exports.Link = Link;

package/dist/chunk-MQXBU5YX.mjs

@@ -0,0 +1,87 @@
+import { RadioGroupContext } from './chunk-5HUYCSA4.mjs';
+import { useContext, useState } from 'react';
+import { getRadioColorClasses, getRadioVisualClasses, getRadioDotClasses, getRadioLabelClasses, classNames } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var Radio = ({
+  value,
+  size,
+  disabled,
+  name,
+  checked,
+  defaultChecked = false,
+  onChange,
+  children,
+  className,
+  style,
+  ...props
+}) => {
+  const groupContext = useContext(RadioGroupContext);
+  const [internalChecked, setInternalChecked] = useState(defaultChecked);
+  const isCheckedControlled = checked !== void 0;
+  const isInGroup = !!groupContext;
+  const actualSize = size || groupContext?.size || "md";
+  const actualDisabled = disabled !== void 0 ? disabled : groupContext?.disabled || false;
+  const actualName = name || groupContext?.name || "";
+  const isChecked = checked !== void 0 ? checked : groupContext?.value !== void 0 ? groupContext.value === value : internalChecked;
+  const colors = getRadioColorClasses();
+  const radioClasses = getRadioVisualClasses({
+    size: actualSize,
+    checked: isChecked,
+    disabled: actualDisabled,
+    colors
+  });
+  const dotClasses = getRadioDotClasses({
+    size: actualSize,
+    checked: isChecked,
+    colors
+  });
+  const labelClasses = getRadioLabelClasses({
+    size: actualSize,
+    disabled: actualDisabled,
+    colors
+  });
+  const handleChange = (event) => {
+    if (actualDisabled) {
+      event.preventDefault();
+      return;
+    }
+    const newChecked = event.target.checked;
+    if (!newChecked) return;
+    if (!isCheckedControlled && !isInGroup) {
+      setInternalChecked(true);
+    }
+    onChange?.(value);
+    groupContext?.onChange?.(value);
+  };
+  const handleKeyDown = (event) => {
+    props.onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+    if (actualDisabled) return;
+    if (event.key === "Enter") {
+      event.preventDefault();
+      const input = event.currentTarget;
+      if (!input.checked) input.click();
+    }
+  };
+  return /* @__PURE__ */ jsxs("label", { className: classNames("inline-flex items-center", className), style, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "radio",
+        className: "sr-only peer",
+        ...props,
+        name: actualName,
+        value,
+        checked: isChecked,
+        disabled: actualDisabled,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: radioClasses, "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: dotClasses }) }),
+    children && /* @__PURE__ */ jsx("span", { className: labelClasses, children })
+  ] });
+};
+
+export { Radio };

package/dist/chunk-NEULKOYJ.js

@@ -0,0 +1,48 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/utils/overlay.ts
+function useClickOutside({
+  enabled,
+  refs,
+  onOutsideClick,
+  defer = false
+}) {
+  react.useEffect(() => {
+    if (!enabled) return;
+    const handler = (event) => {
+      const elements = refs.map((ref) => ref?.current);
+      if (tigercatCore.isEventOutside(event, elements)) {
+        onOutsideClick();
+      }
+    };
+    const attach = () => document.addEventListener("click", handler);
+    const detach = () => document.removeEventListener("click", handler);
+    if (!defer) {
+      attach();
+      return () => detach();
+    }
+    const timer = window.setTimeout(() => attach(), 0);
+    return () => {
+      window.clearTimeout(timer);
+      detach();
+    };
+  }, [enabled, refs, onOutsideClick, defer]);
+}
+function useEscapeKey({ enabled, onEscape }) {
+  react.useEffect(() => {
+    if (!enabled) return;
+    const handler = (event) => {
+      if (event.defaultPrevented) return;
+      if (!tigercatCore.isEscapeKey(event)) return;
+      onEscape();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [enabled, onEscape]);
+}
+
+exports.useClickOutside = useClickOutside;
+exports.useEscapeKey = useEscapeKey;