@expcat/tigercat-react 2.1.2 → 2.1.4

package/dist/chunk-I5TELDUV.mjs

@@ -1,78 +0,0 @@
-// src/components/Icon.tsx
-import React from "react";
-import {
-  classNames,
-  iconSizeClasses,
-  iconSvgBaseClasses,
-  iconSvgDefaultStrokeLinecap,
-  iconSvgDefaultStrokeLinejoin,
-  iconSvgDefaultStrokeWidth,
-  iconWrapperClasses,
-  getIconDefinition,
-  SVG_DEFAULT_FILL,
-  SVG_DEFAULT_STROKE,
-  SVG_DEFAULT_VIEWBOX_24,
-  SVG_DEFAULT_XMLNS
-} from "@expcat/tigercat-core";
-import { jsx } from "react/jsx-runtime";
-var Icon = ({
-  name,
-  icon,
-  size = "md",
-  color = "currentColor",
-  className,
-  style,
-  children,
-  ...props
-}) => {
-  const iconClasses = classNames(iconWrapperClasses, className);
-  const iconStyle = { ...style, color };
-  const isDecorative = props["aria-label"] == null && props["aria-labelledby"] == null && props.role == null;
-  const hasChildren = React.Children.count(children) > 0;
-  const definition = !hasChildren ? icon ?? (name ? getIconDefinition(name) : void 0) : void 0;
-  const builtInSvg = definition ? /* @__PURE__ */ jsx(
-    "svg",
-    {
-      className: classNames(iconSvgBaseClasses, iconSizeClasses[size]),
-      xmlns: SVG_DEFAULT_XMLNS,
-      viewBox: definition.viewBox,
-      fill: definition.mode === "fill" ? "currentColor" : SVG_DEFAULT_FILL,
-      stroke: definition.mode === "stroke" ? "currentColor" : SVG_DEFAULT_STROKE,
-      strokeWidth: definition.mode === "stroke" ? 1.5 : void 0,
-      strokeLinecap: definition.mode === "stroke" ? iconSvgDefaultStrokeLinecap : void 0,
-      strokeLinejoin: definition.mode === "stroke" ? iconSvgDefaultStrokeLinejoin : void 0,
-      children: definition.paths.map((d, i) => /* @__PURE__ */ jsx("path", { d }, i))
-    }
-  ) : null;
-  const processedChildren = React.Children.map(children, (child) => {
-    if (!React.isValidElement(child) || child.type !== "svg") {
-      return child;
-    }
-    const svgProps = child.props;
-    return React.cloneElement(child, {
-      ...svgProps,
-      className: classNames(iconSvgBaseClasses, iconSizeClasses[size], svgProps.className),
-      xmlns: svgProps.xmlns ?? SVG_DEFAULT_XMLNS,
-      viewBox: svgProps.viewBox ?? SVG_DEFAULT_VIEWBOX_24,
-      fill: svgProps.fill ?? SVG_DEFAULT_FILL,
-      stroke: svgProps.stroke ?? SVG_DEFAULT_STROKE,
-      strokeWidth: svgProps.strokeWidth ?? iconSvgDefaultStrokeWidth,
-      strokeLinecap: svgProps.strokeLinecap ?? iconSvgDefaultStrokeLinecap,
-      strokeLinejoin: svgProps.strokeLinejoin ?? iconSvgDefaultStrokeLinejoin
-    });
-  });
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      ...props,
-      className: iconClasses,
-      style: iconStyle,
-      ...isDecorative ? { "aria-hidden": true } : { role: props.role ?? "img" },
-      children: builtInSvg ?? processedChildren
-    }
-  );
-};
-
-export {
-  Icon
-};

package/dist/chunk-IIWUQK2P.mjs

@@ -1,109 +0,0 @@
-import {
-  RadioGroupContext
-} from "./chunk-AKNWUI7K.mjs";
-import {
-  useControlledState
-} from "./chunk-MEFARVQI.mjs";
-
-// src/components/Radio.tsx
-import { useContext, useMemo } from "react";
-import {
-  classNames,
-  getRadioDotClasses,
-  getRadioLabelClasses,
-  getRadioVisualClasses,
-  defaultRadioColors,
-  radioRootBaseClasses
-} from "@expcat/tigercat-core";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Radio = ({
-  value,
-  size,
-  disabled,
-  name,
-  checked,
-  defaultChecked = false,
-  onChange,
-  children,
-  className,
-  style,
-  ...props
-}) => {
-  const groupContext = useContext(RadioGroupContext);
-  const [checkedState, setChecked] = useControlledState(checked, defaultChecked);
-  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 && groupContext?.value !== void 0 ? groupContext.value === value : checkedState;
-  const radioClasses = useMemo(
-    () => getRadioVisualClasses({
-      size: actualSize,
-      checked: isChecked,
-      disabled: actualDisabled,
-      colors: defaultRadioColors
-    }),
-    [actualSize, isChecked, actualDisabled]
-  );
-  const dotClasses = useMemo(
-    () => getRadioDotClasses({
-      size: actualSize,
-      checked: isChecked,
-      colors: defaultRadioColors
-    }),
-    [actualSize, isChecked]
-  );
-  const labelClasses = useMemo(
-    () => getRadioLabelClasses({
-      size: actualSize,
-      disabled: actualDisabled,
-      colors: defaultRadioColors
-    }),
-    [actualSize, actualDisabled]
-  );
-  const handleChange = (event) => {
-    if (actualDisabled) {
-      event.preventDefault();
-      return;
-    }
-    const newChecked = event.target.checked;
-    if (!newChecked) return;
-    if (!isInGroup) {
-      setChecked(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(radioRootBaseClasses, 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-IXV5YBCZ.mjs

@@ -1,65 +0,0 @@
-// src/components/Card.tsx
-import React from "react";
-import {
-  classNames,
-  getCardClasses,
-  resolveCardPadding,
-  cardHeaderClasses,
-  cardFooterClasses,
-  cardCoverWrapperClasses,
-  cardCoverClasses,
-  cardActionsClasses,
-  cardDirectionClasses,
-  cardHorizontalBodyClasses
-} from "@expcat/tigercat-core";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var Card = React.memo(
-  ({
-    variant = "default",
-    size = "md",
-    direction = "vertical",
-    hoverable = false,
-    cover,
-    coverAlt = "Card cover image",
-    padding,
-    header,
-    footer,
-    actions,
-    className,
-    children,
-    ...props
-  }) => {
-    const isHorizontal = direction === "horizontal";
-    const paddingClass = resolveCardPadding(size, padding);
-    const sectionSizeClass = cover ? paddingClass : void 0;
-    const cardClasses = classNames(
-      getCardClasses(variant, hoverable),
-      cardDirectionClasses[direction],
-      !cover && paddingClass,
-      className
-    );
-    const getSectionClasses = (baseClasses) => classNames(baseClasses, sectionSizeClass);
-    const bodyContent = /* @__PURE__ */ jsxs(Fragment, { children: [
-      header != null && /* @__PURE__ */ jsx("div", { className: getSectionClasses(cardHeaderClasses), children: header }),
-      children != null && /* @__PURE__ */ jsx("div", { className: sectionSizeClass, children }),
-      footer != null && /* @__PURE__ */ jsx("div", { className: getSectionClasses(cardFooterClasses), children: footer }),
-      actions != null && /* @__PURE__ */ jsx("div", { className: getSectionClasses(classNames(cardActionsClasses, cardFooterClasses)), children: actions })
-    ] });
-    return /* @__PURE__ */ jsxs("div", { className: cardClasses, ...props, children: [
-      cover && /* @__PURE__ */ jsx("div", { className: cardCoverWrapperClasses, children: /* @__PURE__ */ jsx(
-        "img",
-        {
-          src: cover,
-          alt: coverAlt,
-          className: classNames(cardCoverClasses, isHorizontal && "h-full w-48 object-cover")
-        }
-      ) }),
-      isHorizontal ? /* @__PURE__ */ jsx("div", { className: cardHorizontalBodyClasses, children: bodyContent }) : bodyContent
-    ] });
-  }
-);
-Card.displayName = "Card";
-
-export {
-  Card
-};

package/dist/chunk-J76R2S62.mjs

@@ -1,161 +0,0 @@
-// src/components/Masonry.tsx
-import {
-  Children,
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-  useSyncExternalStore
-} from "react";
-import {
-  classNames,
-  computeMasonryColumnHeights,
-  distributeMasonryItems,
-  getMasonryColumnClasses,
-  getMasonryColumnStyle,
-  getMasonryGapStyle,
-  getMasonryItemClasses,
-  getMasonryRootClasses,
-  moduloDistributeMasonryItems,
-  observeScrollAreaSize,
-  readMasonryItemHeight,
-  resolveMasonryColumnCount,
-  resolveMasonryGap,
-  MASONRY_DEFAULT_COLUMNS,
-  MASONRY_DEFAULT_GAP
-} from "@expcat/tigercat-core";
-import { jsx } from "react/jsx-runtime";
-function childSignature(nodes) {
-  return nodes.map(
-    (node, index) => `${index}:${typeof node === "object" && node !== null && "key" in node ? String(node.key ?? "") : String(node)}`
-  ).join("\0");
-}
-function sameHeights(previous, next) {
-  return previous.length === next.length && previous.every((height, index) => height === next[index]);
-}
-function subscribeToResize(onChange) {
-  window.addEventListener("resize", onChange);
-  return () => window.removeEventListener("resize", onChange);
-}
-var noopSubscribe = () => () => void 0;
-var Masonry = forwardRef(
-  ({
-    columns = MASONRY_DEFAULT_COLUMNS,
-    gap = MASONRY_DEFAULT_GAP,
-    className,
-    columnClassName,
-    itemClassName,
-    children,
-    onLayout,
-    style,
-    ...rest
-  }, ref) => {
-    const itemRefs = useRef(/* @__PURE__ */ new Map());
-    const heightsRef = useRef([]);
-    const lastSignatureRef = useRef("");
-    const onLayoutRef = useRef(onLayout);
-    onLayoutRef.current = onLayout;
-    const [distribution, setDistribution] = useState([]);
-    const childNodes = useMemo(() => Children.toArray(children), [children]);
-    const signature = childSignature(childNodes);
-    const isResponsive = typeof columns === "object" || typeof gap === "object";
-    const subscribe = useMemo(
-      () => isResponsive ? subscribeToResize : noopSubscribe,
-      [isResponsive]
-    );
-    const windowWidth = useSyncExternalStore(
-      subscribe,
-      () => window.innerWidth,
-      () => 1024
-    );
-    const columnCount = resolveMasonryColumnCount(columns, windowWidth);
-    const gapPx = resolveMasonryGap(gap, windowWidth);
-    const relayout = useCallback(() => {
-      const elements = itemRefs.current;
-      const indices = Array.from(elements.keys());
-      const maxIndex = indices.length > 0 ? Math.max(...indices) : -1;
-      const nextHeights = [];
-      for (let index = 0; index <= maxIndex; index++) {
-        const element = elements.get(index);
-        nextHeights.push(element ? readMasonryItemHeight(element) : 0);
-      }
-      const countChanged = nextHeights.length !== heightsRef.current.length;
-      if (!countChanged && sameHeights(heightsRef.current, nextHeights)) return;
-      heightsRef.current = nextHeights;
-      const nextDistribution = distributeMasonryItems(nextHeights, columnCount);
-      setDistribution(nextDistribution);
-      onLayoutRef.current?.({
-        columnCount,
-        columnHeights: computeMasonryColumnHeights(nextHeights, nextDistribution, gapPx)
-      });
-    }, [columnCount, gapPx]);
-    useEffect(() => {
-      if (lastSignatureRef.current !== signature) {
-        lastSignatureRef.current = signature;
-        relayout();
-        return;
-      }
-      if (heightsRef.current.length === 0) return;
-      const nextDistribution = distributeMasonryItems(heightsRef.current, columnCount);
-      setDistribution(nextDistribution);
-      onLayoutRef.current?.({
-        columnCount,
-        columnHeights: computeMasonryColumnHeights(heightsRef.current, nextDistribution, gapPx)
-      });
-    }, [signature, columnCount, gapPx, relayout]);
-    useEffect(() => {
-      if (childNodes.length === 0) return;
-      return observeScrollAreaSize(Array.from(itemRefs.current.values()), relayout);
-    }, [signature, distribution, relayout, childNodes.length]);
-    useImperativeHandle(
-      ref,
-      () => ({
-        relayout,
-        getColumnCount: () => columnCount
-      }),
-      [relayout, columnCount]
-    );
-    const activeDistribution = distribution.length > 0 && heightsRef.current.length === childNodes.length ? distribution : moduloDistributeMasonryItems(childNodes.length, columnCount);
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ...rest,
-        className: classNames(getMasonryRootClasses(className)),
-        style: { ...getMasonryGapStyle(gapPx), ...style },
-        "data-masonry": "",
-        children: activeDistribution.map((indices, columnIndex) => /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: getMasonryColumnClasses(columnClassName),
-            style: getMasonryColumnStyle(gapPx),
-            "data-masonry-column": columnIndex,
-            children: indices.map((index) => /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: getMasonryItemClasses(itemClassName),
-                "data-masonry-item": index,
-                ref: (el) => {
-                  if (el) itemRefs.current.set(index, el);
-                  else itemRefs.current.delete(index);
-                },
-                children: childNodes[index]
-              },
-              `item-${index}`
-            ))
-          },
-          `column-${columnIndex}`
-        ))
-      }
-    );
-  }
-);
-Masonry.displayName = "Masonry";
-var Masonry_default = Masonry;
-
-export {
-  Masonry,
-  Masonry_default
-};

package/dist/chunk-JZZPLKTW.mjs

@@ -1,173 +0,0 @@
-// src/hooks/useChartInteraction.ts
-import { useState, useMemo, useCallback, useEffect, useRef } from "react";
-import {
-  classNames,
-  createChartPointerMoveScheduler,
-  getChartElementOpacity
-} from "@expcat/tigercat-core";
-function useChartInteraction(options) {
-  const {
-    hoverable,
-    showTooltip = true,
-    hoveredIndexProp,
-    selectable,
-    selectedIndexProp,
-    activeOpacity,
-    inactiveOpacity,
-    legendPosition = "bottom",
-    onHoveredIndexChange,
-    onSelectedIndexChange,
-    getData,
-    callbacks
-  } = options;
-  const [localHoveredIndex, setLocalHoveredIndex] = useState(null);
-  const [localSelectedIndex, setLocalSelectedIndex] = useState(null);
-  const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
-  const tooltipSchedulerRef = useRef(null);
-  if (tooltipSchedulerRef.current === null) {
-    tooltipSchedulerRef.current = createChartPointerMoveScheduler({
-      onPositionChange: setTooltipPosition
-    });
-  }
-  const tooltipScheduler = tooltipSchedulerRef.current;
-  useEffect(() => {
-    return () => tooltipScheduler.cancel();
-  }, [tooltipScheduler]);
-  const resolvedHoveredIndex = hoveredIndexProp !== void 0 ? hoveredIndexProp : localHoveredIndex;
-  const resolvedSelectedIndex = selectedIndexProp !== void 0 ? selectedIndexProp : localSelectedIndex;
-  const activeIndex = useMemo(() => {
-    if (resolvedSelectedIndex !== null) return resolvedSelectedIndex;
-    if (hoverable && resolvedHoveredIndex !== null) return resolvedHoveredIndex;
-    return null;
-  }, [resolvedSelectedIndex, hoverable, resolvedHoveredIndex]);
-  const getElementOpacity = useCallback(
-    (index) => {
-      return getChartElementOpacity(index, activeIndex, {
-        activeOpacity,
-        inactiveOpacity
-      });
-    },
-    [activeIndex, activeOpacity, inactiveOpacity]
-  );
-  const handleMouseEnter = useCallback(
-    (index, event) => {
-      if (!hoverable && !showTooltip) return;
-      if (hoveredIndexProp === void 0) {
-        setLocalHoveredIndex(index);
-      }
-      setTooltipPosition({ x: event.clientX, y: event.clientY });
-      if (!hoverable) return;
-      onHoveredIndexChange?.(index);
-      if (callbacks?.onHover && getData) {
-        callbacks.onHover(index, getData(index) ?? null);
-      }
-    },
-    [hoverable, showTooltip, hoveredIndexProp, onHoveredIndexChange, callbacks, getData]
-  );
-  const handleMouseMove = useCallback(
-    (event) => {
-      tooltipScheduler.schedule({ x: event.clientX, y: event.clientY });
-    },
-    [tooltipScheduler]
-  );
-  const handleMouseLeave = useCallback(() => {
-    tooltipScheduler.cancel();
-    if (!hoverable && !showTooltip) return;
-    if (hoveredIndexProp === void 0) {
-      setLocalHoveredIndex(null);
-    }
-    if (!hoverable) return;
-    onHoveredIndexChange?.(null);
-    callbacks?.onHover?.(null, null);
-  }, [hoverable, showTooltip, tooltipScheduler, hoveredIndexProp, onHoveredIndexChange, callbacks]);
-  const handleClick = useCallback(
-    (index) => {
-      if (!selectable) return;
-      const nextIndex = resolvedSelectedIndex === index ? null : index;
-      if (selectedIndexProp === void 0) {
-        setLocalSelectedIndex(nextIndex);
-      }
-      onSelectedIndexChange?.(nextIndex);
-      if (callbacks?.onClick && getData) {
-        const datum = getData(index);
-        if (datum) callbacks.onClick(index, datum);
-      }
-    },
-    [
-      selectable,
-      resolvedSelectedIndex,
-      selectedIndexProp,
-      onSelectedIndexChange,
-      callbacks,
-      getData
-    ]
-  );
-  const handleKeyDown = useCallback(
-    (event, index) => {
-      if (!selectable) return;
-      if (event.key !== "Enter" && event.key !== " ") return;
-      event.preventDefault();
-      handleClick(index);
-    },
-    [selectable, handleClick]
-  );
-  const handleLegendClick = useCallback(
-    (index) => {
-      handleClick(index);
-    },
-    [handleClick]
-  );
-  const handleLegendHover = useCallback(
-    (index) => {
-      if (!hoverable) return;
-      if (hoveredIndexProp === void 0) {
-        setLocalHoveredIndex(index);
-      }
-      onHoveredIndexChange?.(index);
-    },
-    [hoverable, hoveredIndexProp, onHoveredIndexChange]
-  );
-  const handleLegendLeave = useCallback(() => {
-    handleMouseLeave();
-  }, [handleMouseLeave]);
-  const wrapperClasses = useMemo(() => {
-    return classNames(
-      "inline-flex",
-      legendPosition === "right" ? "flex-row items-start gap-4" : legendPosition === "left" ? "flex-row-reverse items-start gap-4" : legendPosition === "top" ? "flex-col-reverse gap-2" : "flex-col gap-2"
-    );
-  }, [legendPosition]);
-  const createLegendItems = useCallback(
-    (items, palette, labelFormatter) => {
-      return items.map((item, index) => ({
-        index,
-        label: labelFormatter ? labelFormatter(item, index) : item.label ?? String(item.x ?? index),
-        color: item.color ?? palette[index % palette.length],
-        active: activeIndex === null || activeIndex === index
-      }));
-    },
-    [activeIndex]
-  );
-  return {
-    localHoveredIndex,
-    localSelectedIndex,
-    tooltipPosition,
-    resolvedHoveredIndex,
-    resolvedSelectedIndex,
-    activeIndex,
-    getElementOpacity,
-    handleMouseEnter,
-    handleMouseMove,
-    handleMouseLeave,
-    handleClick,
-    handleKeyDown,
-    handleLegendClick,
-    handleLegendHover,
-    handleLegendLeave,
-    wrapperClasses,
-    createLegendItems
-  };
-}
-
-export {
-  useChartInteraction
-};

package/dist/chunk-KCPGFO5R.mjs

@@ -1,51 +0,0 @@
-import {
-  StatusIcon
-} from "./chunk-FLYJVZED.mjs";
-
-// src/components/Result.tsx
-import { useMemo } from "react";
-import {
-  classNames,
-  resultBaseClasses,
-  resultIconContainerBaseClasses,
-  resultIconClasses,
-  resultTitleClasses,
-  resultSubTitleClasses,
-  resultExtraClasses,
-  getResultColorScheme,
-  getResultIconPath,
-  isHttpResultStatus
-} from "@expcat/tigercat-core";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Result = ({
-  status = "info",
-  title,
-  subTitle,
-  icon,
-  extra,
-  className,
-  children,
-  ...props
-}) => {
-  const colors = useMemo(() => getResultColorScheme(status), [status]);
-  const iconPath = useMemo(() => getResultIconPath(status), [status]);
-  const httpLabel = useMemo(() => isHttpResultStatus(status) ? status : void 0, [status]);
-  const wrapperClasses = useMemo(() => classNames(resultBaseClasses, className), [className]);
-  const iconContainerCls = useMemo(
-    () => classNames(resultIconContainerBaseClasses, colors.iconBg),
-    [colors]
-  );
-  const iconSvgCls = useMemo(() => classNames(resultIconClasses, colors.iconColor), [colors]);
-  const titleCls = useMemo(() => classNames(resultTitleClasses, colors.titleColor), [colors]);
-  return /* @__PURE__ */ jsxs("div", { className: wrapperClasses, role: "status", ...props, children: [
-    /* @__PURE__ */ jsx("div", { className: iconContainerCls, children: icon !== void 0 ? icon : httpLabel ? /* @__PURE__ */ jsx("span", { className: classNames("text-5xl font-bold", colors.iconColor), children: httpLabel }) : /* @__PURE__ */ jsx(StatusIcon, { path: iconPath, className: iconSvgCls }) }),
-    title && /* @__PURE__ */ jsx("div", { className: titleCls, children: title }),
-    subTitle && /* @__PURE__ */ jsx("div", { className: resultSubTitleClasses, children: subTitle }),
-    extra && /* @__PURE__ */ jsx("div", { className: resultExtraClasses, children: extra }),
-    children && /* @__PURE__ */ jsx("div", { className: "mt-6 w-full", children })
-  ] });
-};
-
-export {
-  Result
-};