@apify/ui-library 1.140.2 → 1.141.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.140.2",
+    "version": "1.141.1",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -32,6 +32,7 @@
         "@floating-ui/react-dom": "^2.1.8",
         "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-collapsible": "^1.1.12",
+        "@radix-ui/react-radio-group": "^1.3.8",
         "@radix-ui/react-switch": "^1.2.6",
         "@react-hook/resize-observer": "^2.0.2",
         "clsx": "^2.0.0",
@@ -58,7 +59,7 @@
         "styled-components": "^6.1.19"
     },
     "devDependencies": {
-        "@apify-packages/types": "^3.355.2",
+        "@apify-packages/types": "^3.356.0",
         "@storybook/react-vite": "^10.3.5",
         "@types/hast": "^3.0.4",
         "@types/lodash": "^4.14.200",
@@ -72,5 +73,5 @@
         "src",
         "style"
     ],
-    "gitHead": "36a5ba3bf66c9106fdfa6522463de47438eeedb6"
+    "gitHead": "4fdb816061bb62853986f16bfcc237a4300d38c0"
 }

package/src/components/{action_link.tsx → action_link/action_link.tsx}

@@ -5,10 +5,10 @@ import { ArrowLeftIcon, ArrowRightIcon } from '@apify/ui-icons';
 
 import type { RequiredBy } from '@apify-packages/types';
 
-import { theme } from '../design_system/theme.js';
-import { Box, type BoxProps } from './box.js';
-import { Link, type LinkProps, StyledAsLink } from './link.js';
-import { Heading } from './text/index.js';
+import { theme } from '../../design_system/theme.js';
+import { Box, type BoxProps } from '../box';
+import { Link, type LinkProps, StyledAsLink } from '../link';
+import { Heading } from '../text';
 
 const StyledGuidepost = styled(Box)<{ $isBackLink: boolean }>`
     display: inline-flex;

package/src/components/action_link/index.ts

@@ -0,0 +1 @@
+export * from './action_link.js';

package/src/components/{actor_template_card.tsx → actor_template_card/actor_template_card.tsx}

@@ -1,10 +1,10 @@
 import type React from 'react';
 import styled from 'styled-components';
 
-import { theme } from '../design_system/theme.js';
-import { Badge } from './badge.js';
-import { TextMarketing } from './text/text_marketing.js';
-import { VerticalTile } from './tile/index.js';
+import { theme } from '../../design_system/theme.js';
+import { Badge } from '../badge';
+import { TextMarketing } from '../text';
+import { VerticalTile } from '../tile';
 
 interface ActorTemplateCardProps {
     id: string;

package/src/components/actor_template_card/index.ts

@@ -0,0 +1 @@
+export * from './actor_template_card.js';

package/src/components/{badge.stories.jsx → badge/badge.stories.jsx}

@@ -5,8 +5,8 @@ import styled from 'styled-components';
 
 import { PeopleIcon } from '@apify/ui-icons';
 
+import { SHARED_TEXT_TYPES } from '..';
 import { Badge, BADGE_SIZES, BADGE_VARIANTS } from './badge.tsx';
-import { SHARED_TEXT_TYPES } from './index.ts';
 
 export default {
     title: 'UI-Library/Badge',

package/src/components/{badge.tsx → badge/badge.tsx}

@@ -4,12 +4,12 @@ import styled, { css } 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 type { FlattenSimpleInterpolation } from '../utils/type_utils.js';
-import { Box, type MarginSpacingProps, type RegularBoxProps } from './box.js';
-import { Text } from './text/index.js';
-import type { SharedTextSize, SharedTextType } from './text/text_shared.js';
+import { theme } from '../../design_system/theme.js';
+import type { WithTransientProps } from '../../type_utils';
+import type { FlattenSimpleInterpolation } from '../../utils/type_utils';
+import { Box, type MarginSpacingProps, type RegularBoxProps } from '../box';
+import { Text } from '../text';
+import type { SharedTextSize, SharedTextType } from '../text';
 
 export type BadgeSize = 'large' | 'regular' | 'small' | 'extra_small';
 export const BADGE_SIZES: BadgeSize[] = ['large', 'regular', 'small', 'extra_small'];

package/src/components/badge/index.ts

@@ -0,0 +1 @@
+export * from './badge.js';

package/src/components/{banner.tsx → banner/banner.tsx}

@@ -1,7 +1,7 @@
 import type React from 'react';
 import styled, { css } from 'styled-components';
 
-import { theme } from '../design_system/theme.js';
+import { theme } from '../../design_system/theme.js';
 
 const BANNER_GRADIENT_BACKGROUND_SVG = `<svg width="1200" height="148" viewBox="0 0 1200 148" fill="none" xmlns="http://www.w3.org/2000/svg">
     <g clip-path="url(#clip0_2285_34756)">

package/src/components/banner/index.ts

@@ -0,0 +1 @@
+export * from './banner.js';

package/src/components/{blog_article.tsx → blog_article/blog_article.tsx}

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { ArrowRightIcon } from '@apify/ui-icons';
 
-import { theme } from '../design_system/theme.js';
+import { theme } from '../../design_system/theme.js';
 
 const classNames = {
     IMAGE_WRAPPER: 'ImageWrapper',

package/src/components/blog_article/index.ts

@@ -0,0 +1 @@
+export * from './blog_article.js';

package/src/components/box/box.stories.tsx

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Box } from './box.js';
+
+const meta: Meta<typeof Box> = {
+    title: 'UI-Library/Box',
+    component: Box,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component:
+                    'Foundational primitive for layout and spacing. Provides margin/padding props (`m`, `mt`, `p`, `px`, …) via design tokens, plus a polymorphic `as` prop. Used as the base for most other components.',
+            },
+        },
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Box>;
+
+const Sample = ({ label, background = '#e3f2fd' }: { label: string; background?: string }) => (
+    <div style={{ background, padding: '0.5rem 1rem', borderRadius: '0.4rem', display: 'inline-block' }}>{label}</div>
+);
+
+/** Default Box renders as a div with no styling applied. */
+export const Default: Story = {
+    render: () => (
+        <Box>
+            <Sample label="Default Box (no spacing)" />
+        </Box>
+    ),
+};
+
+/** Margin props: `m`, `mt`, `mb`, `ml`, `mr`, `mx`, `my`. Values come from the spacing scale. */
+export const MarginSpacing: Story = {
+    render: () => (
+        <div style={{ border: '1px dashed #aaa', padding: '1rem' }}>
+            <Box mt="space8" mb="space24">
+                <Sample label="mt='space8' mb='space24'" />
+            </Box>
+            <Box mx="space32">
+                <Sample label="mx='space32' (horizontal margin)" background="#fff3e0" />
+            </Box>
+            <Box m="space16">
+                <Sample label="m='space16' (uniform)" background="#f3e5f5" />
+            </Box>
+        </div>
+    ),
+};
+
+/** Padding props: `p`, `pt`, `pb`, `pl`, `pr`, `px`, `py`. */
+export const PaddingSpacing: Story = {
+    render: () => (
+        <Box p="space16" style={{ background: '#e8f5e9', display: 'inline-block', borderRadius: '0.4rem' }}>
+            <Sample label="Box with p='space16'" background="#fff" />
+        </Box>
+    ),
+};
+
+/** `as` prop renders the Box as a different HTML element while keeping all spacing props. */
+export const PolymorphicAs: Story = {
+    render: () => (
+        <>
+            <Box as="section" mb="space16" style={{ background: '#e1f5fe', padding: '1rem' }}>
+                <Sample label="Box as='section'" background="#fff" />
+            </Box>
+            <Box as="aside" style={{ background: '#fff3e0', padding: '1rem' }}>
+                <Sample label="Box as='aside'" background="#fff" />
+            </Box>
+        </>
+    ),
+};
+
+/** Click handler. */
+export const WithOnClick: Story = {
+    render: () => (
+        <Box
+            onClick={() => alert('Box clicked!')}
+            p="space12"
+            style={{ background: '#fce4ec', cursor: 'pointer', borderRadius: '0.4rem', display: 'inline-block' }}
+        >
+            Click me
+        </Box>
+    ),
+};

package/src/components/{box.tsx → box/box.tsx}

@@ -2,9 +2,9 @@ import type React from 'react';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 
-import { theme } from '../design_system/theme.js';
-import type { Size } from '../design_system/tokens/index.js';
-import type { WithTransientProps } from '../type_utils.js';
+import { theme } from '../../design_system/theme.js';
+import type { Size } from '../../design_system/tokens';
+import type { WithTransientProps } from '../../type_utils';
 
 type ExtendedSize = Size | 'none' | 'auto';
 

package/src/components/box/index.ts

@@ -0,0 +1 @@
+export * from './box.js';

package/src/components/breadcrumb/breadcrumb.tsx

@@ -3,9 +3,9 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { theme } from '../../design_system/theme.js';
-import { Box } from '../box.js';
-import { Link } from '../link.js';
-import { Text } from '../text/index.js';
+import { Box } from '../box';
+import { Link } from '../link';
+import { Text } from '../text';
 
 export const breadcrumbClassNames = {
     WRAPPER: 'Breadcrumbs__Wrapper',

package/src/components/browser_window/browser_window.tsx

@@ -3,7 +3,7 @@ import type { ReactNode } from 'react';
 import styled from 'styled-components';
 
 import { theme } from '../../design_system/theme.js';
-import { Badge } from '../badge.js';
+import { Badge } from '../badge';
 
 const classNames = {
     ROOT: 'browser-window',

package/src/components/{button.stories.tsx → button/button.stories.tsx}

@@ -5,7 +5,7 @@ import styled from 'styled-components';
 
 import { CrossIcon } from '@apify/ui-icons';
 
-import { theme } from '../design_system/theme.js';
+import { theme } from '../../design_system/theme.js';
 import { Button, type ButtonProps } from './button.js';
 
 export default {

package/src/components/{button.tsx → button/button.tsx}

@@ -5,11 +5,11 @@ import styled, { css } from 'styled-components';
 
 import { ExternalLinkIcon, type IconSize } from '@apify/ui-icons';
 
-import { theme } from '../design_system/theme.js';
-import { type WithRequired, type WithTransientProps } from '../type_utils.js';
-import { useSharedUiDependencies } from '../ui_dependency_provider.js';
-import { Box, type MarginSpacingProps, type RegularBoxProps } from './box.js';
-import { isUrlExternal, Link, type LinkProps } from './link.js';
+import { theme } from '../../design_system/theme.js';
+import { type WithRequired, type WithTransientProps } from '../../type_utils.js';
+import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
+import { Box, type MarginSpacingProps, type RegularBoxProps } from '../box';
+import { isUrlExternal, Link, type LinkProps } from '../link';
 
 export type ButtonSize = 'extraLarge' | 'large' | 'medium' | 'small' | 'extraSmall';
 type ButtonColor = 'default' | 'success' | 'danger' | 'primaryBlack';

package/src/components/button/index.ts

@@ -0,0 +1 @@
+export * from './button.js';

package/src/components/{to_consolidate → card}/card.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Button } from '../button.js';
+import { Button } from '../button';
 import { Card, type CardProps } from './card.js';
 
 export default {

package/src/components/{to_consolidate → card}/card.tsx

@@ -4,10 +4,10 @@ import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 
 import { theme } from '../../design_system/theme.js';
-import type { WithTransientProps } from '../../type_utils.js';
-import type { BoxProps } from '../box.js';
-import { Box } from '../box.js';
-import { Text } from '../text/index.js';
+import type { WithTransientProps } from '../../type_utils';
+import type { BoxProps } from '../box';
+import { Box } from '../box';
+import { Text } from '../text';
 
 export const cardClassNames = {
     WRAPPER: 'Card',

package/src/components/card/index.ts

@@ -0,0 +1 @@
+export * from './card.js';

package/src/components/{card_container.stories.tsx → card_container/card_container.stories.tsx}

@@ -4,8 +4,8 @@ import styled from 'styled-components';
 
 import { DragIndicatorIcon } from '@apify/ui-icons';
 
+import { IconButton } from '../icon_button';
 import { CardContainer, cardContainerClassNames, type CardContainerProps } from './card_container.js';
-import { IconButton } from './icon_button.js';
 
 export default {
     title: 'UI-Library/Cards/CardContainer',

package/src/components/{card_container.tsx → card_container/card_container.tsx}

@@ -3,9 +3,9 @@ import styled from 'styled-components';
 
 import type { ValueOf } from '@apify-packages/types';
 
-import { theme } from '../design_system/theme.js';
-import type { Size } from '../design_system/tokens/index.js';
-import { Box, type BoxProps } from './box.js';
+import { theme } from '../../design_system/theme.js';
+import type { Size } from '../../design_system/tokens';
+import { Box, type BoxProps } from '../box';
 
 export const cardContainerClassNames = {
     CONTENT: 'CardContainer-Content',

package/src/components/card_container/index.ts

@@ -0,0 +1 @@
+export * from './card_container.js';

package/src/components/{chip.tsx → chip/chip.tsx}

@@ -6,8 +6,8 @@ import styled, { css } from 'styled-components';
 
 import type { ValueOf } from '@apify-packages/types';
 
-import { theme } from '../design_system/theme.js';
-import type { RegularBoxProps } from './box.js';
+import { theme } from '../../design_system/theme.js';
+import type { RegularBoxProps } from '../box';
 
 export const CHIP_SIZES = {
     EXTRA_SMALL: 'XS',

package/src/components/chip/index.ts

@@ -0,0 +1 @@
+export * from './chip.js';

package/src/components/code/action_button.tsx

@@ -5,8 +5,8 @@ import { CheckIcon, CopyIcon } from '@apify/ui-icons';
 
 import { theme } from '../../design_system/theme.js';
 import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
-import { useCopyToClipboard } from '../../utils/index.js';
-import { Text } from '../text/index.js';
+import { useCopyToClipboard } from '../../utils';
+import { Text } from '../text';
 
 interface StyledButtonProps {
     $successStyle?: boolean;

package/src/components/code/code_block/code_block.styled.tsx

@@ -1,8 +1,8 @@
 import styled, { css } from 'styled-components';
 
 import { theme } from '../../../design_system/theme.js';
-import { Box } from '../../box.js';
-import type { SharedTextProps, SharedTextSize } from '../../text/text_shared.js';
+import { Box } from '../../box';
+import type { SharedTextProps, SharedTextSize } from '../../text/text_shared';
 
 export type SyntaxHighlighterBaseStylesWrapperProps = SharedTextProps & {
     $fullWidth?: boolean;

package/src/components/code/code_block/code_block.tsx

@@ -2,11 +2,11 @@ import clsx from 'clsx';
 import type React from 'react';
 import { useMemo, useRef, useState } from 'react';
 
-import type { RegularBoxProps } from '../../box.js';
-import { ColorWheelGradient } from '../../color_wheel_gradient.js';
-import { Link } from '../../link.js';
-import { Text } from '../../text/index.js';
-import type { SharedTextSize } from '../../text/text_shared.js';
+import type { RegularBoxProps } from '../../box';
+import { ColorWheelGradient } from '../../color_wheel_gradient';
+import { Link } from '../../link';
+import { Text } from '../../text';
+import type { SharedTextSize } from '../../text/text_shared';
 import { ActionButton, CopyButton } from '../action_button.js';
 import { PrismSyntaxHighlighter } from '../prism_highlighter.js';
 import { CodeBlockWrapper } from './code_block.styled.js';

package/src/components/code/code_block/code_block_with_tabs.tsx

@@ -7,8 +7,8 @@ import { CodeIcon, HttpIcon, type IconComponent, McpIcon } from '@apify/ui-icons
 
 import { theme } from '../../../design_system/theme.js';
 import { useSharedUiDependencies } from '../../../ui_dependency_provider.js';
-import { Box, type MarginSpacingProps, type RegularBoxProps } from '../../box.js';
-import { Link, type RegularLinkProps } from '../../link.js';
+import { Box, type MarginSpacingProps, type RegularBoxProps } from '../../box';
+import { Link, type RegularLinkProps } from '../../link';
 import { HeadingShared } from '../../text/heading_shared.js';
 import { CodeBlock, type CodeBlockProps } from './code_block.js';
 

package/src/components/code/inline_code/inline_code.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import type { InlineCodeProps } from './inline_code.js';
+import type { InlineCodeProps } from './inline_code';
 import { InlineCode } from './inline_code.js';
 
 /**

package/src/components/code/inline_code/inline_code.tsx

@@ -5,9 +5,9 @@ import { CheckIcon, CopyIcon } from '@apify/ui-icons';
 
 import { theme } from '../../../design_system/theme.js';
 import { useCopyToClipboard } from '../../../utils/copy_to_clipboard.js';
-import type { RegularBoxProps } from '../../box.js';
-import { Text } from '../../text/index.js';
-import type { SharedTextSize } from '../../text/text_shared.js';
+import type { RegularBoxProps } from '../../box';
+import { Text } from '../../text';
+import type { SharedTextSize } from '../../text/text_shared';
 
 // TODO: We should not need to export these once we consolidate Markdown
 export const inlineCodeStyles = css`

package/src/components/code/one_line_code/one_line_code.tsx

@@ -6,11 +6,11 @@ import { EyeIcon, EyeOffIcon } from '@apify/ui-icons';
 import type { HttpMethod } from '@apify-packages/types';
 
 import { theme } from '../../../design_system/theme.js';
-import type { BoxProps } from '../../box.js';
-import { Text } from '../../text/index.js';
-import type { SharedTextSize } from '../../text/text_shared.js';
+import type { BoxProps } from '../../box';
+import { Text } from '../../text';
+import type { SharedTextSize } from '../../text/text_shared';
 import { ActionButton, CopyButton } from '../action_button.js';
-import type { SyntaxHighlighterBaseStylesWrapperProps } from '../code_block/code_block.styled.js';
+import type { SyntaxHighlighterBaseStylesWrapperProps } from '../code_block/code_block.styled';
 import { SyntaxHighlighterBaseStylesWrapper } from '../code_block/code_block.styled.js';
 import { getBashLinePrefixes } from '../code_block/utils.js';
 import { PrismSyntaxHighlighter } from '../prism_highlighter.js';

package/src/components/code/prism_highlighter.tsx

@@ -8,8 +8,8 @@ import styled, { css } from 'styled-components';
 
 import { theme } from '../../design_system/theme.js';
 import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
-import { Text } from '../text/index.js';
-import type { SharedTextSize } from '../text/text_shared.js';
+import { Text } from '../text';
+import type { SharedTextSize } from '../text';
 import { oneLightTheme } from './one_light_theme.js';
 
 (typeof global !== 'undefined' ? global : window).Prism = Prism;

package/src/components/collapsible_card/collapsible_card.tsx

@@ -6,8 +6,8 @@ import styled, { css } from 'styled-components';
 import { ChevronDownIcon } from '@apify/ui-icons';
 
 import { theme } from '../../design_system/theme.js';
-import type { WithTransientProps } from '../../type_utils.js';
-import { Box } from '../box.js';
+import type { WithTransientProps } from '../../type_utils';
+import { Box } from '../box';
 
 interface TransientWrapperProps {
     hideOuterBorder?: boolean;

package/src/components/color_wheel_gradient/index.ts

@@ -0,0 +1 @@
+export * from './color_wheel_gradient.js';