@apify/ui-library 0.71.1-featcolortokens-178953.55 → 0.71.1-featcolortokens-178953.58

package/src/components/tabs/tab.tsx

@@ -1,217 +0,0 @@
-import clsx from 'clsx';
-import { createPath } from 'history';
-import React from 'react';
-import type { FlattenSimpleInterpolation } from 'styled-components';
-import styled, { css } from 'styled-components';
-
-import type { IconComponent } from '@apify/ui-icons';
-
-import { theme } from '../../design_system/theme.js';
-import type { WithTransientProps } from '../../type_utils.js';
-import type { BadgeSize } from '../badge.js';
-import { Badge } from '../badge.js';
-import type { MarginSpacingProps, RegularBoxProps } from '../box.js';
-import type { RegularLinkProps } from '../link.js';
-import { Link } from '../link.js';
-import { Text } from '../text/index.js';
-import type { SharedTextSize } from '../text/text_shared.js';
-
-type SharedTabProps = Omit<RegularBoxProps, 'as' | 'onClick'> & MarginSpacingProps & Omit<RegularLinkProps, 'hideExternalIcon' | 'showExternalIcon'>;
-
-export type TabVariant = 'default' | 'boxed' | 'buttoned';
-
-export type TabData = SharedTabProps & {
-    id: string;
-    title: string;
-    Icon?: IconComponent;
-    chip?: number | string;
-    rollout?: 'alpha' | 'beta';
-    disabled?: boolean;
-};
-
-export type TabProps = TabData & {
-    variant?: TabVariant;
-    active?: boolean;
-    onSelect?: (data: { id: string, href: string, event: React.MouseEvent }) => void;
-};
-
-const tabVariantTextSize = {
-    default: 'regular',
-    boxed: 'regular',
-    buttoned: 'small',
-} satisfies Record<TabVariant, SharedTextSize>;
-
-const tabVariantBadgeSize = {
-    default: 'small',
-    boxed: 'small',
-    buttoned: 'extra_small',
-} satisfies Record<TabVariant, BadgeSize>;
-
-const tabVariantStyle = {
-    default: css`
-        height: 3.6rem;
-        padding: 0 ${theme.space.space8};
-        color: ${theme.color.neutral.textSubtle};
-
-        &:hover {
-            color: ${theme.color.primaryBlack.actionHover}
-        }
-
-        &.active {
-            color: ${theme.color.neutral.text};
-
-            &::after {
-                bottom: -${theme.space.space4};
-                right: 0;
-                left: 0;
-                height: 2px;
-                background-color: ${theme.color.primaryBlack.action};
-                border-radius: ${theme.radius.radiusFull};
-                content: '';
-                display: block;
-                pointer-events: none;
-                position: absolute;
-            }
-
-            &.disabled::after {
-                background-color: ${theme.color.neutral.textDisabled};
-            }
-        }
-    `,
-    boxed: css`
-        height: 3.6rem;
-        border: 1px solid transparent;
-        border-top-right-radius: ${theme.radius.radius6};
-        border-top-left-radius: ${theme.radius.radius6};
-        padding: 0 ${theme.space.space12};
-        color: ${theme.color.neutral.textMuted};
-
-        &::after {
-            inset: ${theme.space.space4};
-            background-color: transparent;
-            border-radius: ${theme.radius.radius6};
-            content: '';
-            display: block;
-            pointer-events: none;
-            position: absolute;
-            transition: background-color ${theme.transition.fastEaseOut};
-            z-index: -1;
-        }
-
-        &:hover {
-            color: ${theme.color.neutral.text};
-
-            &::after {
-                background-color: ${theme.color.neutral.hover};
-            }
-        }
-
-        &.active {
-            color: ${theme.color.neutral.text};
-            border-color: ${theme.color.neutral.border};
-            border-bottom-color: ${theme.color.neutral.background};
-
-            &::after {
-                background-color: transparent;
-            }
-        }
-    `,
-    buttoned: css`
-        height: 3.2rem;
-        margin: 0 ${theme.space.space4};
-        padding: 0 ${theme.space.space8};
-        background-color: transparent;
-        border: 1px solid transparent;
-        border-radius: ${theme.radius.radius8};
-        color: ${theme.color.neutral.textMuted};
-
-        &:hover {
-            background-color: ${theme.color.neutral.hover};
-            color: ${theme.color.neutral.text};
-        }
-
-        &.active {
-            background-color: transparent;
-            border-color: ${theme.color.neutral.border};
-            color: ${theme.color.neutral.text};
-        }
-    `,
-} satisfies Record<TabVariant, FlattenSimpleInterpolation>;
-
-type TabWrapperProps = WithTransientProps<Required<Pick<TabProps, 'variant'>>> & {
-    role?: React.AriaRole;
-};
-
-export const TAB_CLASSNAMES = {
-    ICON: 'Tab-icon',
-    TITLE: 'Tab-title',
-    BADGE: 'Tab-badge',
-};
-
-const TabWrapper = styled(Link)<TabWrapperProps>`
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: ${theme.space.space4};
-    flex-shrink: 0;
-    cursor: pointer;
-    position: relative;
-    transition: background-color ${theme.transition.fastEaseOut}, border-color ${theme.transition.fastEaseOut}, color ${theme.transition.fastEaseOut};
-    z-index: 1;
-
-    
-    ${({ $variant }) => tabVariantStyle[$variant]};
-
-    &.disabled {
-        color: ${theme.color.neutral.textDisabled};
-        pointer-events: none;
-    }
-
-    .${TAB_CLASSNAMES.ICON} {
-        color: inherit;
-        flex-shrink: 0;
-        transition: color ${theme.transition.fastEaseOut};
-    }
-
-    .${TAB_CLASSNAMES.TITLE} {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    .${TAB_CLASSNAMES.BADGE} {
-        flex-shrink: 0;
-        text-transform: uppercase;
-    }
-`;
-
-export const Tab = ({ variant = 'default', id, to, Icon, title, chip, rollout, className, onSelect, active = false, disabled = false, ...props }: TabProps) => {
-    const href = typeof (to) === 'string' ? to : createPath(to);
-
-    return (
-        <TabWrapper
-            {...props}
-            id={id}
-            to={to}
-            role="tab"
-            data-test="tab"
-            data-test-url={href}
-            className={clsx(className, { active, disabled })}
-            onClick={onSelect ? (event) => onSelect({ id, href, event }) : undefined}
-            $variant={variant}
-        >
-            {Icon && <Icon size="16" className={TAB_CLASSNAMES.ICON} />}
-            <Text size={tabVariantTextSize[variant]} className={TAB_CLASSNAMES.ICON} weight="bold" as="div">{title}</Text>
-            {chip && (
-                <Badge
-                    size={tabVariantBadgeSize[variant]}
-                    variant={active ? 'primary_black' : 'neutral_subtle'}
-                    className={TAB_CLASSNAMES.ICON}
-                >
-                    {chip}
-                </Badge>
-            )}
-            {rollout && <Badge size={tabVariantBadgeSize[variant]} variant="primary_blue" className={TAB_CLASSNAMES.ICON}>{rollout}</Badge>}
-        </TabWrapper>
-    );
-};

package/src/components/tabs/tabs.tsx

@@ -1,169 +0,0 @@
-import React, { useCallback, useRef, useState } from 'react';
-import type { FlattenSimpleInterpolation } from 'styled-components';
-import styled, { css } from 'styled-components';
-
-import { theme } from '../../design_system/theme.js';
-import type { WithTransientProps } from '../../type_utils.js';
-import { useResizeObserverSsr } from '../../utils/resize_observer.js';
-import type { MarginSpacingProps, RegularBoxProps } from '../box.js';
-import { Box } from '../box.js';
-import type { TabData, TabVariant } from './tab.js';
-import { Tab } from './tab.js';
-
-type SharedTabsProps = Omit<RegularBoxProps, 'as' | 'onClick'> & MarginSpacingProps;
-type TabsProps = SharedTabsProps & {
-    variant?: TabVariant;
-    tabs: TabData[];
-    activeTab?: string;
-    onSelect?: (data: { id: string, href: string, event: React.MouseEvent }) => void;
-};
-
-const tabsVariantStyle = {
-    default: css`
-        align-items: flex-start;
-        gap: ${theme.space.space8};
-
-        &::after {
-            bottom: 0;
-            right: 0;
-            left: 0;
-            height: 1px;
-            background-color: ${theme.color.neutral.separatorSubtle};
-            border-radius: ${theme.radius.radiusFull};
-            content: '';
-            display: block;
-            pointer-events: none;
-            position: absolute;
-        }
-    `,
-    boxed: css`
-        align-items: flex-end;
-
-        &::after {
-            bottom: 0;
-            right: 0;
-            left: 0;
-            height: 1px;
-            background-color: ${theme.color.neutral.border};
-            content: '';
-            display: block;
-            pointer-events: none;
-            position: absolute;
-        }
-    `,
-    buttoned: css`
-        align-items: center;
-    `,
-} satisfies Record<TabVariant, FlattenSimpleInterpolation>;
-
-type TabsWrapperProps = WithTransientProps<Required<Pick<TabsProps, 'variant'>>> & {
-    role?: React.AriaRole;
-};
-
-const TabsWrapper = styled(Box)<TabsWrapperProps>`
-    height: 4rem;
-    display: flex;
-    position: relative;
-
-    [role='tabpanel'] {
-        min-width: 0;
-        display: flex;
-        flex-grow: 1;
-        overflow-x: auto;
-        ${({ $variant }) => tabsVariantStyle[$variant]};
-
-        /* Scrollbar */
-        -ms-overflow-style: none;
-        scrollbar-width: none;
-        
-        &::-webkit-scrollbar {
-            display: none; /* Chrome, Safari, Opera */
-        }
-    }
-
-    & > [role="cell"] {
-        position: sticky;
-        top: 0;
-        height: 100%;
-        width: 0;
-        margin-left: auto;
-        opacity: 0;
-        transition: opacity ${theme.transition.fastEaseOut};
-        z-index: 2;
-
-        &[aria-hidden="false"] {
-            opacity: 1;
-        }
-
-        &::after {
-            height: 100%;
-            width: ${theme.space.space32};
-            content: ' ';
-            pointer-events: none;
-            position: absolute;
-        }
-
-        &:first-of-type {
-            left: 0;
-            
-            &::after {
-                left: 0;
-                background: linear-gradient(90deg, ${theme.color.neutral.background} 0%, rgba(255, 255, 255, 0) 100%);
-            }
-        }
-
-        &:last-of-type {
-            right: 0;
-            
-            &::after {
-                right: 0;
-                background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, ${theme.color.neutral.background} 100%);
-            }
-        }
-    }
-`;
-
-type TabOverflowState = {
-    right: boolean;
-    left: boolean;
-}
-
-const isTabsOverflowing = (node: HTMLDivElement): TabOverflowState => {
-    if (node.scrollWidth > node.clientWidth) {
-        return {
-            right: node.clientWidth + node.scrollLeft < node.scrollWidth,
-            left: node.scrollLeft > 0,
-        };
-    }
-
-    return {
-        right: false,
-        left: false,
-    };
-};
-
-export const Tabs = ({ variant = 'default', tabs, activeTab, onSelect, ...props }: TabsProps) => {
-    const ref = useRef<HTMLDivElement>(null);
-    const [overflowState, setOveflowState] = useState<TabOverflowState>();
-
-    useResizeObserverSsr(ref, (entry) => setOveflowState(isTabsOverflowing(entry.target as HTMLDivElement)));
-    const scrollHandler = useCallback((event: React.SyntheticEvent<HTMLDivElement>) => {
-        setOveflowState(isTabsOverflowing(event.currentTarget as HTMLDivElement));
-    }, []);
-
-    return <TabsWrapper {...props} role="tablist" data-test="tabs-wrapper" $variant={variant}>
-        <div role="cell" aria-hidden={!overflowState?.left} />
-        <div ref={ref} role="tabpanel" onScroll={scrollHandler}>
-            {tabs.map((tab) => (
-                <Tab
-                    {...tab}
-                    key={tab.id}
-                    variant={variant}
-                    active={tab.id === activeTab}
-                    onSelect={onSelect}
-                />
-            ))}
-        </div>
-        <div role="cell" aria-hidden={!overflowState?.right} />
-    </TabsWrapper>;
-};

package/src/components/tag.tsx

@@ -1,196 +0,0 @@
-import React, { type ForwardedRef, forwardRef } from 'react';
-import styled, { css, type FlattenSimpleInterpolation } from 'styled-components';
-
-import type { IconComponent, IconSize } from '@apify/ui-icons';
-
-import { theme } from '../design_system/theme.js';
-import type { WithTransientProps } from '../type_utils.js';
-import { Box, type MarginSpacingProps, type RegularBoxProps } from './box.js';
-import type { RegularButtonProps } from './button.js';
-import { Link, type RegularLinkProps } from './link.js';
-import { Text } from './text/index.js';
-import { type SharedTextSize, type SharedTextType } from './text/text_shared.js';
-
-type TagSize = SharedTextSize;
-export const TAG_SIZES: TagSize[] = ['big', 'regular', 'small'];
-
-const TAG_ICON_SIZES = {
-    big: '20',
-    regular: '16',
-    small: '12',
-} satisfies Record<TagSize, IconSize>;
-
-export const TAG_VARIANTS = ['primary', 'secondary', 'subtle', 'accent', 'success', 'warning', 'error'] as const;
-type TagVariant = typeof TAG_VARIANTS[number];
-
-type TagNodeType = Extract<React.ElementType, 'a' | 'button'>;
-type TagNodePropsMap = {
-    a: {
-        element: HTMLAnchorElement;
-        props: RegularLinkProps;
-    };
-    button: {
-        element: HTMLButtonElement;
-        props: RegularButtonProps;
-    };
-}
-
-type SharedTagProps = Omit<RegularBoxProps, 'as'> & MarginSpacingProps;
-export type TagProps<T extends TagNodeType> = SharedTagProps & ({
-    as?: T;
-    size?: TagSize;
-    type?: SharedTextType;
-    variant?: TagVariant;
-    LeadingIcon?: IconComponent;
-    TrailingIcon?: IconComponent;
-} & Omit<TagNodePropsMap[T]['props'], 'size'>);
-
-const tagSizeStyle = {
-    big: css`
-        height: 4rem;
-        padding: ${theme.space.space8} ${theme.space.space12};
-        border-radius: ${theme.radius.radius12};
-    `,
-    regular: css`
-        height: 2.8rem;
-        padding: ${theme.space.space4} ${theme.space.space8};
-        border-radius: ${theme.radius.radius8};
-    `,
-    small: css`
-        height: 2rem;
-        padding: ${theme.space.space2} ${theme.space.space6};
-        border-radius: ${theme.radius.radius4};
-
-        &:has(> svg:last-child:nth-child(1)) {
-            padding: ${theme.space.space2} ${theme.space.space4};
-        }
-    `,
-} satisfies Record<TagSize, FlattenSimpleInterpolation>;
-
-const tagVariantStyle = {
-    primary: css`
-        color: ${theme.color.neutral.text};
-        fill: ${theme.color.neutral.icon};
-        background: transparent;
-        box-shadow: inset 0 0 0 1px ${theme.color.neutral.border};
-
-        &:hover {
-            background: ${theme.color.neutral.hover};
-        }
-    `,
-    secondary: css`
-        color: ${theme.color.neutral.text};
-        fill: ${theme.color.neutral.icon};
-        background: transparent;
-
-        &:hover {
-            background: ${theme.color.neutral.hover};
-        }
-    `,
-    subtle: css`
-        color: ${theme.color.neutral.text};
-        fill: ${theme.color.neutral.icon};
-        background: ${theme.color.neutral.backgroundSubtle};
-
-        &:hover {
-            background: ${theme.color.neutral.hover};
-        }
-    `,
-    accent: css`
-        color: ${theme.color.primary.chipText};
-        fill: ${theme.color.primary.chipText};
-        background: ${theme.color.primary.background};
-
-        &:hover {
-            background: ${theme.color.primary.backgroundHover};
-        }
-    `,
-    success: css`
-        color: ${theme.color.success.chipText};
-        fill: ${theme.color.success.chipText};
-        background: ${theme.color.success.background};
-
-        &:hover {
-            background: ${theme.color.success.backgroundHover};
-        }
-    `,
-    warning: css`
-        color: ${theme.color.warning.chipText};
-        fill: ${theme.color.warning.chipText};
-        background: ${theme.color.warning.background};
-
-        &:hover {
-            background: ${theme.color.warning.backgroundHover};
-        }
-    `,
-    error: css`
-        color: ${theme.color.danger.chipText};
-        fill: ${theme.color.danger.chipText};
-        background: ${theme.color.danger.background};
-
-        &:hover {
-            background: ${theme.color.danger.backgroundHover};
-        }
-    `,
-} satisfies Record<TagVariant, FlattenSimpleInterpolation>;
-
-type StyledTagProps = WithTransientProps<
-    Required<Pick<TagProps<TagNodeType>, 'size' | 'variant'>>
->;
-
-const StyledTag = styled(Box)<StyledTagProps>`
-    ${({ $size }) => tagSizeStyle[$size]};
-    ${({ $variant }) => tagVariantStyle[$variant]};
-
-    /* Static styles */
-    width: fit-content;
-    border: none;
-    outline: none;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    white-space: nowrap;
-    gap: ${theme.space.space4};
-    cursor: pointer;
-    transition: background ${theme.transition.fastEaseOut};
-`;
-
-/**
- * Component for displaying inherenly interactive chip descendant
- */
-function TagWrapper<T extends TagNodeType>({
-    as,
-    size = 'small',
-    type = 'body',
-    variant = 'primary',
-    LeadingIcon,
-    TrailingIcon,
-    children,
-    ...props
-}: TagProps<T>,
-ref: ForwardedRef<TagNodePropsMap[T]['element']>,
-) {
-    const component: React.ElementType = (as === 'a' ? Link : as ?? 'button');
-
-    return (
-        <StyledTag
-            as={component}
-            ref={ref}
-            $variant={variant}
-            $size={size}
-            {...props}
-        >
-            {LeadingIcon && <LeadingIcon size={TAG_ICON_SIZES[size]} />}
-            {children && (<Text size={size} type={type} weight="medium">{children}</Text>)}
-            {TrailingIcon && <TrailingIcon size={TAG_ICON_SIZES[size]} />}
-        </StyledTag>
-    );
-}
-TagWrapper.displayName = 'Tag';
-
-// `forwardRef` can't handle generic types, should be fixable with React 19
-export const Tag = forwardRef(TagWrapper) as <T extends TagNodeType>(
-    // eslint-disable-next-line no-use-before-define -- see comment above 👆
-    props: TagProps<T> & { ref?: ForwardedRef<TagNodePropsMap[T]['element']> },
-) => ReturnType<typeof TagWrapper>;

package/src/components/text/heading_content.tsx

@@ -1,56 +0,0 @@
-import React from 'react';
-import styled, { css } from 'styled-components';
-
-import { theme } from '../../design_system/theme.js';
-import type { WithTransientProps } from '../../type_utils.js';
-import type { TextBaseProps } from './text_base.js';
-import { TextBaseComponent } from './text_base.js';
-
-type HeadingContentType = 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6';
-
-interface HeadingContentTransientProps {
-    type?: HeadingContentType,
-}
-
-const getContentHeadingStyles = (headingType: HeadingContentType) => css`
-    ${theme.typography.content.mobile[headingType]}
-
-    @media (min-width: ${theme.layout.tablet}) {
-        ${theme.typography.content.tablet[headingType]}
-    }
-
-    @media (min-width: ${theme.layout.desktop}) {
-        ${theme.typography.content.desktop[headingType]}
-    }
-`;
-
-type StyledHeadingContentProps = WithTransientProps<HeadingContentTransientProps>;
-export type HeadingContentProps = HeadingContentTransientProps & TextBaseProps;
-
-const HEADING_CONTENT_DEFAULT_ELEMENTS = {
-    heading1: 'h1',
-    heading2: 'h2',
-    heading3: 'h3',
-    heading4: 'h4',
-    heading5: 'h5',
-    heading6: 'h6',
-} as const;
-
-const StyledHeadingContent = styled(TextBaseComponent)<StyledHeadingContentProps>`
-    ${(props) => getContentHeadingStyles(props.$type || 'heading1')}
-`;
-
-export const HeadingContent: React.FC<HeadingContentProps> = ({
-    type,
-    as,
-    ...rest
-}) => {
-    return (
-        <StyledHeadingContent
-            $type={type}
-            forwardedAs={as || HEADING_CONTENT_DEFAULT_ELEMENTS[type || 'heading1']}
-            m='none'
-            {...rest}
-        />
-    );
-};

package/src/components/text/heading_marketing.tsx

@@ -1,55 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { theme } from '../../design_system/theme.js';
-import type { WithTransientProps } from '../../type_utils.js';
-import type { TextBaseProps } from './text_base.js';
-import { TextBaseComponent } from './text_base.js';
-
-type HeadingMarketingType = 'titleXs' | 'titleS' | 'titleM' | 'titleL' | 'titleXl' | 'title2xl' | 'title3xl';
-
-interface HeadingMarketingTransientProps {
-    type?: HeadingMarketingType,
-}
-
-type StyledHeadingMarketingProps = WithTransientProps<HeadingMarketingTransientProps>;
-export type HeadingMarketingProps = HeadingMarketingTransientProps & TextBaseProps;
-
-const HEADING_MARKETING_DEFAULT_ELEMENTS: { [Type in HeadingMarketingType]: string } = {
-    titleXs: 'h6',
-    titleS: 'h5',
-    titleM: 'h4',
-    titleL: 'h3',
-    titleXl: 'h2',
-    title2xl: 'h1',
-    title3xl: 'h1',
-};
-
-const StyledHeadingMarketing = styled(TextBaseComponent)<StyledHeadingMarketingProps>`
-    ${(props) => `
-        ${theme.typography.marketing.mobile[props.$type || 'titleL']}
-
-         @media (${theme.device.tablet}) {
-            ${theme.typography.marketing.tablet[props.$type || 'titleL']}
-        }
-
-        @media (${theme.device.desktop}) {
-            ${theme.typography.marketing.desktop[props.$type || 'titleL']}
-        }
-    `}
-`;
-
-export const HeadingMarketing: React.FC<HeadingMarketingProps> = ({
-    type,
-    as,
-    ...rest
-}) => {
-    return (
-        <StyledHeadingMarketing
-            $type={type}
-            forwardedAs={as || HEADING_MARKETING_DEFAULT_ELEMENTS[type || 'titleL']}
-            m='none'
-            {...rest}
-        />
-    );
-};