@evolve.ui/core-components 1.0.0 → 1.1.0

package/src/Tabs/Tabs.tsx

@@ -0,0 +1,358 @@
+import { cn, wrapVarRgb } from '@evolve.ui/theme-system';
+import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+
+import { useHorizontalScrollFadeMixin } from '../mixins/horizontalScrollFadeMixin';
+
+export type Tab = {
+    /** The content to render when this tab is selected */
+    content: ReactNode;
+    /** The id of the content to render when this tab is selected */
+    contentId: string;
+    /** The label of the tab */
+    label: string | ReactNode;
+    /** The function to call when the tab is clicked */
+    onClick?: (contentId: string) => void;
+};
+
+type Props = {
+    className?: string;
+    contentClassName?: string;
+    isContentScrollable?: boolean;
+    /**
+     * When `true` (default), inactive tab panels stay mounted in the DOM but are visually hidden
+     * and marked `inert` so their content is not keyboard- or assistive-technology-interactive.
+     */
+    keepTabsInDOM?: boolean;
+    tabs: Tab[];
+} & (
+    | {
+          /** Used with `onTabChanged` to control tabs externally */
+          currentTab: string;
+          /** Use only if `currentTab` and `onTabChanged` are not provided */
+          defaultTab?: never;
+          /** Used with `currentTab` to control tabs externally */
+          onTabChanged: (contentId: string) => void;
+      }
+    | {
+          /** Use only if `defaultTab` is not provided. This is the contentId of the tab to be selected */
+          currentTab?: never;
+          /** Sets the default tab on first render. This is the contentId of the tab to be selected */
+          defaultTab?: string;
+          /** Use only if `defaultTab` is not provided */
+          onTabChanged?: never;
+      }
+);
+
+export const Tabs = ({
+    className,
+    contentClassName,
+    currentTab,
+    defaultTab,
+    isContentScrollable = false,
+    keepTabsInDOM = true,
+    onTabChanged,
+    tabs,
+}: Props) => {
+    const [selectedTab, setSelectedTab] = useState(defaultTab ?? currentTab ?? tabs[0].contentId);
+    // In controlled mode, use currentTab as the source of truth; otherwise use selectedTab
+    const activeTab = currentTab !== undefined ? currentTab : selectedTab;
+    const horizontalScrollFadeProps = useHorizontalScrollFadeMixin(0);
+
+    // Create refs for each tab panel to handle scrolling
+    const tabPanelRefs = useRef<Record<string, HTMLDivElement | null>>({});
+    // Create refs for each tab button to handle scrolling into view
+    const tabButtonRefs = useRef<Record<string, HTMLButtonElement | null>>({});
+
+    // Track scroll state for gradient overlay
+    // Start with true if content is scrollable, will be updated once we measure the actual content
+    const [isScrollable, setIsScrollable] = useState(isContentScrollable);
+    const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);
+
+    /**
+     * Checks if the content is scrollable and if it's scrolled to the bottom
+     * @param element - The scrollable element to check
+     */
+    const checkScrollState = useCallback((element: HTMLDivElement) => {
+        const { clientHeight, scrollHeight, scrollTop } = element;
+        const scrollable = scrollHeight > clientHeight;
+        const scrolledToBottom = scrollable ? scrollHeight - scrollTop <= clientHeight + 1 : true;
+
+        setIsScrollable(scrollable);
+        setIsScrolledToBottom(scrolledToBottom);
+    }, []);
+
+    /**
+     * Scrolls the content area to the top if isContentScrollable is true
+     * @param contentId - The content ID of the tab panel to scroll
+     */
+    const scrollToTop = useCallback(
+        (contentId: string) => {
+            if (isContentScrollable) {
+                const tabPanel = tabPanelRefs.current[contentId];
+                if (tabPanel) {
+                    tabPanel.scrollTop = 0;
+                    checkScrollState(tabPanel);
+                }
+            }
+        },
+        [isContentScrollable, checkScrollState]
+    );
+
+    const renderedTabs = tabs.map((tab) => {
+        return (
+            <button
+                className={cn(
+                    'hui-text-h5',
+                    // Base styles
+                    'z-[2] overflow-visible whitespace-nowrap border-b-4 border-b-transparent bg-transparent p-0 outline-none',
+                    // Focus visible styles
+                    'hui-focus-visible-outline focus:text-text-secondary focus:-outline-offset-1',
+                    // Base state
+                    'cursor-pointer text-text-secondary',
+
+                    // Hover state (when not active)
+                    {
+                        'hover:border-b-border-hover hover:text-link-hover': tab.contentId !== activeTab,
+                    },
+                    // Spacing adjustments - mb to create space between border and divider line
+                    { 'mb-2xs': isContentScrollable },
+                    // Active state (when not disabled)
+                    {
+                        'active:border-b-border-selected active:text-text-primary': tab.contentId !== activeTab,
+                    },
+                    // Active tab styles
+                    {
+                        'border-b-border-selected text-text-primary focus:text-text-primary':
+                            tab.contentId === activeTab,
+                    }
+                )}
+                key={tab.contentId}
+                onClick={(e) => {
+                    // Scroll the clicked tab into view FIRST, before state updates
+                    if (typeof e.currentTarget.scrollIntoView === 'function') {
+                        e.currentTarget.scrollIntoView({
+                            behavior: 'smooth',
+                            block: 'nearest',
+                            inline: 'center',
+                        });
+                    }
+
+                    setSelectedTab(tab.contentId);
+                    scrollToTop(tab.contentId);
+                    onTabChanged?.(tab.contentId);
+                    if (tab.onClick) {
+                        tab.onClick(tab.contentId);
+                    }
+                }}
+                ref={(el) => {
+                    tabButtonRefs.current[tab.contentId] = el;
+                }}
+                aria-selected={tab.contentId === activeTab}
+                role="tab"
+            >
+                {tab.label}
+            </button>
+        );
+    });
+
+    const renderedTabPanels = tabs.map((tab) => {
+        const isActive = tab.contentId === activeTab;
+        const isScrollable = isContentScrollable && isActive;
+
+        const props = {
+            'aria-labelledby': tab.contentId,
+            id: tab.contentId,
+            role: 'tabpanel',
+            // Scrollable regions must be focusable for keyboard accessibility
+            ...(isScrollable && { tabIndex: 0 }),
+        };
+
+        const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
+            if (isContentScrollable && isActive) {
+                checkScrollState(e.currentTarget);
+            }
+        };
+
+        if (keepTabsInDOM) {
+            return (
+                <div
+                    className={cn(
+                        {
+                            'absolute h-0 w-0 overflow-hidden': !isActive,
+                            'h-full overflow-y-auto': isScrollable,
+                        },
+                        contentClassName
+                    )}
+                    inert={!isActive}
+                    key={tab.contentId}
+                    onScroll={handleScroll}
+                    ref={(el) => {
+                        tabPanelRefs.current[tab.contentId] = el;
+                        if (el && isActive && isContentScrollable) {
+                            checkScrollState(el);
+                        }
+                    }}
+                    {...props}
+                >
+                    {tab.content}
+                </div>
+            );
+        }
+
+        if (!isActive) {
+            return null;
+        }
+
+        return (
+            <div
+                className={cn(
+                    {
+                        'h-full overflow-y-auto': isContentScrollable,
+                    },
+                    contentClassName
+                )}
+                key={tab.contentId}
+                onScroll={handleScroll}
+                ref={(el) => {
+                    tabPanelRefs.current[tab.contentId] = el;
+                    if (el && isContentScrollable) {
+                        checkScrollState(el);
+                    }
+                }}
+                {...props}
+            >
+                {tab.content}
+            </div>
+        );
+    });
+    // Handle controlled tabs - when currentTab prop changes externally, update internal state and scroll tab into view
+    useEffect(() => {
+        if (currentTab && currentTab !== selectedTab) {
+            setSelectedTab(currentTab);
+            scrollToTop(currentTab);
+
+            // Scroll the tab button into view when controlled externally
+            const tabButton = tabButtonRefs.current[currentTab];
+            if (tabButton && typeof tabButton.scrollIntoView === 'function') {
+                tabButton.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'nearest',
+                    inline: 'center',
+                });
+            }
+        }
+    }, [currentTab, selectedTab, scrollToTop]);
+
+    // Scroll the selected tab into view on initial render
+    // Only scroll if it's not the first tab (first tab is already visible)
+    // This is useful for bottom sheet on mobile where a non-first tab might be selected initially
+    useEffect(() => {
+        // Skip scroll if it's the first tab to prevent page jumping on initial load
+        if (selectedTab === tabs[0].contentId) {
+            return;
+        }
+
+        const tabButton = tabButtonRefs.current[selectedTab];
+        if (tabButton && typeof tabButton.scrollIntoView === 'function') {
+            tabButton.scrollIntoView({
+                behavior: 'instant',
+                block: 'nearest',
+                inline: 'center',
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []); // Only run on mount
+
+    // Check scroll state when active tab changes or content loads
+    useEffect(() => {
+        if (isContentScrollable) {
+            const activePanel = tabPanelRefs.current[activeTab];
+            if (activePanel) {
+                // Match BottomSheet opening animation duration to ensure layout is stable
+                const timer = setTimeout(() => {
+                    checkScrollState(activePanel);
+                }, 300);
+
+                return () => clearTimeout(timer);
+            }
+        }
+
+        return undefined;
+    }, [activeTab, isContentScrollable, checkScrollState, tabs]);
+
+    return (
+        <div
+            className={cn(className, {
+                'flex h-full min-h-0 flex-1 flex-col': isContentScrollable,
+            })}
+        >
+            <div
+                className="relative flex-shrink-0 overflow-x-clip"
+                role="tablist"
+            >
+                <div
+                    className="flex gap-sm overflow-x-auto xsMax:scrollbar-hide"
+                    ref={horizontalScrollFadeProps.ref}
+                >
+                    {/* Left fade overlay */}
+                    <div
+                        className={cn(
+                            'pointer-events-none absolute left-0 top-0 z-10 w-[48px] bg-gradient-to-r from-background-primary to-transparent transition-opacity duration-300 ease-in-out',
+                            {
+                                'bottom-0': !isContentScrollable,
+                                'bottom-2xs': isContentScrollable,
+                                'opacity-0': !horizontalScrollFadeProps.shouldShowLeftFade,
+                                'opacity-100': horizontalScrollFadeProps.shouldShowLeftFade,
+                            }
+                        )}
+                    />
+
+                    {/* Right fade overlay */}
+                    <div
+                        className={cn(
+                            'pointer-events-none absolute right-0 top-0 z-10 w-[48px] bg-gradient-to-l from-background-primary to-transparent transition-opacity duration-300 ease-in-out',
+                            {
+                                'bottom-0': !isContentScrollable,
+                                'bottom-2xs': isContentScrollable,
+                                'opacity-0': !horizontalScrollFadeProps.shouldShowRightFade,
+                                'opacity-100': horizontalScrollFadeProps.shouldShowRightFade,
+                            }
+                        )}
+                    />
+
+                    {renderedTabs}
+                    <div
+                        className={cn('absolute left-0 right-0 z-[1] h-px border-b border-border-secondary', {
+                            'bottom-0': !isContentScrollable,
+                            'bottom-2xs': isContentScrollable,
+                        })}
+                        role="none"
+                    />
+                </div>
+            </div>
+            <div
+                className={cn('relative', {
+                    'min-h-0 flex-grow pb-3xs': isContentScrollable,
+                })}
+            >
+                {renderedTabPanels}
+                {/* Bottom gradient overlay - shows when content is scrollable and not at bottom */}
+                {isContentScrollable && (
+                    <div
+                        className={cn(
+                            'pointer-events-none absolute bottom-0 left-0 right-0 h-xl transition-opacity duration-300 ease-in-out',
+                            {
+                                'opacity-0': isScrolledToBottom && isScrollable,
+                                'opacity-100': !isScrolledToBottom && isScrollable,
+                            }
+                        )}
+                        data-testid="tabs-gradient-overlay"
+                        style={{
+                            background: `linear-gradient(to bottom, transparent, ${wrapVarRgb('--color-background-primary')})`,
+                        }}
+                    />
+                )}
+            </div>
+        </div>
+    );
+};

package/src/TextArea/TextArea.tsx

@@ -0,0 +1,157 @@
+import { cn } from '@evolve.ui/theme-system';
+import { ChangeEventHandler, forwardRef, HTMLProps, useCallback, useEffect, useState } from 'react';
+
+import { extractFormLabelProps, FormLabel, FormLabelProps } from '../FormLabel/FormLabel';
+import { InfoIconTooltip } from '../Tooltip/InfoIconTooltip';
+import { LabelMini } from '../Typography/Text/Text';
+
+type Props = Omit<HTMLProps<HTMLTextAreaElement>, 'as' | 'value'> & {
+    characterLimit?: number;
+    /**
+     * If true, the textarea will not be resizable.
+     *
+     * @default false
+     */
+    noResize?: boolean;
+    overCharacterLimitText?: string;
+    /**
+     * The starting height of the textarea.
+     *
+     * @default '100px'
+     */
+    startingHeight?: string;
+    /**
+     * The starting width of the textarea.
+     *
+     * @default '150px'
+     */
+    startingWidth?: string;
+    value?: string;
+} & (
+        | {
+              tooltipId?: string;
+              tooltipText?: string;
+          }
+        | {
+              tooltipId?: never;
+              tooltipText?: never;
+          }
+    ) &
+    FormLabelProps;
+
+export const TextAreaInput = forwardRef<HTMLTextAreaElement, Props>((unfilteredProps, ref) => {
+    const [
+        formLabelProps,
+        {
+            characterLimit = 0,
+            noResize,
+            onChange,
+            overCharacterLimitText = 'Too many characters',
+            startingHeight,
+            startingWidth,
+            tooltipId,
+            tooltipText = '',
+            ...inputProps
+        },
+    ] = extractFormLabelProps(unfilteredProps);
+
+    const [characterCount, setCharacterCount] = useState(inputProps.value?.length ?? 0);
+
+    useEffect(() => {
+        if (inputProps.value !== undefined) {
+            setCharacterCount(String(inputProps.value).length);
+        }
+    }, [inputProps.value]);
+
+    const handleOnChange = useCallback<ChangeEventHandler<HTMLTextAreaElement>>(
+        (e) => {
+            setCharacterCount(String(e.target.value).length);
+            onChange?.(e);
+        },
+        [onChange]
+    );
+
+    const overCharacterLimit = characterLimit ? characterCount > characterLimit : false;
+    const hasError = Boolean(formLabelProps.hasError) || overCharacterLimit;
+
+    return (
+        <FormLabel
+            {...formLabelProps}
+            errorText={overCharacterLimit ? overCharacterLimitText : formLabelProps.errorText}
+            hasError={hasError}
+            renderErrorTextAdjacent
+            renderHelpTextAdjacent
+            showTopLeft={Boolean(formLabelProps.labelText) || tooltipText.length > 0}
+            showTopRight={characterLimit > 0}
+            style={{
+                minHeight: startingHeight ?? '100px',
+                minWidth: startingWidth ?? '150px',
+                overflow: 'hidden',
+                resize: noResize ? 'none' : 'both',
+            }}
+            topLeft={
+                <span
+                    className={cn('hui-text-label-mini flex items-center gap-1 whitespace-nowrap', {
+                        'text-text-disabled': formLabelProps.disabled,
+                        'text-text-secondary': !formLabelProps.disabled,
+                    })}
+                >
+                    {formLabelProps.labelText}
+                    {tooltipText && (
+                        <InfoIconTooltip
+                            content={tooltipText}
+                            id={tooltipId!}
+                            size="xs"
+                        />
+                    )}
+                </span>
+            }
+            topRight={
+                <LabelMini
+                    className="ml-auto whitespace-nowrap grid-area-[topright]"
+                    color={formLabelProps.disabled ? 'disabled' : overCharacterLimit ? 'critical' : 'secondary'}
+                >
+                    {characterCount}/{characterLimit}
+                </LabelMini>
+            }
+        >
+            <textarea
+                {...inputProps}
+                className={cn(
+                    'hui-text-body-primary',
+                    // Base styles
+                    'h-full w-full resize-none border-0 px-2 py-[5px] outline-none',
+                    'cursor-text rounded-container',
+                    // Background and border - base state
+                    'bg-background-field border border-border-secondary',
+                    // Placeholder styles
+                    'placeholder:text-text-inactive',
+                    // Hover state (when not disabled)
+                    {
+                        'hover:border-border-hover': !formLabelProps.disabled,
+                    },
+                    // Focus state (when not disabled)
+                    {
+                        'focus:border-border-focused': !formLabelProps.disabled,
+                    },
+                    // Disabled state
+                    {
+                        'border-border-disabled bg-background-disabled': formLabelProps.disabled,
+                    },
+                    // Error states - hasError takes precedence over overCharacterLimit for styling
+                    {
+                        'border-border-critical': Boolean(formLabelProps.hasError) || overCharacterLimit,
+                    }
+                )}
+                onChange={handleOnChange}
+                ref={ref}
+                style={{
+                    minHeight: startingHeight ?? '100px',
+                    minWidth: startingWidth ?? '150px',
+                }}
+            />
+        </FormLabel>
+    );
+});
+
+TextAreaInput.displayName = 'TextAreaInput';

package/src/TextInput/TextInput.tsx

@@ -0,0 +1,173 @@
+import { cn } from '@evolve.ui/theme-system';
+import { ChangeEvent, forwardRef, HTMLProps, ReactNode, useCallback, useEffect, useState } from 'react';
+
+import { extractFormLabelProps, FormLabel, FormLabelProps } from '../FormLabel/FormLabel';
+import { IconButton } from '../IconButton/IconButton';
+import { Close, Eye, EyeSlash } from '../Icons';
+import { BodyPrimary, LabelMini } from '../Typography/Text/Text';
+
+export type AllowedTypes = 'text' | 'email' | 'number' | 'password' | 'url';
+
+type Props = Omit<HTMLProps<HTMLInputElement>, 'as' | 'value'> & {
+    characterLimit?: number;
+    clearAriaLabel?: string;
+    /**
+     * Input emphasis. Currently supports subtle and bold. Defaults to subtle.
+     */
+    emphasis?: 'subtle' | 'bold';
+    overCharacterLimitText?: string;
+    prefix?: ReactNode;
+    small?: boolean;
+
+    suffix?: ReactNode;
+    /**
+     * Input type. Currently supports text, email, number, password, and url. Defaults to text.
+     */
+    type?: AllowedTypes;
+    value?: string;
+} & Partial<
+        Omit<HTMLProps<HTMLInputElement>, 'as' | 'aria-label' | 'aria-invalid' | 'aria-errormessage' | 'children'>
+    > &
+    ({ onClear: undefined; showClearIcon?: false } | { onClear?: () => void; showClearIcon?: boolean }) &
+    FormLabelProps;
+
+export const TextInput = forwardRef<HTMLInputElement, Props>((unfilteredProps, ref) => {
+    const [
+        formLabelProps,
+        {
+            // need this to properly style onClear (only show when placeholder is not showing)
+            characterLimit = 0,
+            clearAriaLabel = 'Clear text',
+            disabled,
+            emphasis = 'subtle',
+            onChange,
+            onClear,
+            overCharacterLimitText = 'Too many characters',
+            placeholder = ' ',
+            prefix,
+            showClearIcon: showClearIconProp,
+            small,
+            suffix,
+            type,
+            ...props
+        },
+    ] = extractFormLabelProps(unfilteredProps);
+
+    const [characterCount, setCharacterCount] = useState(props.value?.length ?? 0);
+
+    useEffect(() => {
+        if (props.value !== undefined) {
+            setCharacterCount(String(props.value).length);
+        }
+    }, [props.value]);
+
+    const handleOnChange = useCallback(
+        (e: ChangeEvent<HTMLInputElement>) => {
+            setCharacterCount(String((e.target as HTMLInputElement).value).length);
+            onChange?.(e);
+        },
+        [onChange]
+    );
+
+    const overCharacterLimit = characterLimit ? characterCount > characterLimit : false;
+    const hasError = Boolean(formLabelProps.hasError) || overCharacterLimit;
+
+    const showClearIcon = showClearIconProp ?? Boolean(onClear);
+
+    const [inputType, setInputType] = useState(type ?? 'text');
+
+    const togglePassword = (): void => {
+        if (!disabled) {
+            setInputType(inputType === 'password' ? 'text' : 'password');
+        }
+    };
+
+    const showClear = showClearIcon && Boolean(onClear);
+    const showPasswordToggle = type === 'password';
+
+    return (
+        <FormLabel
+            {...formLabelProps}
+            disabled={disabled}
+            errorText={overCharacterLimit ? overCharacterLimitText : formLabelProps.errorText}
+            hasError={hasError}
+            showTopRight={Boolean(formLabelProps.secure) || characterLimit > 0}
+            topRight={
+                formLabelProps.secure ? undefined : (
+                    <LabelMini
+                        className="ml-auto whitespace-nowrap grid-area-[topright]"
+                        color={formLabelProps.disabled ? 'disabled' : overCharacterLimit ? 'critical' : 'secondary'}
+                    >
+                        {characterCount}/{characterLimit}
+                    </LabelMini>
+                )
+            }
+        >
+            <div
+                className={cn(
+                    'overflow-none box-content flex items-center gap-2xs rounded-input border border-border-secondary bg-background-primary px-xs hover:border-border-hover has-[:focus]:border-border-selected',
+                    {
+                        '!border-border-disabled bg-background-disabled text-text-disabled': disabled,
+                        'border-border-critical': hasError,
+                        'h-[32px]': small, // Smaller due to box-content to prevent clipping
+                        'h-[40px]': !small, // Smaller due to box-content to prevent clipping
+                    }
+                )}
+            >
+                {Boolean(prefix) && <BodyPrimary color={disabled ? 'disabled' : 'secondary'}>{prefix}</BodyPrimary>}
+                <input
+                    className={cn(
+                        'peer hui-text-body-primary hui-autofill-transparent w-full bg-transparent outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',
+                        {
+                            'text-text-primary placeholder:text-text-secondary': emphasis === 'bold',
+                        }
+                    )}
+                    {...props}
+                    disabled={disabled}
+                    onChange={handleOnChange}
+                    placeholder={placeholder}
+                    ref={ref}
+                    type={inputType}
+                />
+                {Boolean(suffix) && <BodyPrimary color={disabled ? 'disabled' : 'secondary'}>{suffix}</BodyPrimary>}
+                {showClear && (
+                    <IconButton
+                        aria-label={clearAriaLabel}
+                        className={cn(
+                            'self-center justify-self-end !rounded-button peer-placeholder-shown:hidden',
+                            small ? 'mr-[-8px]' : 'mr-[-4px]'
+                        )}
+                        disabled={disabled}
+                        hideTooltip
+                        icon={Close}
+                        onClick={onClear}
+                        role="button"
+                        shape="square"
+                        size="sm"
+                        type="button"
+                    />
+                )}
+                {showPasswordToggle &&
+                    (inputType === 'password' ? (
+                        <EyeSlash
+                            color={disabled ? 'disabled' : 'primary'}
+                            // hoverColor={disabled ? undefined : 'hover'}
+                            onClick={togglePassword}
+                            role="button"
+                            size="sm"
+                        />
+                    ) : (
+                        <Eye
+                            color={disabled ? 'disabled' : 'primary'}
+                            // hoverColor={disabled ? undefined : 'hover'}
+                            onClick={togglePassword}
+                            role="button"
+                            size="sm"
+                        />
+                    ))}
+            </div>
+        </FormLabel>
+    );
+});
+
+TextInput.displayName = 'TextInput';