@evolve.ui/core-components 1.0.0

package/CardGrid-BpX_oOS4.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardGrid-BpX_oOS4.mjs","names":[],"sources":["../src/Card/hooks/useCardVisibilityTracking.ts","../src/Card/CardGrid.tsx"],"sourcesContent":["import { useCallback, useRef } from 'react';\n\nimport { useIntersectionObserver } from '../../JumpMenu/hooks/useIntersectionObserver';\n\n/**\n * Options for the useCardVisibilityTracking hook\n */\ntype UseCardVisibilityTrackingOptions = {\n    /**\n     * Threshold at which to trigger the visibility callback.\n     * 0.5 means the callback fires when 50% of the card is visible.\n     * @default 0.5\n     */\n    threshold?: number;\n};\n\n/**\n * Hook that tracks when a card becomes visible in the viewport\n * and fires a callback only once per card.\n *\n * @param onVisible - Callback function to call when a card becomes visible\n * @param options - Configuration options for visibility detection\n * @returns A function that returns a ref callback for a specific card key\n *\n * @example\n * ```tsx\n * const getVisibilityRef = useCardVisibilityTracking(\n *   (cardKey) => trackItemVisible(cardKey),\n *   { threshold: 0.5 }\n * );\n *\n * <Card visibilityRef={getVisibilityRef('card-123')} />\n * ```\n */\nexport const useCardVisibilityTracking = <CardKey extends string | number>(\n    onVisible: (cardKey: CardKey) => void,\n    options: UseCardVisibilityTrackingOptions = {}\n) => {\n    const { threshold = 0.5 } = options;\n\n    // Track which cards have already triggered the callback\n    const seenCardsRef = useRef<Set<string>>(new Set());\n\n    // Handle intersection changes\n    const handleIntersection = useCallback(\n        (entries: IntersectionObserverEntry[]) => {\n            entries.forEach((entry) => {\n                // Only fire callback if card is intersecting and meets the threshold requirement\n                if (entry.isIntersecting && entry.intersectionRatio >= threshold) {\n                    // Extract card key from the element's data attribute\n                    const element = entry.target as HTMLElement;\n                    const cardKey = element.getAttribute('data-card-key');\n\n                    if (cardKey && !seenCardsRef.current.has(cardKey)) {\n                        seenCardsRef.current.add(cardKey);\n                        onVisible(cardKey as CardKey);\n                    }\n                }\n            });\n        },\n        [onVisible, threshold]\n    );\n\n    // Create intersection observer with specified threshold\n    const { observe } = useIntersectionObserver(handleIntersection, {\n        threshold,\n    });\n\n    // Return a function that creates a ref callback for a specific card key\n    const getRefCallback = useCallback(\n        (cardKey: CardKey) => (element: Element | null) => {\n            if (element) {\n                // Set the card key as a data attribute\n                (element as HTMLElement).setAttribute('data-card-key', String(cardKey));\n                observe(element);\n            }\n        },\n        [observe]\n    );\n\n    return getRefCallback;\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport { useCallback, useMemo } from 'react';\n\nimport { nodeEnv } from '../utils/nodeEnv';\nimport { useCardVisibilityTracking } from './hooks/useCardVisibilityTracking';\nimport { SharedProps } from './sharedProps';\n\ntype SpacingToken = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';\n\ntype Props<CardData, KeyType extends string | number> = {\n    /**\n     * The data to pass to the card components.\n     */\n    cardData: Record<KeyType, CardData>;\n    /**\n     * Which cards to render. These should all be keys in `cardData`.\n     *\n     * If this is empty, then `skeletonCardCount` skeleton cards will be rendered (if set).\n     */\n    cards: KeyType[];\n    className?: string;\n    /**\n     * The number of columns to display at each breakpoint.\n     *\n     * @default { xs: 2, sm: 3, md: 4, lg: 4, xl: 4 }\n     */\n    colsByBreakpoint: { xs: number } & { [key in 'sm' | 'md' | 'lg' | 'xl']?: number };\n    /**\n     * The gap between cards at each breakpoint.\n     * gapsByBreakpoint: { xs: 'xs' } means that the gap at xsMax breakpoint is 8px.\n     *\n     * @default { xs: 'sm', sm: 'sm', md: 'md', lg: 'md', xl: 'md' }\n     */\n    gapsByBreakpoint: {\n        // lgMax: { max: '1644px' },\n        lg?: SpacingToken;\n        // mdMax: { max: '1248px' },\n        md?: SpacingToken;\n        // smMax: { max: '1023px' },\n        sm?: SpacingToken;\n        // lgMin: { min: '1249px' },\n        xl?: SpacingToken;\n        // xsMax: { max: '768px' },\n        xs?: SpacingToken;\n    };\n    /**\n     * Optional callback function to call when a card is clicked.\n     * The card data is passed to the function.\n     * Note: This should be handled by specific clickable elements within the card (links, buttons)\n     * rather than the card wrapper itself.\n     */\n    onCardClick?: (cardData: CardData) => void;\n    /**\n     * The function to call when a card becomes visible in the viewport.\n     * This callback fires only once per card when it first becomes visible.\n     * The card data is passed to the function.\n     */\n    onCardVisible?: (cardData: CardData) => void;\n    /**\n     * The number of skeleton cards to render.\n     *\n     * This is ignored if `cards` is nonempty.\n     */\n    skeletonCardCount?: number;\n} & SharedProps<CardData>;\n\nexport const CardGrid = <CardData, KeyType extends string | number>({\n    card: Card,\n    cardData,\n    cards,\n    className,\n    // Default values that work well for 4 column grid\n    colsByBreakpoint = {\n        lg: 4,\n        md: 4,\n        sm: 3,\n        xl: 4,\n        xs: 2,\n    },\n    forceSkeleton = false,\n    // Default values that work well for 4 column grid\n    gapsByBreakpoint = {\n        lg: 'md',\n        md: 'md',\n        sm: 'sm',\n        xl: 'md',\n        xs: 'sm',\n    },\n    onCardClick,\n    onCardVisible,\n    skeletonCardCount = 0,\n}: Props<CardData, KeyType>) => {\n    const doesGridHaveLoadedData = cards.length > 0 && Object.keys(cardData).length > 0 && !forceSkeleton;\n\n    const gridClasses = useMemo(\n        () =>\n            cn(\n                'grid',\n                `grid-cols-${colsByBreakpoint.xs}`,\n                `gap-${gapsByBreakpoint.xs}`,\n                {\n                    'lgMax:gap-lg': gapsByBreakpoint.lg === 'lg',\n                    'lgMax:gap-md': gapsByBreakpoint.lg === 'md',\n                    'lgMax:gap-sm': gapsByBreakpoint.lg === 'sm',\n                    'lgMax:gap-xl': gapsByBreakpoint.lg === 'xl',\n                    'lgMax:gap-xs': gapsByBreakpoint.lg === 'xs',\n\n                    'lgMax:grid-cols-1': colsByBreakpoint.lg === 1,\n                    'lgMax:grid-cols-2': colsByBreakpoint.lg === 2,\n                    'lgMax:grid-cols-3': colsByBreakpoint.lg === 3,\n                    'lgMax:grid-cols-4': colsByBreakpoint.lg === 4,\n                    'lgMax:grid-cols-5': colsByBreakpoint.lg === 5,\n                    'lgMax:grid-cols-6': colsByBreakpoint.lg === 6,\n\n                    'lgMin:gap-lg': gapsByBreakpoint.lg === 'lg',\n                    'lgMin:gap-md': gapsByBreakpoint.lg === 'md',\n                    'lgMin:gap-sm': gapsByBreakpoint.lg === 'sm',\n                    'lgMin:gap-xl': gapsByBreakpoint.lg === 'xl',\n                    'lgMin:gap-xs': gapsByBreakpoint.lg === 'xs',\n\n                    // Min-width breakpoints for largest size (lgMin)\n                    'lgMin:grid-cols-1': colsByBreakpoint.lg === 1,\n                    'lgMin:grid-cols-2': colsByBreakpoint.lg === 2,\n                    'lgMin:grid-cols-3': colsByBreakpoint.lg === 3,\n                    'lgMin:grid-cols-4': colsByBreakpoint.lg === 4,\n                    'lgMin:grid-cols-5': colsByBreakpoint.lg === 5,\n                    'lgMin:grid-cols-6': colsByBreakpoint.lg === 6,\n                    'mdMax:gap-lg': gapsByBreakpoint.md === 'lg',\n                    'mdMax:gap-md': gapsByBreakpoint.md === 'md',\n                    'mdMax:gap-sm': gapsByBreakpoint.md === 'sm',\n                    'mdMax:gap-xl': gapsByBreakpoint.md === 'xl',\n                    'mdMax:gap-xs': gapsByBreakpoint.md === 'xs',\n\n                    'mdMax:grid-cols-1': colsByBreakpoint.md === 1,\n                    'mdMax:grid-cols-2': colsByBreakpoint.md === 2,\n                    'mdMax:grid-cols-3': colsByBreakpoint.md === 3,\n                    'mdMax:grid-cols-4': colsByBreakpoint.md === 4,\n                    'mdMax:grid-cols-5': colsByBreakpoint.md === 5,\n                    'mdMax:grid-cols-6': colsByBreakpoint.md === 6,\n\n                    'smMax:gap-lg': gapsByBreakpoint.sm === 'lg',\n                    'smMax:gap-md': gapsByBreakpoint.sm === 'md',\n                    'smMax:gap-sm': gapsByBreakpoint.sm === 'sm',\n                    'smMax:gap-xl': gapsByBreakpoint.sm === 'xl',\n                    'smMax:gap-xs': gapsByBreakpoint.sm === 'xs',\n\n                    'smMax:grid-cols-1': colsByBreakpoint.sm === 1,\n                    'smMax:grid-cols-2': colsByBreakpoint.sm === 2,\n                    'smMax:grid-cols-3': colsByBreakpoint.sm === 3,\n                    'smMax:grid-cols-4': colsByBreakpoint.sm === 4,\n                    'smMax:grid-cols-5': colsByBreakpoint.sm === 5,\n                    'smMax:grid-cols-6': colsByBreakpoint.sm === 6,\n                    'xsMax:gap-lg': gapsByBreakpoint.xs === 'lg',\n                    'xsMax:gap-md': gapsByBreakpoint.xs === 'md',\n                    'xsMax:gap-sm': gapsByBreakpoint.xs === 'sm',\n                    'xsMax:gap-xl': gapsByBreakpoint.xs === 'xl',\n\n                    // Max-width breakpoints for gaps\n                    'xsMax:gap-xs': gapsByBreakpoint.xs === 'xs',\n                    // Max-width breakpoints for columns\n\n                    'xsMax:grid-cols-1': colsByBreakpoint.xs === 1,\n                    'xsMax:grid-cols-2': colsByBreakpoint.xs === 2,\n                    'xsMax:grid-cols-3': colsByBreakpoint.xs === 3,\n                    'xsMax:grid-cols-4': colsByBreakpoint.xs === 4,\n                    'xsMax:grid-cols-5': colsByBreakpoint.xs === 5,\n                    'xsMax:grid-cols-6': colsByBreakpoint.xs === 6,\n                },\n                className\n            ),\n        [\n            className,\n            colsByBreakpoint.lg,\n            colsByBreakpoint.md,\n            colsByBreakpoint.sm,\n            colsByBreakpoint.xs,\n            gapsByBreakpoint.lg,\n            gapsByBreakpoint.md,\n            gapsByBreakpoint.sm,\n            gapsByBreakpoint.xs,\n        ]\n    );\n\n    // Memoize the card click handler\n    const handleCardClick = useCallback(\n        (cardData: CardData) => {\n            onCardClick?.(cardData);\n        },\n        [onCardClick]\n    );\n\n    return (\n        <div className={gridClasses}>\n            {doesGridHaveLoadedData ? (\n                <LoadedCardGrid\n                    card={Card}\n                    cardData={cardData}\n                    cards={cards}\n                    onCardClick={handleCardClick}\n                    onCardVisible={onCardVisible}\n                />\n            ) : (\n                new Array(skeletonCardCount).fill(0).map((_, i) => <Card.Skeleton key={i} />)\n            )}\n        </div>\n    );\n};\n\n/**\n * This grid is the one that does the checks / we are sure that the card data is loaded.\n */\nconst LoadedCardGrid = <CardData, KeyType extends string | number>({\n    card: Card,\n    cardData,\n    cards,\n    onCardClick,\n    onCardVisible,\n}: Pick<Props<CardData, KeyType>, 'card' | 'cardData' | 'cards' | 'onCardClick' | 'onCardVisible' | 'className'>) => {\n    // Development only checks.\n    if (nodeEnv !== 'production') {\n        for (const card of cards) {\n            if (!cardData[card]) {\n                // eslint-disable-next-line no-console\n                console.error(`Card data does not have card with id '${card}'`);\n            }\n        }\n    }\n\n    // Wrap the onCardVisible callback to map card keys back to card data\n    const handleCardVisible = useCallback(\n        (cardKey: KeyType) => {\n            if (onCardVisible && cardData[cardKey]) {\n                onCardVisible(cardData[cardKey]);\n            }\n        },\n        [onCardVisible, cardData]\n    );\n\n    // Set up visibility tracking - only create if callback is provided\n    const getVisibilityRef = useCardVisibilityTracking<KeyType>(handleCardVisible, { threshold: 0.5 });\n\n    return useMemo(\n        () =>\n            cards\n                .filter((card) => {\n                    if (!cardData[card]) {\n                        // eslint-disable-next-line no-console\n                        console.error(`Card data does not have card with id '${card}'`);\n                        return false;\n                    }\n                    return true;\n                })\n                .map((card) => (\n                    <Card.Normal\n                        cardData={cardData[card]}\n                        key={card}\n                        onCardClick={onCardClick}\n                        visibilityRef={onCardVisible ? getVisibilityRef(card) : undefined}\n                    />\n                )),\n        [cards, cardData, Card, onCardClick, onCardVisible, getVisibilityRef]\n    );\n};\n"],"mappings":"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"}

package/CardGrid-CHZSF83h.d.mts

@@ -0,0 +1,72 @@
+import { t as SharedProps } from "./sharedProps-D7PSXdXt.mjs";
+
+//#region src/Card/CardGrid.d.ts
+type SpacingToken = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+type Props<CardData, KeyType extends string | number> = {
+  /**
+   * The data to pass to the card components.
+   */
+  cardData: Record<KeyType, CardData>;
+  /**
+   * Which cards to render. These should all be keys in `cardData`.
+   *
+   * If this is empty, then `skeletonCardCount` skeleton cards will be rendered (if set).
+   */
+  cards: KeyType[];
+  className?: string;
+  /**
+   * The number of columns to display at each breakpoint.
+   *
+   * @default { xs: 2, sm: 3, md: 4, lg: 4, xl: 4 }
+   */
+  colsByBreakpoint: {
+    xs: number;
+  } & { [key in 'sm' | 'md' | 'lg' | 'xl']?: number };
+  /**
+   * The gap between cards at each breakpoint.
+   * gapsByBreakpoint: { xs: 'xs' } means that the gap at xsMax breakpoint is 8px.
+   *
+   * @default { xs: 'sm', sm: 'sm', md: 'md', lg: 'md', xl: 'md' }
+   */
+  gapsByBreakpoint: {
+    lg?: SpacingToken;
+    md?: SpacingToken;
+    sm?: SpacingToken;
+    xl?: SpacingToken;
+    xs?: SpacingToken;
+  };
+  /**
+   * Optional callback function to call when a card is clicked.
+   * The card data is passed to the function.
+   * Note: This should be handled by specific clickable elements within the card (links, buttons)
+   * rather than the card wrapper itself.
+   */
+  onCardClick?: (cardData: CardData) => void;
+  /**
+   * The function to call when a card becomes visible in the viewport.
+   * This callback fires only once per card when it first becomes visible.
+   * The card data is passed to the function.
+   */
+  onCardVisible?: (cardData: CardData) => void;
+  /**
+   * The number of skeleton cards to render.
+   *
+   * This is ignored if `cards` is nonempty.
+   */
+  skeletonCardCount?: number;
+} & SharedProps<CardData>;
+declare const CardGrid: <CardData, KeyType extends string | number>({
+  card: Card,
+  cardData,
+  cards,
+  className,
+  colsByBreakpoint,
+  forceSkeleton,
+  gapsByBreakpoint,
+  onCardClick,
+  onCardVisible,
+  skeletonCardCount
+}: Props<CardData, KeyType>) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { CardGrid as t };
+//# sourceMappingURL=CardGrid-CHZSF83h.d.mts.map

package/CardGrid-CHZSF83h.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardGrid-CHZSF83h.d.mts","names":[],"sources":["../src/Card/CardGrid.tsx"],"mappings":";;;KAOK,YAAA;AAAA,KAEA,KAAA;EAFA;;;EAMD,QAAA,EAAU,MAAA,CAAO,OAAA,EAAS,QAAA;EANb;AAAA;;;;EAYb,KAAA,EAAO,OAAA;EACP,SAAA;EADO;;;;;EAOP,gBAAA;IAAoB,EAAA;EAAA;EAsCT;;;;;;EA/BX,gBAAA;IAEI,EAAA,GAAK,YAAA;IAEL,EAAA,GAAK,YAAA;IAEL,EAAA,GAAK,YAAA;IAEL,EAAA,GAAK,YAAA;IAEL,EAAA,GAAK,YAAA;EAAA;EAjB6B;;;;;;EAyBtC,WAAA,IAAe,QAAA,EAAU,QAAA;EAZhB;;;;;EAkBT,aAAA,IAAiB,QAAA,EAAU,QAAA;EANF;;;;;EAYzB,iBAAA;AAAA,IACA,WAAA,CAAY,QAAA;AAAA,cAEH,QAAA;EAAuD,IAAA,EAAA,IAAA;EAAA,QAAA;EAAA,KAAA;EAAA,SAAA;EAAA,gBAAA;EAAA,aAAA;EAAA,gBAAA;EAAA,WAAA;EAAA,aAAA;EAAA;AAAA,GAyBjE,KAAA,CAAM,QAAA,EAAU,OAAA,kCAAQ,GAAA,CAAA,OAAA"}

package/CardGrid-CXi9XvDo.cjs

@@ -0,0 +1,180 @@
+const require_nodeEnv = require("./nodeEnv-BdQ-HyQz.cjs");
+const require_useIntersectionObserver = require("./useIntersectionObserver-oYkZjzFF.cjs");
+let _evolve_ui_theme_system = require("@evolve.ui/theme-system");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/Card/hooks/useCardVisibilityTracking.ts
+/**
+* Hook that tracks when a card becomes visible in the viewport
+* and fires a callback only once per card.
+*
+* @param onVisible - Callback function to call when a card becomes visible
+* @param options - Configuration options for visibility detection
+* @returns A function that returns a ref callback for a specific card key
+*
+* @example
+* ```tsx
+* const getVisibilityRef = useCardVisibilityTracking(
+*   (cardKey) => trackItemVisible(cardKey),
+*   { threshold: 0.5 }
+* );
+*
+* <Card visibilityRef={getVisibilityRef('card-123')} />
+* ```
+*/
+const useCardVisibilityTracking = (onVisible, options = {}) => {
+	const { threshold = .5 } = options;
+	const seenCardsRef = (0, react.useRef)(/* @__PURE__ */ new Set());
+	const { observe } = require_useIntersectionObserver.useIntersectionObserver((0, react.useCallback)((entries) => {
+		entries.forEach((entry) => {
+			if (entry.isIntersecting && entry.intersectionRatio >= threshold) {
+				const cardKey = entry.target.getAttribute("data-card-key");
+				if (cardKey && !seenCardsRef.current.has(cardKey)) {
+					seenCardsRef.current.add(cardKey);
+					onVisible(cardKey);
+				}
+			}
+		});
+	}, [onVisible, threshold]), { threshold });
+	return (0, react.useCallback)((cardKey) => (element) => {
+		if (element) {
+			element.setAttribute("data-card-key", String(cardKey));
+			observe(element);
+		}
+	}, [observe]);
+};
+//#endregion
+//#region src/Card/CardGrid.tsx
+const CardGrid = ({ card: Card, cardData, cards, className, colsByBreakpoint = {
+	lg: 4,
+	md: 4,
+	sm: 3,
+	xl: 4,
+	xs: 2
+}, forceSkeleton = false, gapsByBreakpoint = {
+	lg: "md",
+	md: "md",
+	sm: "sm",
+	xl: "md",
+	xs: "sm"
+}, onCardClick, onCardVisible, skeletonCardCount = 0 }) => {
+	const doesGridHaveLoadedData = cards.length > 0 && Object.keys(cardData).length > 0 && !forceSkeleton;
+	const gridClasses = (0, react.useMemo)(() => (0, _evolve_ui_theme_system.cn)("grid", `grid-cols-${colsByBreakpoint.xs}`, `gap-${gapsByBreakpoint.xs}`, {
+		"lgMax:gap-lg": gapsByBreakpoint.lg === "lg",
+		"lgMax:gap-md": gapsByBreakpoint.lg === "md",
+		"lgMax:gap-sm": gapsByBreakpoint.lg === "sm",
+		"lgMax:gap-xl": gapsByBreakpoint.lg === "xl",
+		"lgMax:gap-xs": gapsByBreakpoint.lg === "xs",
+		"lgMax:grid-cols-1": colsByBreakpoint.lg === 1,
+		"lgMax:grid-cols-2": colsByBreakpoint.lg === 2,
+		"lgMax:grid-cols-3": colsByBreakpoint.lg === 3,
+		"lgMax:grid-cols-4": colsByBreakpoint.lg === 4,
+		"lgMax:grid-cols-5": colsByBreakpoint.lg === 5,
+		"lgMax:grid-cols-6": colsByBreakpoint.lg === 6,
+		"lgMin:gap-lg": gapsByBreakpoint.lg === "lg",
+		"lgMin:gap-md": gapsByBreakpoint.lg === "md",
+		"lgMin:gap-sm": gapsByBreakpoint.lg === "sm",
+		"lgMin:gap-xl": gapsByBreakpoint.lg === "xl",
+		"lgMin:gap-xs": gapsByBreakpoint.lg === "xs",
+		"lgMin:grid-cols-1": colsByBreakpoint.lg === 1,
+		"lgMin:grid-cols-2": colsByBreakpoint.lg === 2,
+		"lgMin:grid-cols-3": colsByBreakpoint.lg === 3,
+		"lgMin:grid-cols-4": colsByBreakpoint.lg === 4,
+		"lgMin:grid-cols-5": colsByBreakpoint.lg === 5,
+		"lgMin:grid-cols-6": colsByBreakpoint.lg === 6,
+		"mdMax:gap-lg": gapsByBreakpoint.md === "lg",
+		"mdMax:gap-md": gapsByBreakpoint.md === "md",
+		"mdMax:gap-sm": gapsByBreakpoint.md === "sm",
+		"mdMax:gap-xl": gapsByBreakpoint.md === "xl",
+		"mdMax:gap-xs": gapsByBreakpoint.md === "xs",
+		"mdMax:grid-cols-1": colsByBreakpoint.md === 1,
+		"mdMax:grid-cols-2": colsByBreakpoint.md === 2,
+		"mdMax:grid-cols-3": colsByBreakpoint.md === 3,
+		"mdMax:grid-cols-4": colsByBreakpoint.md === 4,
+		"mdMax:grid-cols-5": colsByBreakpoint.md === 5,
+		"mdMax:grid-cols-6": colsByBreakpoint.md === 6,
+		"smMax:gap-lg": gapsByBreakpoint.sm === "lg",
+		"smMax:gap-md": gapsByBreakpoint.sm === "md",
+		"smMax:gap-sm": gapsByBreakpoint.sm === "sm",
+		"smMax:gap-xl": gapsByBreakpoint.sm === "xl",
+		"smMax:gap-xs": gapsByBreakpoint.sm === "xs",
+		"smMax:grid-cols-1": colsByBreakpoint.sm === 1,
+		"smMax:grid-cols-2": colsByBreakpoint.sm === 2,
+		"smMax:grid-cols-3": colsByBreakpoint.sm === 3,
+		"smMax:grid-cols-4": colsByBreakpoint.sm === 4,
+		"smMax:grid-cols-5": colsByBreakpoint.sm === 5,
+		"smMax:grid-cols-6": colsByBreakpoint.sm === 6,
+		"xsMax:gap-lg": gapsByBreakpoint.xs === "lg",
+		"xsMax:gap-md": gapsByBreakpoint.xs === "md",
+		"xsMax:gap-sm": gapsByBreakpoint.xs === "sm",
+		"xsMax:gap-xl": gapsByBreakpoint.xs === "xl",
+		"xsMax:gap-xs": gapsByBreakpoint.xs === "xs",
+		"xsMax:grid-cols-1": colsByBreakpoint.xs === 1,
+		"xsMax:grid-cols-2": colsByBreakpoint.xs === 2,
+		"xsMax:grid-cols-3": colsByBreakpoint.xs === 3,
+		"xsMax:grid-cols-4": colsByBreakpoint.xs === 4,
+		"xsMax:grid-cols-5": colsByBreakpoint.xs === 5,
+		"xsMax:grid-cols-6": colsByBreakpoint.xs === 6
+	}, className), [
+		className,
+		colsByBreakpoint.lg,
+		colsByBreakpoint.md,
+		colsByBreakpoint.sm,
+		colsByBreakpoint.xs,
+		gapsByBreakpoint.lg,
+		gapsByBreakpoint.md,
+		gapsByBreakpoint.sm,
+		gapsByBreakpoint.xs
+	]);
+	const handleCardClick = (0, react.useCallback)((cardData) => {
+		onCardClick?.(cardData);
+	}, [onCardClick]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: gridClasses,
+		children: doesGridHaveLoadedData ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoadedCardGrid, {
+			card: Card,
+			cardData,
+			cards,
+			onCardClick: handleCardClick,
+			onCardVisible
+		}) : new Array(skeletonCardCount).fill(0).map((_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Card.Skeleton, {}, i))
+	});
+};
+/**
+* This grid is the one that does the checks / we are sure that the card data is loaded.
+*/
+const LoadedCardGrid = ({ card: Card, cardData, cards, onCardClick, onCardVisible }) => {
+	if (require_nodeEnv.nodeEnv !== "production") {
+		for (const card of cards) if (!cardData[card]) console.error(`Card data does not have card with id '${card}'`);
+	}
+	const getVisibilityRef = useCardVisibilityTracking((0, react.useCallback)((cardKey) => {
+		if (onCardVisible && cardData[cardKey]) onCardVisible(cardData[cardKey]);
+	}, [onCardVisible, cardData]), { threshold: .5 });
+	return (0, react.useMemo)(() => cards.filter((card) => {
+		if (!cardData[card]) {
+			console.error(`Card data does not have card with id '${card}'`);
+			return false;
+		}
+		return true;
+	}).map((card) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Card.Normal, {
+		cardData: cardData[card],
+		onCardClick,
+		visibilityRef: onCardVisible ? getVisibilityRef(card) : void 0
+	}, card)), [
+		cards,
+		cardData,
+		Card,
+		onCardClick,
+		onCardVisible,
+		getVisibilityRef
+	]);
+};
+//#endregion
+Object.defineProperty(exports, "CardGrid", {
+	enumerable: true,
+	get: function() {
+		return CardGrid;
+	}
+});
+
+//# sourceMappingURL=CardGrid-CXi9XvDo.cjs.map

package/CardGrid-CXi9XvDo.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardGrid-CXi9XvDo.cjs","names":["useIntersectionObserver","nodeEnv"],"sources":["../src/Card/hooks/useCardVisibilityTracking.ts","../src/Card/CardGrid.tsx"],"sourcesContent":["import { useCallback, useRef } from 'react';\n\nimport { useIntersectionObserver } from '../../JumpMenu/hooks/useIntersectionObserver';\n\n/**\n * Options for the useCardVisibilityTracking hook\n */\ntype UseCardVisibilityTrackingOptions = {\n    /**\n     * Threshold at which to trigger the visibility callback.\n     * 0.5 means the callback fires when 50% of the card is visible.\n     * @default 0.5\n     */\n    threshold?: number;\n};\n\n/**\n * Hook that tracks when a card becomes visible in the viewport\n * and fires a callback only once per card.\n *\n * @param onVisible - Callback function to call when a card becomes visible\n * @param options - Configuration options for visibility detection\n * @returns A function that returns a ref callback for a specific card key\n *\n * @example\n * ```tsx\n * const getVisibilityRef = useCardVisibilityTracking(\n *   (cardKey) => trackItemVisible(cardKey),\n *   { threshold: 0.5 }\n * );\n *\n * <Card visibilityRef={getVisibilityRef('card-123')} />\n * ```\n */\nexport const useCardVisibilityTracking = <CardKey extends string | number>(\n    onVisible: (cardKey: CardKey) => void,\n    options: UseCardVisibilityTrackingOptions = {}\n) => {\n    const { threshold = 0.5 } = options;\n\n    // Track which cards have already triggered the callback\n    const seenCardsRef = useRef<Set<string>>(new Set());\n\n    // Handle intersection changes\n    const handleIntersection = useCallback(\n        (entries: IntersectionObserverEntry[]) => {\n            entries.forEach((entry) => {\n                // Only fire callback if card is intersecting and meets the threshold requirement\n                if (entry.isIntersecting && entry.intersectionRatio >= threshold) {\n                    // Extract card key from the element's data attribute\n                    const element = entry.target as HTMLElement;\n                    const cardKey = element.getAttribute('data-card-key');\n\n                    if (cardKey && !seenCardsRef.current.has(cardKey)) {\n                        seenCardsRef.current.add(cardKey);\n                        onVisible(cardKey as CardKey);\n                    }\n                }\n            });\n        },\n        [onVisible, threshold]\n    );\n\n    // Create intersection observer with specified threshold\n    const { observe } = useIntersectionObserver(handleIntersection, {\n        threshold,\n    });\n\n    // Return a function that creates a ref callback for a specific card key\n    const getRefCallback = useCallback(\n        (cardKey: CardKey) => (element: Element | null) => {\n            if (element) {\n                // Set the card key as a data attribute\n                (element as HTMLElement).setAttribute('data-card-key', String(cardKey));\n                observe(element);\n            }\n        },\n        [observe]\n    );\n\n    return getRefCallback;\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport { useCallback, useMemo } from 'react';\n\nimport { nodeEnv } from '../utils/nodeEnv';\nimport { useCardVisibilityTracking } from './hooks/useCardVisibilityTracking';\nimport { SharedProps } from './sharedProps';\n\ntype SpacingToken = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';\n\ntype Props<CardData, KeyType extends string | number> = {\n    /**\n     * The data to pass to the card components.\n     */\n    cardData: Record<KeyType, CardData>;\n    /**\n     * Which cards to render. These should all be keys in `cardData`.\n     *\n     * If this is empty, then `skeletonCardCount` skeleton cards will be rendered (if set).\n     */\n    cards: KeyType[];\n    className?: string;\n    /**\n     * The number of columns to display at each breakpoint.\n     *\n     * @default { xs: 2, sm: 3, md: 4, lg: 4, xl: 4 }\n     */\n    colsByBreakpoint: { xs: number } & { [key in 'sm' | 'md' | 'lg' | 'xl']?: number };\n    /**\n     * The gap between cards at each breakpoint.\n     * gapsByBreakpoint: { xs: 'xs' } means that the gap at xsMax breakpoint is 8px.\n     *\n     * @default { xs: 'sm', sm: 'sm', md: 'md', lg: 'md', xl: 'md' }\n     */\n    gapsByBreakpoint: {\n        // lgMax: { max: '1644px' },\n        lg?: SpacingToken;\n        // mdMax: { max: '1248px' },\n        md?: SpacingToken;\n        // smMax: { max: '1023px' },\n        sm?: SpacingToken;\n        // lgMin: { min: '1249px' },\n        xl?: SpacingToken;\n        // xsMax: { max: '768px' },\n        xs?: SpacingToken;\n    };\n    /**\n     * Optional callback function to call when a card is clicked.\n     * The card data is passed to the function.\n     * Note: This should be handled by specific clickable elements within the card (links, buttons)\n     * rather than the card wrapper itself.\n     */\n    onCardClick?: (cardData: CardData) => void;\n    /**\n     * The function to call when a card becomes visible in the viewport.\n     * This callback fires only once per card when it first becomes visible.\n     * The card data is passed to the function.\n     */\n    onCardVisible?: (cardData: CardData) => void;\n    /**\n     * The number of skeleton cards to render.\n     *\n     * This is ignored if `cards` is nonempty.\n     */\n    skeletonCardCount?: number;\n} & SharedProps<CardData>;\n\nexport const CardGrid = <CardData, KeyType extends string | number>({\n    card: Card,\n    cardData,\n    cards,\n    className,\n    // Default values that work well for 4 column grid\n    colsByBreakpoint = {\n        lg: 4,\n        md: 4,\n        sm: 3,\n        xl: 4,\n        xs: 2,\n    },\n    forceSkeleton = false,\n    // Default values that work well for 4 column grid\n    gapsByBreakpoint = {\n        lg: 'md',\n        md: 'md',\n        sm: 'sm',\n        xl: 'md',\n        xs: 'sm',\n    },\n    onCardClick,\n    onCardVisible,\n    skeletonCardCount = 0,\n}: Props<CardData, KeyType>) => {\n    const doesGridHaveLoadedData = cards.length > 0 && Object.keys(cardData).length > 0 && !forceSkeleton;\n\n    const gridClasses = useMemo(\n        () =>\n            cn(\n                'grid',\n                `grid-cols-${colsByBreakpoint.xs}`,\n                `gap-${gapsByBreakpoint.xs}`,\n                {\n                    'lgMax:gap-lg': gapsByBreakpoint.lg === 'lg',\n                    'lgMax:gap-md': gapsByBreakpoint.lg === 'md',\n                    'lgMax:gap-sm': gapsByBreakpoint.lg === 'sm',\n                    'lgMax:gap-xl': gapsByBreakpoint.lg === 'xl',\n                    'lgMax:gap-xs': gapsByBreakpoint.lg === 'xs',\n\n                    'lgMax:grid-cols-1': colsByBreakpoint.lg === 1,\n                    'lgMax:grid-cols-2': colsByBreakpoint.lg === 2,\n                    'lgMax:grid-cols-3': colsByBreakpoint.lg === 3,\n                    'lgMax:grid-cols-4': colsByBreakpoint.lg === 4,\n                    'lgMax:grid-cols-5': colsByBreakpoint.lg === 5,\n                    'lgMax:grid-cols-6': colsByBreakpoint.lg === 6,\n\n                    'lgMin:gap-lg': gapsByBreakpoint.lg === 'lg',\n                    'lgMin:gap-md': gapsByBreakpoint.lg === 'md',\n                    'lgMin:gap-sm': gapsByBreakpoint.lg === 'sm',\n                    'lgMin:gap-xl': gapsByBreakpoint.lg === 'xl',\n                    'lgMin:gap-xs': gapsByBreakpoint.lg === 'xs',\n\n                    // Min-width breakpoints for largest size (lgMin)\n                    'lgMin:grid-cols-1': colsByBreakpoint.lg === 1,\n                    'lgMin:grid-cols-2': colsByBreakpoint.lg === 2,\n                    'lgMin:grid-cols-3': colsByBreakpoint.lg === 3,\n                    'lgMin:grid-cols-4': colsByBreakpoint.lg === 4,\n                    'lgMin:grid-cols-5': colsByBreakpoint.lg === 5,\n                    'lgMin:grid-cols-6': colsByBreakpoint.lg === 6,\n                    'mdMax:gap-lg': gapsByBreakpoint.md === 'lg',\n                    'mdMax:gap-md': gapsByBreakpoint.md === 'md',\n                    'mdMax:gap-sm': gapsByBreakpoint.md === 'sm',\n                    'mdMax:gap-xl': gapsByBreakpoint.md === 'xl',\n                    'mdMax:gap-xs': gapsByBreakpoint.md === 'xs',\n\n                    'mdMax:grid-cols-1': colsByBreakpoint.md === 1,\n                    'mdMax:grid-cols-2': colsByBreakpoint.md === 2,\n                    'mdMax:grid-cols-3': colsByBreakpoint.md === 3,\n                    'mdMax:grid-cols-4': colsByBreakpoint.md === 4,\n                    'mdMax:grid-cols-5': colsByBreakpoint.md === 5,\n                    'mdMax:grid-cols-6': colsByBreakpoint.md === 6,\n\n                    'smMax:gap-lg': gapsByBreakpoint.sm === 'lg',\n                    'smMax:gap-md': gapsByBreakpoint.sm === 'md',\n                    'smMax:gap-sm': gapsByBreakpoint.sm === 'sm',\n                    'smMax:gap-xl': gapsByBreakpoint.sm === 'xl',\n                    'smMax:gap-xs': gapsByBreakpoint.sm === 'xs',\n\n                    'smMax:grid-cols-1': colsByBreakpoint.sm === 1,\n                    'smMax:grid-cols-2': colsByBreakpoint.sm === 2,\n                    'smMax:grid-cols-3': colsByBreakpoint.sm === 3,\n                    'smMax:grid-cols-4': colsByBreakpoint.sm === 4,\n                    'smMax:grid-cols-5': colsByBreakpoint.sm === 5,\n                    'smMax:grid-cols-6': colsByBreakpoint.sm === 6,\n                    'xsMax:gap-lg': gapsByBreakpoint.xs === 'lg',\n                    'xsMax:gap-md': gapsByBreakpoint.xs === 'md',\n                    'xsMax:gap-sm': gapsByBreakpoint.xs === 'sm',\n                    'xsMax:gap-xl': gapsByBreakpoint.xs === 'xl',\n\n                    // Max-width breakpoints for gaps\n                    'xsMax:gap-xs': gapsByBreakpoint.xs === 'xs',\n                    // Max-width breakpoints for columns\n\n                    'xsMax:grid-cols-1': colsByBreakpoint.xs === 1,\n                    'xsMax:grid-cols-2': colsByBreakpoint.xs === 2,\n                    'xsMax:grid-cols-3': colsByBreakpoint.xs === 3,\n                    'xsMax:grid-cols-4': colsByBreakpoint.xs === 4,\n                    'xsMax:grid-cols-5': colsByBreakpoint.xs === 5,\n                    'xsMax:grid-cols-6': colsByBreakpoint.xs === 6,\n                },\n                className\n            ),\n        [\n            className,\n            colsByBreakpoint.lg,\n            colsByBreakpoint.md,\n            colsByBreakpoint.sm,\n            colsByBreakpoint.xs,\n            gapsByBreakpoint.lg,\n            gapsByBreakpoint.md,\n            gapsByBreakpoint.sm,\n            gapsByBreakpoint.xs,\n        ]\n    );\n\n    // Memoize the card click handler\n    const handleCardClick = useCallback(\n        (cardData: CardData) => {\n            onCardClick?.(cardData);\n        },\n        [onCardClick]\n    );\n\n    return (\n        <div className={gridClasses}>\n            {doesGridHaveLoadedData ? (\n                <LoadedCardGrid\n                    card={Card}\n                    cardData={cardData}\n                    cards={cards}\n                    onCardClick={handleCardClick}\n                    onCardVisible={onCardVisible}\n                />\n            ) : (\n                new Array(skeletonCardCount).fill(0).map((_, i) => <Card.Skeleton key={i} />)\n            )}\n        </div>\n    );\n};\n\n/**\n * This grid is the one that does the checks / we are sure that the card data is loaded.\n */\nconst LoadedCardGrid = <CardData, KeyType extends string | number>({\n    card: Card,\n    cardData,\n    cards,\n    onCardClick,\n    onCardVisible,\n}: Pick<Props<CardData, KeyType>, 'card' | 'cardData' | 'cards' | 'onCardClick' | 'onCardVisible' | 'className'>) => {\n    // Development only checks.\n    if (nodeEnv !== 'production') {\n        for (const card of cards) {\n            if (!cardData[card]) {\n                // eslint-disable-next-line no-console\n                console.error(`Card data does not have card with id '${card}'`);\n            }\n        }\n    }\n\n    // Wrap the onCardVisible callback to map card keys back to card data\n    const handleCardVisible = useCallback(\n        (cardKey: KeyType) => {\n            if (onCardVisible && cardData[cardKey]) {\n                onCardVisible(cardData[cardKey]);\n            }\n        },\n        [onCardVisible, cardData]\n    );\n\n    // Set up visibility tracking - only create if callback is provided\n    const getVisibilityRef = useCardVisibilityTracking<KeyType>(handleCardVisible, { threshold: 0.5 });\n\n    return useMemo(\n        () =>\n            cards\n                .filter((card) => {\n                    if (!cardData[card]) {\n                        // eslint-disable-next-line no-console\n                        console.error(`Card data does not have card with id '${card}'`);\n                        return false;\n                    }\n                    return true;\n                })\n                .map((card) => (\n                    <Card.Normal\n                        cardData={cardData[card]}\n                        key={card}\n                        onCardClick={onCardClick}\n                        visibilityRef={onCardVisible ? getVisibilityRef(card) : undefined}\n                    />\n                )),\n        [cards, cardData, Card, onCardClick, onCardVisible, getVisibilityRef]\n    );\n};\n"],"mappings":"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"}