@evolve.ui/core-components 1.0.0

package/ViewMore-BrZPuE4E.mjs

@@ -0,0 +1,133 @@
+import { CaretDown, CaretUp } from "./Icons.mjs";
+import { InlineButton } from "./Typography/InlineButton.mjs";
+import { t as effectEventListener } from "./effectEventListener-WApakaup.mjs";
+import { cn, wrapVarRgb } from "@evolve.ui/theme-system";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/utils/smoothScrollTo.ts
+/**
+* Easing function for smooth scroll animation
+* Uses cubic easing in-out curve
+* @param t - Progress value between 0 and 1
+* @returns Eased progress value
+*/
+const easeInOutCubic = (t) => {
+	return t < .5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+};
+/**
+* Smoothly scrolls the window to a specific vertical position using requestAnimationFrame
+* @param targetY - The target vertical scroll position in pixels
+* @param duration - The duration of the scroll animation in milliseconds (defaults to 300ms)
+*
+* @example
+* ```tsx
+* // Scroll to 500px from the top over 300ms
+* smoothScrollTo(500);
+*
+* // Scroll to top of an element with custom duration
+* const element = document.getElementById('my-element');
+* if (element) {
+*   const targetY = element.getBoundingClientRect().top + window.scrollY;
+*   smoothScrollTo(targetY, 500);
+* }
+* ```
+*/
+const smoothScrollTo = (targetY, duration = 300) => {
+	const startY = window.scrollY;
+	const distance = targetY - startY;
+	const startTime = performance.now();
+	const scroll = (currentTime) => {
+		const elapsed = currentTime - startTime;
+		const progress = Math.min(elapsed / duration, 1);
+		const easeProgress = easeInOutCubic(progress);
+		window.scrollTo(0, startY + distance * easeProgress);
+		if (progress < 1) requestAnimationFrame(scroll);
+	};
+	requestAnimationFrame(scroll);
+};
+//#endregion
+//#region src/ViewMore/ViewMore.tsx
+const SCROLL_TOP_OFFSET = 100;
+const SCROLL_DURATION = 200;
+const ViewMore = ({ centerInlineButton, children, className, collapseText = "Read Less", defaultExpanded = false, disableExpand = false, expandText = "Read More", fadeBackgroundColor, onChange, onClick, removeFadeBackgroundColor, showIcon = false, textCutoffHeight = 150, useWeakInlineButton }) => {
+	const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+	const [height, setHeight] = useState(defaultExpanded ? 9999 : textCutoffHeight);
+	const [showViewToggle, setShowViewToggle] = useState(false);
+	const [enableTransitions, setEnableTransitions] = useState(false);
+	const containerRef = useRef(null);
+	const contentRef = useRef(null);
+	const toggleDescription = useCallback((event) => {
+		onClick?.(event);
+		if (disableExpand) return;
+		setEnableTransitions(true);
+		setIsExpanded((prevIsExpanded) => {
+			const newHeight = prevIsExpanded ? textCutoffHeight : contentRef.current?.scrollHeight ?? textCutoffHeight;
+			setHeight(newHeight);
+			onChange?.(!prevIsExpanded);
+			if (prevIsExpanded && containerRef.current) smoothScrollTo(containerRef.current.getBoundingClientRect().top + window.scrollY - SCROLL_TOP_OFFSET, SCROLL_DURATION);
+			return !prevIsExpanded;
+		});
+	}, [
+		textCutoffHeight,
+		onChange,
+		onClick,
+		disableExpand
+	]);
+	const updateView = useCallback(() => {
+		if (!contentRef.current) return;
+		const scrollHeight = contentRef.current.scrollHeight;
+		const shouldShowToggle = scrollHeight > textCutoffHeight;
+		setShowViewToggle(shouldShowToggle);
+		setHeight(isExpanded || !shouldShowToggle ? scrollHeight : textCutoffHeight);
+	}, [isExpanded, textCutoffHeight]);
+	useEffect(() => {
+		if (!contentRef.current) return;
+		updateView();
+		const cleanupResizeListener = effectEventListener(window, "resize", updateView);
+		const resizeObserver = new ResizeObserver(updateView);
+		resizeObserver.observe(contentRef.current);
+		return () => {
+			cleanupResizeListener();
+			resizeObserver.disconnect();
+		};
+	}, [updateView, children]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(className, "flex flex-col gap-xs"),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cn("relative overflow-hidden", { "transition-all duration-300 ease-in-out": enableTransitions }),
+			"data-testid": "description-container",
+			ref: containerRef,
+			style: {
+				height: showViewToggle ? `${height}px` : "auto",
+				maxHeight: showViewToggle || isExpanded ? void 0 : `${textCutoffHeight}px`
+			},
+			children: [/* @__PURE__ */ jsx("div", {
+				ref: contentRef,
+				children
+			}), showViewToggle && !removeFadeBackgroundColor && !isExpanded && /* @__PURE__ */ jsx("div", {
+				className: "absolute bottom-0 left-0 right-0 h-xl w-full",
+				style: { background: fadeBackgroundColor ? `linear-gradient(to bottom, transparent, ${fadeBackgroundColor})` : `linear-gradient(to bottom, transparent, ${wrapVarRgb("--color-background-primary")})` }
+			})]
+		}), showViewToggle && /* @__PURE__ */ jsx("div", {
+			className: cn("w-full", { "text-center": centerInlineButton }),
+			children: useWeakInlineButton ? /* @__PURE__ */ jsx(InlineButton, {
+				className: "w-fit",
+				icon: showIcon ? isExpanded ? CaretUp : CaretDown : void 0,
+				iconPlacement: "right",
+				onClick: toggleDescription,
+				style: "neutral",
+				children: isExpanded ? collapseText : expandText
+			}) : /* @__PURE__ */ jsx(InlineButton, {
+				className: "w-fit",
+				icon: showIcon ? isExpanded ? CaretUp : CaretDown : void 0,
+				iconPlacement: "right",
+				onClick: toggleDescription,
+				children: isExpanded ? collapseText : expandText
+			})
+		})]
+	});
+};
+//#endregion
+export { ViewMore as t };
+
+//# sourceMappingURL=ViewMore-BrZPuE4E.mjs.map

package/ViewMore-BrZPuE4E.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewMore-BrZPuE4E.mjs","names":[],"sources":["../src/utils/smoothScrollTo.ts","../src/ViewMore/ViewMore.tsx"],"sourcesContent":["/**\n * Easing function for smooth scroll animation\n * Uses cubic easing in-out curve\n * @param t - Progress value between 0 and 1\n * @returns Eased progress value\n */\nconst easeInOutCubic = (t: number): number => {\n    return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;\n};\n\n/**\n * Smoothly scrolls the window to a specific vertical position using requestAnimationFrame\n * @param targetY - The target vertical scroll position in pixels\n * @param duration - The duration of the scroll animation in milliseconds (defaults to 300ms)\n *\n * @example\n * ```tsx\n * // Scroll to 500px from the top over 300ms\n * smoothScrollTo(500);\n *\n * // Scroll to top of an element with custom duration\n * const element = document.getElementById('my-element');\n * if (element) {\n *   const targetY = element.getBoundingClientRect().top + window.scrollY;\n *   smoothScrollTo(targetY, 500);\n * }\n * ```\n */\nexport const smoothScrollTo = (targetY: number, duration: number = 300): void => {\n    const startY = window.scrollY;\n    const distance = targetY - startY;\n    const startTime = performance.now();\n\n    const scroll = (currentTime: number) => {\n        const elapsed = currentTime - startTime;\n        const progress = Math.min(elapsed / duration, 1);\n        const easeProgress = easeInOutCubic(progress);\n\n        window.scrollTo(0, startY + distance * easeProgress);\n\n        if (progress < 1) {\n            requestAnimationFrame(scroll);\n        }\n    };\n\n    requestAnimationFrame(scroll);\n};\n","import { cn, wrapVarRgb } from '@evolve.ui/theme-system';\nimport { MouseEvent, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { CaretDown, CaretUp } from '../Icons';\nimport { InlineButton } from '../Typography/InlineButton/InlineButton';\nimport { effectEventListener } from '../utils/effectEventListener';\nimport { smoothScrollTo } from '../utils/smoothScrollTo';\n\nconst SCROLL_TOP_OFFSET = 100;\nconst SCROLL_DURATION = 200;\n\ntype Props = {\n    /**\n     * Determines whether to center the inline button.\n     */\n    centerInlineButton?: boolean;\n    /**\n     * The inner text description or content to display.\n     *\n     */\n    children: React.ReactNode;\n    className?: string;\n    /**\n     * Custom text for the collapse button.\n     *\n     * @default 'Read Less'\n     */\n    collapseText?: string;\n    /**\n     * Whether the view more should be expanded by default.\n     *\n     * @default false\n     */\n    defaultExpanded?: boolean;\n    /**\n     * Prevents expansion/collapse while still allowing onClick callback to fire.\n     * Useful when you want to control the expansion behavior externally.\n     *\n     * @default false\n     */\n    disableExpand?: boolean;\n    /**\n     * Custom text for the expand button.\n     *\n     * @default 'Read More'\n     */\n    expandText?: string;\n    /**\n     * Custom fade color.\n     */\n    fadeBackgroundColor?: string;\n    /**\n     * Callback function that is called when the view more is expanded or collapsed.\n     */\n    onChange?: (isExpanded: boolean) => void;\n    /**\n     * Callback function that is called when the view more button is clicked.\n     * Can be used to track analytics or trigger other actions when the view more is interacted with.\n     * Use the `disableExpand` prop if you want to prevent the default expansion/collapse behavior.\n     */\n    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Determines whether to remove the fade background color.\n     */\n    removeFadeBackgroundColor?: boolean;\n    /**\n     * Whether to display caret icons (CaretDown/CaretUp) alongside the button text.\n     *\n     * @default false\n     */\n    showIcon?: boolean;\n    /**\n     * Number in pixels at which the text description will cut off and show the expand toggle.\n     *\n     * @default 150\n     */\n    textCutoffHeight?: number;\n    /**\n     * Determines whether to use a weak inline button.\n     */\n    useWeakInlineButton?: boolean;\n};\n\nexport const ViewMore = ({\n    centerInlineButton,\n    children,\n    className,\n    collapseText = 'Read Less',\n    defaultExpanded = false,\n    disableExpand = false,\n    expandText = 'Read More',\n    fadeBackgroundColor,\n    onChange,\n    onClick,\n    removeFadeBackgroundColor,\n    showIcon = false,\n    textCutoffHeight = 150,\n    useWeakInlineButton,\n}: Props) => {\n    const [isExpanded, setIsExpanded] = useState<boolean>(defaultExpanded);\n    // Set initial height for SSR-friendly rendering:\n    // - When expanded: Use large value (9999px) to show all content before useEffect measures actual height\n    // - When collapsed: Use textCutoffHeight to truncate content appropriately\n    const [height, setHeight] = useState<number>(defaultExpanded ? 9999 : textCutoffHeight);\n    const [showViewToggle, setShowViewToggle] = useState<boolean>(false);\n    const [enableTransitions, setEnableTransitions] = useState<boolean>(false);\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n\n    const toggleDescription = useCallback(\n        (event: MouseEvent<HTMLButtonElement>) => {\n            onClick?.(event);\n\n            // If disableExpand is true, call onClick but don't toggle the expansion\n            if (disableExpand) {\n                return;\n            }\n\n            // Enable transitions on first user interaction\n            setEnableTransitions(true);\n\n            setIsExpanded((prevIsExpanded) => {\n                const newHeight = prevIsExpanded\n                    ? textCutoffHeight\n                    : (contentRef.current?.scrollHeight ?? textCutoffHeight);\n                setHeight(newHeight);\n                onChange?.(!prevIsExpanded);\n\n                // Scroll to top when collapsing with custom smooth scroll to match 300ms transition\n                if (prevIsExpanded && containerRef.current) {\n                    const top = containerRef.current.getBoundingClientRect().top + window.scrollY - SCROLL_TOP_OFFSET;\n                    smoothScrollTo(top, SCROLL_DURATION);\n                }\n\n                return !prevIsExpanded;\n            });\n        },\n        [textCutoffHeight, onChange, onClick, disableExpand]\n    );\n\n    const updateView = useCallback(() => {\n        if (!contentRef.current) {\n            return;\n        }\n\n        const scrollHeight = contentRef.current.scrollHeight;\n        const shouldShowToggle = scrollHeight > textCutoffHeight;\n        setShowViewToggle(shouldShowToggle);\n        setHeight(isExpanded || !shouldShowToggle ? scrollHeight : textCutoffHeight);\n    }, [isExpanded, textCutoffHeight]);\n\n    useEffect(() => {\n        if (!contentRef.current) {\n            return;\n        }\n        updateView();\n\n        const cleanupResizeListener = effectEventListener(window, 'resize', updateView);\n\n        // Add ResizeObserver to detect content height changes\n        const resizeObserver = new ResizeObserver(updateView);\n        resizeObserver.observe(contentRef.current);\n\n        return () => {\n            cleanupResizeListener();\n            resizeObserver.disconnect();\n        };\n    }, [updateView, children]);\n\n    return (\n        <div className={cn(className, 'flex flex-col gap-xs')}>\n            <div\n                className={cn('relative overflow-hidden', {\n                    'transition-all duration-300 ease-in-out': enableTransitions,\n                })}\n                data-testid=\"description-container\"\n                ref={containerRef}\n                style={{\n                    height: showViewToggle ? `${height}px` : 'auto',\n                    maxHeight: showViewToggle || isExpanded ? undefined : `${textCutoffHeight}px`,\n                }}\n            >\n                <div ref={contentRef}>{children}</div>\n                {showViewToggle && !removeFadeBackgroundColor && !isExpanded && (\n                    <div\n                        className=\"absolute bottom-0 left-0 right-0 h-xl w-full\"\n                        style={{\n                            background: fadeBackgroundColor\n                                ? `linear-gradient(to bottom, transparent, ${fadeBackgroundColor})`\n                                : `linear-gradient(to bottom, transparent, ${wrapVarRgb('--color-background-primary')})`,\n                        }}\n                    />\n                )}\n            </div>\n            {showViewToggle && (\n                <div\n                    className={cn('w-full', {\n                        'text-center': centerInlineButton,\n                    })}\n                >\n                    {useWeakInlineButton ? (\n                        <InlineButton\n                            className=\"w-fit\"\n                            icon={showIcon ? (isExpanded ? CaretUp : CaretDown) : undefined}\n                            iconPlacement=\"right\"\n                            onClick={toggleDescription}\n                            style=\"neutral\"\n                        >\n                            {isExpanded ? collapseText : expandText}\n                        </InlineButton>\n                    ) : (\n                        <InlineButton\n                            className=\"w-fit\"\n                            icon={showIcon ? (isExpanded ? CaretUp : CaretDown) : undefined}\n                            iconPlacement=\"right\"\n                            onClick={toggleDescription}\n                        >\n                            {isExpanded ? collapseText : expandText}\n                        </InlineButton>\n                    )}\n                </div>\n            )}\n        </div>\n    );\n};\n"],"mappings":"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"}

package/ViewMore-DKC9SYL4.d.cts

@@ -0,0 +1,93 @@
+import { MouseEvent } from "react";
+
+//#region src/ViewMore/ViewMore.d.ts
+type Props = {
+  /**
+   * Determines whether to center the inline button.
+   */
+  centerInlineButton?: boolean;
+  /**
+   * The inner text description or content to display.
+   *
+   */
+  children: React.ReactNode;
+  className?: string;
+  /**
+   * Custom text for the collapse button.
+   *
+   * @default 'Read Less'
+   */
+  collapseText?: string;
+  /**
+   * Whether the view more should be expanded by default.
+   *
+   * @default false
+   */
+  defaultExpanded?: boolean;
+  /**
+   * Prevents expansion/collapse while still allowing onClick callback to fire.
+   * Useful when you want to control the expansion behavior externally.
+   *
+   * @default false
+   */
+  disableExpand?: boolean;
+  /**
+   * Custom text for the expand button.
+   *
+   * @default 'Read More'
+   */
+  expandText?: string;
+  /**
+   * Custom fade color.
+   */
+  fadeBackgroundColor?: string;
+  /**
+   * Callback function that is called when the view more is expanded or collapsed.
+   */
+  onChange?: (isExpanded: boolean) => void;
+  /**
+   * Callback function that is called when the view more button is clicked.
+   * Can be used to track analytics or trigger other actions when the view more is interacted with.
+   * Use the `disableExpand` prop if you want to prevent the default expansion/collapse behavior.
+   */
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+  /**
+   * Determines whether to remove the fade background color.
+   */
+  removeFadeBackgroundColor?: boolean;
+  /**
+   * Whether to display caret icons (CaretDown/CaretUp) alongside the button text.
+   *
+   * @default false
+   */
+  showIcon?: boolean;
+  /**
+   * Number in pixels at which the text description will cut off and show the expand toggle.
+   *
+   * @default 150
+   */
+  textCutoffHeight?: number;
+  /**
+   * Determines whether to use a weak inline button.
+   */
+  useWeakInlineButton?: boolean;
+};
+declare const ViewMore: ({
+  centerInlineButton,
+  children,
+  className,
+  collapseText,
+  defaultExpanded,
+  disableExpand,
+  expandText,
+  fadeBackgroundColor,
+  onChange,
+  onClick,
+  removeFadeBackgroundColor,
+  showIcon,
+  textCutoffHeight,
+  useWeakInlineButton
+}: Props) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { ViewMore as t };
+//# sourceMappingURL=ViewMore-DKC9SYL4.d.cts.map

package/ViewMore-DKC9SYL4.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewMore-DKC9SYL4.d.cts","names":[],"sources":["../src/ViewMore/ViewMore.tsx"],"mappings":";;;KAWK,KAAA;;AAVwE;;EAczE,kBAAA;EAKU;;;;EAAV,QAAA,EAAU,KAAA,CAAM,SAAA;EAChB,SAAA;EADA;;;;;EAOA,YAAA;EAaA;;;;;EAPA,eAAA;EA2BkB;;;;;;EApBlB,aAAA;EAwCmB;AAAA;AAGvB;;;EArCI,UAAA;EAqCqB;;;EAjCrB,mBAAA;EAiCqB;;;EA7BrB,QAAA,IAAY,UAAA;EA6BS;;;;;EAvBrB,OAAA,IAAW,KAAA,EAAO,UAAA,CAAW,iBAAA;EAsCzB;;;EAlCJ,yBAAA;EAmBqB;;;;;EAbrB,QAAA;EAaqB;;;;;EAPrB,gBAAA;EAOqB;;;EAHrB,mBAAA;AAAA;AAAA,cAGS,QAAA;EAAY,kBAAA;EAAA,QAAA;EAAA,SAAA;EAAA,YAAA;EAAA,eAAA;EAAA,aAAA;EAAA,UAAA;EAAA,mBAAA;EAAA,QAAA;EAAA,OAAA;EAAA,yBAAA;EAAA,QAAA;EAAA,gBAAA;EAAA;AAAA,GAetB,KAAA,iCAAK,GAAA,CAAA,OAAA"}

package/ViewMore-DKC9SYL4.d.mts

@@ -0,0 +1,93 @@
+import { MouseEvent } from "react";
+
+//#region src/ViewMore/ViewMore.d.ts
+type Props = {
+  /**
+   * Determines whether to center the inline button.
+   */
+  centerInlineButton?: boolean;
+  /**
+   * The inner text description or content to display.
+   *
+   */
+  children: React.ReactNode;
+  className?: string;
+  /**
+   * Custom text for the collapse button.
+   *
+   * @default 'Read Less'
+   */
+  collapseText?: string;
+  /**
+   * Whether the view more should be expanded by default.
+   *
+   * @default false
+   */
+  defaultExpanded?: boolean;
+  /**
+   * Prevents expansion/collapse while still allowing onClick callback to fire.
+   * Useful when you want to control the expansion behavior externally.
+   *
+   * @default false
+   */
+  disableExpand?: boolean;
+  /**
+   * Custom text for the expand button.
+   *
+   * @default 'Read More'
+   */
+  expandText?: string;
+  /**
+   * Custom fade color.
+   */
+  fadeBackgroundColor?: string;
+  /**
+   * Callback function that is called when the view more is expanded or collapsed.
+   */
+  onChange?: (isExpanded: boolean) => void;
+  /**
+   * Callback function that is called when the view more button is clicked.
+   * Can be used to track analytics or trigger other actions when the view more is interacted with.
+   * Use the `disableExpand` prop if you want to prevent the default expansion/collapse behavior.
+   */
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+  /**
+   * Determines whether to remove the fade background color.
+   */
+  removeFadeBackgroundColor?: boolean;
+  /**
+   * Whether to display caret icons (CaretDown/CaretUp) alongside the button text.
+   *
+   * @default false
+   */
+  showIcon?: boolean;
+  /**
+   * Number in pixels at which the text description will cut off and show the expand toggle.
+   *
+   * @default 150
+   */
+  textCutoffHeight?: number;
+  /**
+   * Determines whether to use a weak inline button.
+   */
+  useWeakInlineButton?: boolean;
+};
+declare const ViewMore: ({
+  centerInlineButton,
+  children,
+  className,
+  collapseText,
+  defaultExpanded,
+  disableExpand,
+  expandText,
+  fadeBackgroundColor,
+  onChange,
+  onClick,
+  removeFadeBackgroundColor,
+  showIcon,
+  textCutoffHeight,
+  useWeakInlineButton
+}: Props) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { ViewMore as t };
+//# sourceMappingURL=ViewMore-DKC9SYL4.d.mts.map

package/ViewMore-DKC9SYL4.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewMore-DKC9SYL4.d.mts","names":[],"sources":["../src/ViewMore/ViewMore.tsx"],"mappings":";;;KAWK,KAAA;;AAVwE;;EAczE,kBAAA;EAKU;;;;EAAV,QAAA,EAAU,KAAA,CAAM,SAAA;EAChB,SAAA;EADA;;;;;EAOA,YAAA;EAaA;;;;;EAPA,eAAA;EA2BkB;;;;;;EApBlB,aAAA;EAwCmB;AAAA;AAGvB;;;EArCI,UAAA;EAqCqB;;;EAjCrB,mBAAA;EAiCqB;;;EA7BrB,QAAA,IAAY,UAAA;EA6BS;;;;;EAvBrB,OAAA,IAAW,KAAA,EAAO,UAAA,CAAW,iBAAA;EAsCzB;;;EAlCJ,yBAAA;EAmBqB;;;;;EAbrB,QAAA;EAaqB;;;;;EAPrB,gBAAA;EAOqB;;;EAHrB,mBAAA;AAAA;AAAA,cAGS,QAAA;EAAY,kBAAA;EAAA,QAAA;EAAA,SAAA;EAAA,YAAA;EAAA,eAAA;EAAA,aAAA;EAAA,UAAA;EAAA,mBAAA;EAAA,QAAA;EAAA,OAAA;EAAA,yBAAA;EAAA,QAAA;EAAA,gBAAA;EAAA;AAAA,GAetB,KAAA,iCAAK,GAAA,CAAA,OAAA"}