@apify/ui-library 1.140.2 → 1.141.1

package/src/components/radio_button/radio_button.tsx

@@ -0,0 +1,43 @@
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import clsx from 'clsx';
+import { type ComponentPropsWithoutRef, type FC } from 'react';
+import styled from 'styled-components';
+
+import { radioButtonStyle } from './radio_button.style.js';
+
+const RADIO_VALUE = 'checked';
+
+const StyledRoot = styled(RadioGroupPrimitive.Root)`
+    display: contents;
+`;
+
+const StyledRadioItem = styled(RadioGroupPrimitive.Item)`
+    ${radioButtonStyle}
+`;
+
+type RadioButtonBaseProps = Omit<ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, 'value'> & {
+    setValue: () => void;
+    error?: string;
+    readOnly?: boolean;
+};
+
+export type RadioButtonPrimitiveProps = RadioButtonBaseProps & { value: boolean };
+
+export const RadioButtonPrimitive: FC<RadioButtonPrimitiveProps> = ({
+    value,
+    setValue,
+    error,
+    disabled,
+    readOnly,
+    className,
+    ...rest
+}) => (
+    <StyledRoot value={value ? RADIO_VALUE : ''} onValueChange={() => setValue()}>
+        <StyledRadioItem
+            value={RADIO_VALUE}
+            disabled={disabled || readOnly}
+            className={clsx(className, error && 'error', (disabled || readOnly) && 'disabled')}
+            {...rest}
+        />
+    </StyledRoot>
+);

package/src/components/rating/index.ts

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

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

@@ -6,10 +6,10 @@ import { StarEmptyIcon, StarFullIcon, StarHalfIcon } from '@apify/ui-icons';
 
 import type { ReviewRating } from '@apify-packages/types';
 
-import { theme } from '../design_system/theme.js';
-import type { BoxProps } from './box.js';
-import { Box } from './box.js';
-import { Text } from './text/index.js';
+import { theme } from '../../design_system/theme.js';
+import type { BoxProps } from '../box';
+import { Box } from '../box';
+import { Text } from '../text';
 
 type RatingStatsProps = {
     ratingStats: Record<ReviewRating, number>;

package/src/components/readme_renderer/table_of_contents.tsx

@@ -5,9 +5,9 @@ import remarkToc from 'remark-toc';
 import styled from 'styled-components';
 
 import { theme } from '../../design_system/theme.js';
-import { inlineCodeStyles } from '../code/index.js';
-import { Link } from '../link.js';
-import { Text } from '../text/index.js';
+import { inlineCodeStyles } from '../code';
+import { Link } from '../link';
+import { Text } from '../text';
 import { cleanMarkdown, slugifyHeadingChildren } from './utils.js';
 
 export const useShowTableOfContents = (markdown: string | null | undefined) =>

package/src/components/select/select.tsx

@@ -14,8 +14,8 @@ import styled from 'styled-components';
 import { CaretDownIcon, CaretUpIcon, CrossIcon, XCircleIcon } from '@apify/ui-icons';
 
 import { theme } from '../../design_system/theme.js';
-import { IconButton } from '../icon_button.js';
-import { Text } from '../text/index.js';
+import { IconButton } from '../icon_button';
+import { Text } from '../text';
 
 const DEFAULT_Z_INDEX_IN_MODAL = 99;
 const DEFAULT_Z_INDEX_OUTSIDE_MODAL = 9;

package/src/components/shortcut/index.ts

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

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { theme } from '../design_system/theme.ts';
+import { theme } from '../../design_system/theme.ts';
 import { Shortcut } from './shortcut.tsx';
 
 export default {

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

@@ -1,8 +1,8 @@
 import type { ElementType } from 'react';
 import styled, { css } from 'styled-components';
 
-import { theme } from '../design_system/theme.js';
-import { Text } from './text/index.js';
+import { theme } from '../../design_system/theme.js';
+import { Text } from '../text';
 
 interface ShortcutProps {
     as?: ElementType;

package/src/components/simple_markdown/simple_markdown.stories.tsx

@@ -1,4 +1,4 @@
-import { Box } from '../box.js';
+import { Box } from '../box';
 import { SimpleMarkdown, type SimpleMarkdownProps } from './simple_markdown.js';
 
 const testMarkdown = `

package/src/components/simple_markdown/simple_markdown.tsx

@@ -11,11 +11,11 @@ import { visit } from 'unist-util-visit';
 
 import { theme } from '../../design_system/theme.js';
 import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
-import { Box } from '../box.js';
-import { Image } from '../image.js';
-import { isUrlExternal } from '../link.js';
-import { cleanMarkdown } from '../readme_renderer/utils.js';
-import { Heading, HeadingContent, Text, TextContent } from '../text/index.js';
+import { Box } from '../box';
+import { Image } from '../image';
+import { isUrlExternal } from '../link';
+import { cleanMarkdown } from '../readme_renderer';
+import { Heading, HeadingContent, Text, TextContent } from '../text';
 import { MarkdownBlockQuote, MarkdownCode, MarkdownLink, MarkdownTable } from './simple_markdown_components.js';
 
 export type SimpleMarkdownComponents = Components;

package/src/components/simple_markdown/simple_markdown_components.tsx

@@ -7,17 +7,17 @@ import styled from 'styled-components';
 import { CheckIcon, LinkIcon } from '@apify/ui-icons';
 
 import { theme } from '../../design_system/theme.js';
-import type { WithOptional } from '../../type_utils.js';
-import { useCopyToClipboard } from '../../utils/index.js';
-import { Box } from '../box.js';
-import { CodeBlock, InlineCode, OneLineCode } from '../code/index.js';
-import type { LinkProps } from '../link.js';
-import { Link } from '../link.js';
-import { slugifyHeadingChildren } from '../readme_renderer/utils.js';
-import type { HeadingSharedProps } from '../text/heading_shared.js';
-import { Heading, TextContent } from '../text/index.js';
-import type { ContentTextProps } from '../text/text_content.js';
-import type { SharedTextSize } from '../text/text_shared.js';
+import type { WithOptional } from '../../type_utils';
+import { useCopyToClipboard } from '../../utils';
+import { Box } from '../box';
+import { CodeBlock, InlineCode, OneLineCode } from '../code';
+import type { LinkProps } from '../link';
+import { Link } from '../link';
+import { slugifyHeadingChildren } from '../readme_renderer';
+import { Heading, TextContent } from '../text';
+import type { HeadingSharedProps } from '../text';
+import type { ContentTextProps } from '../text';
+import type { SharedTextSize } from '../text';
 
 const simpleMarkdownClassNames = {
     HEADING_ICON_LINK: 'headingIconLink',

package/src/components/spinner/index.ts

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

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

@@ -1,7 +1,7 @@
 import styled, { keyframes } from 'styled-components';
 
-import { theme } from '../design_system/theme.js';
-import type { WithTransientProps } from '../type_utils.js';
+import { theme } from '../../design_system/theme.js';
+import type { WithTransientProps } from '../../type_utils';
 
 export const spinnerClassNames = {
     SPINNER: 'spinner',

package/src/components/store/store_actor_header.tsx

@@ -2,9 +2,9 @@ import styled from 'styled-components';
 
 import { StarEmptyIcon, WarningTriangleIcon } from '@apify/ui-icons';
 
-import { Badge, Box, type BoxProps, Text } from '../../components/index.js';
+import { Badge, Box, type BoxProps, Text } from '../../components';
 import { theme } from '../../design_system/theme.js';
-import { ActorAvatar, actorAvatarClassnames } from '../avatar/actor_avatar.js';
+import { ActorAvatar, actorAvatarClassnames } from '../avatar';
 
 const storeActorHeaderClassNames = {
     title: 'ActorStoreItem-title',

package/src/components/tab_number_chip/index.ts

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

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

@@ -2,7 +2,7 @@ import type React from 'react';
 import styled from 'styled-components';
 
 import { theme } from '../../design_system/theme.js';
-import { Text } from '../text/index.js';
+import { Text } from '../text';
 
 const StyledChip = styled(Text)`
     color: ${theme.color.neutral.text};

package/src/components/table/index.ts

@@ -12,5 +12,5 @@ export { TableEmptyRow } from './table_empty_row.js';
 export { TableLoadingRow } from './table_loading_row.js';
 export { TableErrorRow } from './table_error_row.js';
 export { tableClassNames } from './table.styled.js';
-export { tableTestIds } from './table_test_ids.js';
-export type { HorizontallyScrollableTableWrapperProps, TableExpansion, TableRowProps } from './types.js';
+export { tableTestIds } from './table.test_ids.js';
+export type { HorizontallyScrollableTableWrapperProps, TableExpansion, TableRowProps } from './table.types.js';

package/src/components/table/table.context.ts

@@ -1,5 +1,5 @@
 import { createContext } from 'react';
 
-import type { To } from '../link.js';
+import type { To } from '../link';
 
 export const TableRowLinkContext = createContext<To | undefined>(undefined);

package/src/components/table/table.stories.tsx

@@ -1,19 +1,22 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { expect, within } from 'storybook/test';
 
-import { Text } from '../text/index.js';
-import { Table } from './table.js';
-import { TableBody } from './table_body.js';
-import { TableCell, TableCellLink } from './table_cell.js';
-import { TableEmptyRow } from './table_empty_row.js';
-import { TableErrorRow } from './table_error_row.js';
-import { TableHead } from './table_head.js';
-import { TableHeadCell } from './table_head_cell.js';
-import { TableHeadRow } from './table_head_row.js';
-import { TableLoadingRow } from './table_loading_row.js';
-import { TableRow } from './table_row.js';
-import { tableTestIds } from './table_test_ids.js';
-import { HorizontallyScrollableTableWrapper } from './table_wrapper.js';
+import { Text } from '../text';
+import {
+    HorizontallyScrollableTableWrapper,
+    Table,
+    TableBody,
+    TableCell,
+    TableCellLink,
+    TableEmptyRow,
+    TableErrorRow,
+    TableHead,
+    TableHeadCell,
+    TableHeadRow,
+    TableLoadingRow,
+    TableRow,
+    tableTestIds,
+} from './';
 
 // ---------------------------------------------------------------------------
 // Mock data

package/src/components/table/table.styled.ts

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 import { theme } from '../../design_system/theme.js';
-import { Box } from '../box.js';
+import { Box } from '../box';
 
 /** z-index for sticky table head cells. Consumers can override via CSS if needed. */
 const STICKY_HEAD_Z_INDEX = 5;

package/src/components/table/table.test_ids.ts

@@ -0,0 +1,15 @@
+export const tableTestIds = {
+    TABLE: 'table',
+    HEAD: 'table-head',
+    HEAD_ROW: 'table-head-row',
+    HEAD_CELL: 'table-head-cell',
+    BODY: 'table-body',
+    ROW: 'table-row',
+    CELL: 'table-cell',
+    FOOT: 'table-foot',
+    WRAPPER: 'table-wrapper',
+    EMPTY_ROW: 'table-empty-row',
+    LOADING_ROW: 'table-loading-row',
+    ERROR_ROW: 'table-error-row',
+    EXPANSION_ROW: 'table-expansion-row',
+};

package/src/components/table/table.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import type { FC, HTMLAttributes } from 'react';
 
 import { StyledTable, tableClassNames } from './table.styled.js';
-import { tableTestIds } from './table_test_ids.js';
+import { tableTestIds } from './table.test_ids.js';
 
 export const Table: FC<HTMLAttributes<HTMLTableElement>> = ({ className, ...rest }) => (
     <StyledTable data-test={tableTestIds.TABLE} className={clsx(tableClassNames.TABLE, className)} {...rest} />

package/src/components/table/{types.ts → table.types.ts}

@@ -1,6 +1,6 @@
 import type { HTMLAttributes, ReactNode } from 'react';
 
-import type { To } from '../link.js';
+import type { To } from '../link';
 
 export type TableRowProps = HTMLAttributes<HTMLTableRowElement> & {
     /** Apply clickable cursor style. Automatically set when `to` is provided. */

package/src/components/table/table_body.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import type { FC, HTMLAttributes } from 'react';
 
 import { tableClassNames } from './table.styled.js';
-import { tableTestIds } from './table_test_ids.js';
+import { tableTestIds } from './table.test_ids.js';
 
 export const TableBody: FC<HTMLAttributes<HTMLTableSectionElement>> = ({ className, ...rest }) => (
     <tbody data-test={tableTestIds.BODY} className={clsx(tableClassNames.BODY, className)} {...rest} />

package/src/components/table/table_cell.tsx

@@ -2,10 +2,10 @@ import clsx from 'clsx';
 import type { FC, TdHTMLAttributes } from 'react';
 import { useContext } from 'react';
 
-import { Link, type LinkProps } from '../link.js';
+import { Link, type LinkProps } from '../link';
 import { TableRowLinkContext } from './table.context.js';
 import { tableClassNames } from './table.styled.js';
-import { tableTestIds } from './table_test_ids.js';
+import { tableTestIds } from './table.test_ids.js';
 
 export const TableCell: FC<TdHTMLAttributes<HTMLTableCellElement>> = ({ className, children, ...rest }) => {
     const rowLink = useContext(TableRowLinkContext);

package/src/components/table/table_empty_row.tsx

@@ -1,7 +1,7 @@
 import type { FC, ReactNode } from 'react';
 
 import { tableClassNames } from './table.styled.js';
-import { tableTestIds } from './table_test_ids.js';
+import { tableTestIds } from './table.test_ids.js';
 
 export const TableEmptyRow: FC<{ colSpan: number; children: ReactNode }> = ({ colSpan, children }) => (
     <tr data-test={tableTestIds.EMPTY_ROW} className={tableClassNames.ROW_EMPTY}>

package/src/components/table/table_error_row.tsx

@@ -1,8 +1,8 @@
 import type { FC, ReactNode } from 'react';
 
-import { Text } from '../text/index.js';
+import { Text } from '../text';
 import { tableClassNames } from './table.styled.js';
-import { tableTestIds } from './table_test_ids.js';
+import { tableTestIds } from './table.test_ids.js';
 
 export const TableErrorRow: FC<{ colSpan: number; children?: ReactNode; error?: Error | null }> = ({
     colSpan,

package/src/components/table/table_expansion_row.tsx

@@ -2,8 +2,8 @@ import clsx from 'clsx';
 import type { FC, ReactNode } from 'react';
 
 import { tableClassNames } from './table.styled.js';
-import { tableTestIds } from './table_test_ids.js';
-import type { TableExpansion } from './types.js';
+import { tableTestIds } from './table.test_ids.js';
+import type { TableExpansion } from './table.types';
 
 export const TableExpansionRow: FC<{
     colSpan: number;

package/src/components/table/table_foot.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import type { FC, HTMLAttributes } from 'react';
 
 import { tableClassNames } from './table.styled.js';
-import { tableTestIds } from './table_test_ids.js';
+import { tableTestIds } from './table.test_ids.js';
 
 export const TableFoot: FC<HTMLAttributes<HTMLTableSectionElement>> = ({ className, ...rest }) => (
     <tfoot data-test={tableTestIds.FOOT} className={clsx(tableClassNames.FOOT, className)} {...rest} />

package/src/components/table/table_head.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import type { FC, HTMLAttributes } from 'react';
 
 import { tableClassNames } from './table.styled.js';
-import { tableTestIds } from './table_test_ids.js';
+import { tableTestIds } from './table.test_ids.js';
 
 export const TableHead: FC<HTMLAttributes<HTMLTableSectionElement>> = ({ className, ...rest }) => (
     <thead data-test={tableTestIds.HEAD} className={clsx(tableClassNames.HEAD, className)} {...rest} />

package/src/components/table/table_head_cell.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import type { FC, ThHTMLAttributes } from 'react';
 
 import { tableClassNames } from './table.styled.js';
-import { tableTestIds } from './table_test_ids.js';
+import { tableTestIds } from './table.test_ids.js';
 
 export const TableHeadCell: FC<ThHTMLAttributes<HTMLTableCellElement>> = ({ className, ...rest }) => (
     <th data-test={tableTestIds.HEAD_CELL} className={clsx(tableClassNames.HEAD_CELL, className)} {...rest} />

package/src/components/table/table_head_row.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import type { FC, HTMLAttributes } from 'react';
 
 import { tableClassNames } from './table.styled.js';
-import { tableTestIds } from './table_test_ids.js';
+import { tableTestIds } from './table.test_ids.js';
 
 export const TableHeadRow: FC<HTMLAttributes<HTMLTableRowElement>> = ({ className, ...rest }) => (
     <tr data-test={tableTestIds.HEAD_ROW} className={clsx(tableClassNames.HEAD_ROW, className)} {...rest} />

package/src/components/table/table_loading_row.tsx

@@ -1,8 +1,8 @@
 import type { FC, ReactNode } from 'react';
 
-import { InlineSpinner } from '../spinner.js';
+import { InlineSpinner } from '../spinner';
 import { tableClassNames } from './table.styled.js';
-import { tableTestIds } from './table_test_ids.js';
+import { tableTestIds } from './table.test_ids.js';
 
 export const TableLoadingRow: FC<{ colSpan: number; children?: ReactNode }> = ({ colSpan, children }) => (
     <tr data-test={tableTestIds.LOADING_ROW} className={tableClassNames.ROW_EMPTY}>

package/src/components/table/table_row.tsx

@@ -3,8 +3,8 @@ import type { FC } from 'react';
 
 import { TableRowLinkContext } from './table.context.js';
 import { tableClassNames } from './table.styled.js';
-import { tableTestIds } from './table_test_ids.js';
-import type { TableRowProps } from './types.js';
+import { tableTestIds } from './table.test_ids.js';
+import type { TableRowProps } from './table.types';
 
 export const TableRow: FC<TableRowProps> = ({ className, clickable, expanded, to, ...rest }) => {
     const row = (

package/src/components/table/table_wrapper.tsx

@@ -1,10 +1,10 @@
 import type { FC } from 'react';
 import { useCallback, useEffect, useRef } from 'react';
 
-import { Box } from '../box.js';
+import { Box } from '../box';
 import { StyledHorizontallyScrollableTableWrapper, StyledTableFooterWrapper, tableClassNames } from './table.styled.js';
-import { tableTestIds } from './table_test_ids.js';
-import type { HorizontallyScrollableTableWrapperProps } from './types.js';
+import { tableTestIds } from './table.test_ids.js';
+import type { HorizontallyScrollableTableWrapperProps } from './table.types';
 
 export const HorizontallyScrollableTableWrapper: FC<HorizontallyScrollableTableWrapperProps> = ({
     children,

package/src/components/tabs/tab.tsx

@@ -6,15 +6,15 @@ 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 { FlattenSimpleInterpolation } from '../../utils/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';
+import type { WithTransientProps } from '../../type_utils';
+import type { FlattenSimpleInterpolation } from '../../utils/type_utils';
+import type { BadgeSize } from '../badge';
+import { Badge } from '../badge';
+import type { MarginSpacingProps, RegularBoxProps } from '../box';
+import type { RegularLinkProps } from '../link';
+import { Link } from '../link';
+import { Text } from '../text';
+import type { SharedTextSize } from '../text';
 
 type SharedTabProps = Omit<RegularBoxProps, 'as' | 'onClick'> &
     MarginSpacingProps &

package/src/components/tabs/tabs.tsx

@@ -3,12 +3,12 @@ import { useCallback, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 
 import { theme } from '../../design_system/theme.js';
-import type { WithTransientProps } from '../../type_utils.js';
+import type { WithTransientProps } from '../../type_utils';
 import { useResizeObserverSsr } from '../../utils/resize_observer.js';
-import type { FlattenSimpleInterpolation } from '../../utils/type_utils.js';
-import type { MarginSpacingProps, RegularBoxProps } from '../box.js';
-import { Box } from '../box.js';
-import type { TabData, TabVariant } from './tab.js';
+import type { FlattenSimpleInterpolation } from '../../utils/type_utils';
+import type { MarginSpacingProps, RegularBoxProps } from '../box';
+import { Box } from '../box';
+import type { TabData, TabVariant } from './tab';
 import { Tab } from './tab.js';
 
 type SharedTabsProps = Omit<RegularBoxProps, 'as' | 'onClick'> & MarginSpacingProps;

package/src/components/tag/index.ts

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

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

@@ -3,8 +3,8 @@ import styled from 'styled-components';
 
 import { PeopleIcon, PlusIcon } from '@apify/ui-icons';
 
+import { SHARED_TEXT_TYPES } from '../text/text_shared.tsx';
 import { Tag, TAG_SIZES, TAG_VARIANTS } from './tag.tsx';
-import { SHARED_TEXT_TYPES } from './text/text_shared.tsx';
 
 export default {
     title: 'UI-Library/Tag',