@@ -67,18 +67,18 @@ const App = () => (
export default App;
```
-## 🤝 Contributing [](http://makeapullrequest.com)
+## 🤝 Contributing [](https://kentcdodds.github.io/makeapullrequest.com/)
-
+
+ 
-
{/* Section component to group items within the list */}
-
+ {Object.entries(icons).map(([name, Icon]) => (
+
+
+ ))}
+
+
+ {Object.entries(iconPack).map(([name, Icon]) => (
+
+
+ ))}
+
+- The accordion's basic form is believed to have been invented in Berlin, in 1822, - by Christian Friedrich Ludwig Buschmann, although one instrument was discovered in 2006 - that appears to have been built earlier. The earliest history of the accordion in Russia is poorly documented. + The accordion's basic form is believed to have been invented + in Berlin, in 1822, by Christian Friedrich Ludwig Buschmann, + although one instrument was discovered in 2006 that appears to + have been built earlier. The earliest history of the accordion in + Russia is poorly documented.
{hasReactNode(children) && isNumber && (
<>
- {large && {children} }
+ {large && (
+
+ {children}
+
+ )}
{!large && {children} }
)}
diff --git a/src/components/Blocks/Banner/Banner.module.css.d.ts b/src/components/Blocks/Banner/Banner.module.css.d.ts
new file mode 100644
index 00000000..f4ee9ec8
--- /dev/null
+++ b/src/components/Blocks/Banner/Banner.module.css.d.ts
@@ -0,0 +1,16 @@
+declare const styles: {
+ readonly "background": string;
+ readonly "buttons": string;
+ readonly "close": string;
+ readonly "description": string;
+ readonly "middle": string;
+ readonly "subheader": string;
+ readonly "title": string;
+ readonly "wrapper": string;
+ readonly "wrapper--base": string;
+ readonly "wrapper--inline": string;
+ readonly "wrapper--ios": string;
+ readonly "wrapper--withBackground": string;
+};
+export = styles;
+
diff --git a/src/components/Blocks/Banner/Banner.stories.tsx b/src/components/Blocks/Banner/Banner.stories.tsx
index 73031ecb..db8bdfd9 100644
--- a/src/components/Blocks/Banner/Banner.stories.tsx
+++ b/src/components/Blocks/Banner/Banner.stories.tsx
@@ -31,7 +31,12 @@ export const Playground: Story = {
children: (
<>
-
+
),
onCloseIcon: () => console.log('onCloseIcon'),
@@ -57,7 +62,14 @@ export const Image: Story = {
src="https://www.nasa.gov/wp-content/uploads/2023/10/streams.jpg?resize=1536,864"
/>
),
- children: ,
+ children: (
+
+ ),
},
decorators: [
(StoryComponent) => (
@@ -67,4 +79,3 @@ export const Image: Story = {
),
],
} satisfies Story;
-
diff --git a/src/components/Blocks/Banner/Banner.tsx b/src/components/Blocks/Banner/Banner.tsx
index 884bb3b7..1cdafd29 100644
--- a/src/components/Blocks/Banner/Banner.tsx
+++ b/src/components/Blocks/Banner/Banner.tsx
@@ -1,6 +1,6 @@
'use client';
-import { HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+import type { HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
import styles from './Banner.module.css';
import { classNames } from 'helpers/classNames';
@@ -38,8 +38,8 @@ export interface BannerProps extends HTMLAttributes {
}
/**
- * The `Banner` component renders a prominent graphical element, typically displayed at the top of a page or section,
- * designed to grab the user's attention and convey important information.
+ * The `Banner` component renders a prominent graphical element, typically displayed at the top of a page or section,
+ * designed to grab the user's attention and convey important information.
* It is a versatile tool used for various purposes such as branding, promotion, announcements, or navigation.
*/
export const Banner = ({
@@ -66,33 +66,57 @@ export const Banner = ({
platform === 'base' && styles['wrapper--base'],
hasBackground && styles['wrapper--withBackground'],
type === 'inline' && styles['wrapper--inline'],
- className,
+ className
)}
{...restProps}
>
- {hasBackground && (
-
- {!hasBackground && (platform === 'ios' ?
+ {!hasBackground &&
+ (platform === 'ios' ?
)}
);
-};
\ No newline at end of file
+};
diff --git a/src/components/Blocks/Banner/components/BannerDescriptionTypography/BannerDescriptionTypography.tsx b/src/components/Blocks/Banner/components/BannerDescriptionTypography/BannerDescriptionTypography.tsx
index 93860a1d..fb53f46b 100644
--- a/src/components/Blocks/Banner/components/BannerDescriptionTypography/BannerDescriptionTypography.tsx
+++ b/src/components/Blocks/Banner/components/BannerDescriptionTypography/BannerDescriptionTypography.tsx
@@ -2,17 +2,28 @@ import { usePlatform } from 'hooks/usePlatform';
import { Caption } from 'components/Typography/Caption/Caption';
import { Subheadline } from 'components/Typography/Subheadline/Subheadline';
-import { TypographyProps } from 'components/Typography/Typography';
+import type { TypographyProps } from 'components/Typography/Typography';
-export interface BannerDescriptionTypographyProps extends Omit {
-}
+export type BannerDescriptionTypographyProps = Omit;
-export const BannerDescriptionTypography = (props: BannerDescriptionTypographyProps) => {
+export const BannerDescriptionTypography = (
+ props: BannerDescriptionTypographyProps
+) => {
const platform = usePlatform();
if (platform === 'ios') {
- return ;
export const Playground: Story = {
args: {
type: 'text',
- // eslint-disable-next-line max-len
- children: 'There is grandeur in this view of life, with its several powers, having been originally breathed by the Creator into a few forms or into one; and that, whilst this planet has gone circling on according to the fixed law of gravity, from so simple a beginning endless forms most beautiful and most wonderful have been, and are being evolved.',
+ children:
+ 'There is grandeur in this view of life, with its several powers, having been originally breathed by the Creator into a few forms or into one; and that, whilst this planet has gone circling on according to the fixed law of gravity, from so simple a beginning endless forms most beautiful and most wonderful have been, and are being evolved.',
},
} satisfies Story;
diff --git a/src/components/Blocks/Blockquote/Blockquote.tsx b/src/components/Blocks/Blockquote/Blockquote.tsx
index 8d452cca..14f57249 100644
--- a/src/components/Blocks/Blockquote/Blockquote.tsx
+++ b/src/components/Blocks/Blockquote/Blockquote.tsx
@@ -1,4 +1,4 @@
-import { HTMLAttributes, ReactNode } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
import styles from './Blockquote.module.css';
import { classNames } from 'helpers/classNames';
@@ -17,25 +17,28 @@ export interface BlockquoteProps extends HTMLAttributes {
children?: ReactNode;
}
+const defaultTopRightIcon =
- {background}
-
- )}
+ {hasBackground && {background}
}
{before}
- {hasReactNode(callout) && {callout} }
- {hasReactNode(header) && {header} }
- {hasReactNode(subheader) && {subheader} }
- {hasReactNode(description) && {description} }
+ {hasReactNode(callout) && (
+
+ {callout}
+
+ )}
+ {hasReactNode(header) && (
+
+ {header}
+
+ )}
+ {hasReactNode(subheader) && (
+
+ {subheader}
+
+ )}
+ {hasReactNode(description) && (
+
+ {description}
+
+ )}
{hasReactNode(children) && (
-
{onCloseIcon && (
-
- {children}
-
+ {children}
)}
- {type === 'text' ? {children} : children}
+ {type === 'text' ? (
+ {children}
+ ) : (
+ children
+ )}
{topRightIcon}
diff --git a/src/components/Blocks/Button/Button.module.css.d.ts b/src/components/Blocks/Button/Button.module.css.d.ts
new file mode 100644
index 00000000..31b45295
--- /dev/null
+++ b/src/components/Blocks/Button/Button.module.css.d.ts
@@ -0,0 +1,21 @@
+declare const styles: {
+ readonly "after": string;
+ readonly "before": string;
+ readonly "content": string;
+ readonly "spinner": string;
+ readonly "wrapper": string;
+ readonly "wrapper--bezeled": string;
+ readonly "wrapper--filled": string;
+ readonly "wrapper--gray": string;
+ readonly "wrapper--ios": string;
+ readonly "wrapper--l": string;
+ readonly "wrapper--loading": string;
+ readonly "wrapper--m": string;
+ readonly "wrapper--outline": string;
+ readonly "wrapper--plain": string;
+ readonly "wrapper--s": string;
+ readonly "wrapper--stretched": string;
+ readonly "wrapper--white": string;
+};
+export = styles;
+
diff --git a/src/components/Blocks/Button/Button.tsx b/src/components/Blocks/Button/Button.tsx
index bb1175d3..cb6d23aa 100644
--- a/src/components/Blocks/Button/Button.tsx
+++ b/src/components/Blocks/Button/Button.tsx
@@ -1,6 +1,7 @@
'use client';
-import { AllHTMLAttributes, ElementType, forwardRef, ReactNode } from 'react';
+import type { AllHTMLAttributes, ElementType, ReactNode } from 'react';
+import { forwardRef } from 'react';
import styles from './Button.module.css';
import { classNames } from 'helpers/classNames';
@@ -11,7 +12,8 @@ import { Spinner } from 'components/Feedback/Spinner/Spinner';
import { Tappable } from 'components/Service/Tappable/Tappable';
import { ButtonTypography } from './components/ButtonTypography/ButtonTypography';
-export interface ButtonProps extends Omit, 'size'> {
+export interface ButtonProps
+ extends Omit, 'size'> {
/** Inserts a component before the button text, typically an icon. */
before?: ReactNode;
/** Inserts a component after the button text, such as a badge or indicator. */
@@ -48,49 +50,56 @@ const sizeStyles = {
/**
* Renders a button or a button-like element with customizable properties, such as size, mode, and loading state. Supports adding icons or other elements before and after the text.
*/
-export const Button = forwardRef(({
- type,
- size = 'm',
- before,
- after,
- stretched,
- children,
- className,
- mode = 'filled',
- loading,
- Component = 'button',
- ...restProps
-}: ButtonProps, ref) => {
- const platform = usePlatform();
+export const Button = forwardRef(
+ (
+ {
+ type,
+ size = 'm',
+ before,
+ after,
+ stretched,
+ children,
+ className,
+ mode = 'filled',
+ loading,
+ Component = 'button',
+ ...restProps
+ },
+ ref
+ ) => {
+ const platform = usePlatform();
- return (
-
- {loading && {children}
- {hasReactNode(after) && (
-
- );
-});
+ return (
+
+ {loading && (
+
+ {children}
+
+ {hasReactNode(after) &&
+ );
+ }
+);
diff --git a/src/components/Blocks/Button/components/ButtonTypography/ButtonTypography.tsx b/src/components/Blocks/Button/components/ButtonTypography/ButtonTypography.tsx
index 41edb111..f9284028 100644
--- a/src/components/Blocks/Button/components/ButtonTypography/ButtonTypography.tsx
+++ b/src/components/Blocks/Button/components/ButtonTypography/ButtonTypography.tsx
@@ -1,15 +1,29 @@
import { Subheadline } from 'components/Typography/Subheadline/Subheadline';
import { Text } from 'components/Typography/Text/Text';
-import { TypographyProps } from 'components/Typography/Typography';
+import type { TypographyProps } from 'components/Typography/Typography';
export interface ButtonTypographyProps extends Omit {
size: 's' | 'm' | 'l';
}
-export const ButtonTypography = ({ size, ...restProps }: ButtonTypographyProps) => {
+export const ButtonTypography = ({
+ size,
+ ...restProps
+}: ButtonTypographyProps) => {
if (size === 'l') {
- return 
-
+
New York
diff --git a/src/components/Blocks/Card/Card.tsx b/src/components/Blocks/Card/Card.tsx
index 8271c898..30a06640 100644
--- a/src/components/Blocks/Card/Card.tsx
+++ b/src/components/Blocks/Card/Card.tsx
@@ -1,4 +1,9 @@
-import { forwardRef, ForwardRefExoticComponent, HTMLAttributes, RefAttributes } from 'react';
+import type {
+ ForwardRefExoticComponent,
+ HTMLAttributes,
+ RefAttributes,
+} from 'react';
+import { forwardRef } from 'react';
import styles from './Card.module.css';
import { classNames } from 'helpers/classNames';
@@ -6,14 +11,17 @@ import { useObjectMemo } from 'hooks/useObjectMemo';
import { CardCell } from './components/CardCell/CardCell';
import { CardChip } from './components/CardChip/CardChip';
-import { CardContext, CardContextInterface } from './CardContext';
+import type { CardContextInterface } from './CardContext';
+import { CardContext } from './CardContext';
export interface CardProps extends HTMLAttributes {
/** Defines the visual style of the card, influencing background, shadow, and border. */
type?: CardContextInterface['type'];
}
-type CardWithComponents = ForwardRefExoticComponent> & {
+type CardWithComponents = ForwardRefExoticComponent<
+ CardProps & RefAttributes
+> & {
Cell: typeof CardCell;
Chip: typeof CardChip;
};
@@ -22,32 +30,29 @@ type CardWithComponents = ForwardRefExoticComponent(({
- type = 'plain',
- className,
- children,
- ...restProps
-}, ref) => {
- const contextValue = useObjectMemo({
- type,
- });
+export const Card = forwardRef(
+ ({ type = 'plain', className, children, ...restProps }, ref) => {
+ const contextValue = useObjectMemo({
+ type,
+ });
- return (
-
-
- {children}
-
-
- );
-}) as CardWithComponents;
+ return (
+
+
+ {children}
+
+
+ );
+ }
+) as CardWithComponents;
Card.Cell = CardCell;
Card.Chip = CardChip;
diff --git a/src/components/Blocks/Card/components/CardCell/CardCell.module.css.d.ts b/src/components/Blocks/Card/components/CardCell/CardCell.module.css.d.ts
new file mode 100644
index 00000000..7261fae8
--- /dev/null
+++ b/src/components/Blocks/Card/components/CardCell/CardCell.module.css.d.ts
@@ -0,0 +1,8 @@
+declare const styles: {
+ readonly "header": string;
+ readonly "subtitle": string;
+ readonly "wrapper": string;
+ readonly "wrapper--ambient": string;
+};
+export = styles;
+
diff --git a/src/components/Blocks/Card/components/CardCell/CardCell.tsx b/src/components/Blocks/Card/components/CardCell/CardCell.tsx
index 4567db22..2d3d1693 100644
--- a/src/components/Blocks/Card/components/CardCell/CardCell.tsx
+++ b/src/components/Blocks/Card/components/CardCell/CardCell.tsx
@@ -4,10 +4,11 @@ import styles from './CardCell.module.css';
import { classNames } from 'helpers/classNames';
import { hasReactNode } from 'helpers/react/node';
-import { Cell, CellProps } from 'components/Blocks/Cell/Cell';
+import type { CellProps } from 'components/Blocks/Cell/Cell';
+import { Cell } from 'components/Blocks/Cell/Cell';
import { CardContext } from '../../CardContext';
-interface CardCellProps extends CellProps {}
+type CardCellProps = CellProps;
export const CardCell = ({
children,
@@ -22,12 +23,18 @@ export const CardCell = ({
className={classNames(
styles.wrapper,
cardContext.type === 'ambient' && styles['wrapper--ambient'],
- className,
+ className
)}
- subtitle={hasReactNode(subtitle) && {subtitle}}
+ subtitle={
+ hasReactNode(subtitle) && (
+ {subtitle}
+ )
+ }
{...restProps}
>
- {hasReactNode(children) && {children}}
+ {hasReactNode(children) && (
+ {children}
+ )}
);
};
diff --git a/src/components/Blocks/Card/components/CardChip/CardChip.module.css.d.ts b/src/components/Blocks/Card/components/CardChip/CardChip.module.css.d.ts
new file mode 100644
index 00000000..b8932fc9
--- /dev/null
+++ b/src/components/Blocks/Card/components/CardChip/CardChip.module.css.d.ts
@@ -0,0 +1,5 @@
+declare const styles: {
+ readonly "wrapper": string;
+};
+export = styles;
+
diff --git a/src/components/Blocks/Card/components/CardChip/CardChip.tsx b/src/components/Blocks/Card/components/CardChip/CardChip.tsx
index 20c7ed5f..6cc1fccd 100644
--- a/src/components/Blocks/Card/components/CardChip/CardChip.tsx
+++ b/src/components/Blocks/Card/components/CardChip/CardChip.tsx
@@ -2,10 +2,14 @@ import styles from './CardChip.module.css';
import { classNames } from 'helpers/classNames';
-import { Chip, ChipProps } from 'components/Form/Chip/Chip';
+import type { ChipProps } from 'components/Form/Chip/Chip';
+import { Chip } from 'components/Form/Chip/Chip';
-export interface CardChipProps extends ChipProps {}
+export type CardChipProps = ChipProps;
export const CardChip = ({ className, ...restProps }: CardChipProps) => (
- ;
@@ -35,6 +38,13 @@ export const CellWithInfo: Story = {
children: 'Noah',
subtitle: 'Yesterday',
before: +1000 ,
+ after: (
+
+ +1000
+
+ ),
},
};
diff --git a/src/components/Blocks/Cell/Cell.tsx b/src/components/Blocks/Cell/Cell.tsx
index bae363a6..a2a38bc1 100644
--- a/src/components/Blocks/Cell/Cell.tsx
+++ b/src/components/Blocks/Cell/Cell.tsx
@@ -1,15 +1,25 @@
'use client';
-import { ElementType, forwardRef, ReactElement, ReactNode } from 'react';
+import type {
+ ElementType,
+ ForwardRefExoticComponent,
+ ReactElement,
+ ReactNode,
+ RefAttributes,
+} from 'react';
+import { forwardRef } from 'react';
import styles from './Cell.module.css';
import { classNames } from 'helpers/classNames';
import { hasReactNode } from 'helpers/react/node';
import { usePlatform } from 'hooks/usePlatform';
-import { BadgeProps } from 'components/Blocks/Badge/Badge';
-import { Tappable, TappableProps } from 'components/Service/Tappable/Tappable';
+import type { BadgeProps } from 'components/Blocks/Badge/Badge';
+import type { TappableProps } from 'components/Service/Tappable/Tappable';
+import { Tappable } from 'components/Service/Tappable/Tappable';
import { Subheadline } from 'components/Typography/Subheadline/Subheadline';
+import { Info } from './components/Info/Info';
+import { Navigation } from './components/Navigation/Navigation';
import { useTypographyCellComponents } from './hooks/useTypographyCellComponents';
export interface CellProps extends Omit {
@@ -37,69 +47,97 @@ export interface CellProps extends Omit {
multiline?: boolean;
}
+type CellWithComponents = ForwardRefExoticComponent<
+ CellProps & RefAttributes
+> & {
+ Info: typeof Info;
+ Navigation: typeof Navigation;
+};
+
/**
* `Cell` component acts as a flexible and interactive container for various types of content,
* enabling the creation of complex list items, form fields, and more. It leverages the `Tappable`
* component for interaction and is designed to be flexible and extensible.
*/
-export const Cell = forwardRef(({
- children,
- titleBadge,
- hint,
- subhead,
- subtitle,
- description,
- className,
- before,
- after,
- Component,
- hovered,
- multiline,
- ...restProps
-}: CellProps, ref) => {
- const platform = usePlatform();
- const { Title, Description } = useTypographyCellComponents();
+export const Cell = forwardRef(
+ (
+ {
+ children,
+ titleBadge,
+ hint,
+ subhead,
+ subtitle,
+ description,
+ className,
+ before,
+ after,
+ Component,
+ hovered,
+ multiline,
+ ...restProps
+ },
+ ref
+ ) => {
+ const platform = usePlatform();
+ const { Title, Description } = useTypographyCellComponents();
- const hasTitle = hasReactNode(children) || hasReactNode(hint) || hasReactNode(titleBadge);
- return (
-
- {hasReactNode(before) &&
- );
-});
+ {...restProps}
+ >
+ {hasReactNode(before) &&
- {before}
-
- )}
-
- {after}
-
- )}
- {before}
}
+ {after}
}
+
- {before}
}
-
- {hasReactNode(subhead) && (
-
- {subhead}
-
- )}
- {hasTitle && (
-
- {hasReactNode(children) && <span className={styles.title}>{children}</span>}
- {hasReactNode(hint) && <span className={styles.hint}>{hint}</span>}
- {hasReactNode(titleBadge) && titleBadge}
-
- )}
- {hasReactNode(subtitle) && (
-
- {subtitle}
-
+ const hasTitle =
+ hasReactNode(children) || hasReactNode(hint) || hasReactNode(titleBadge);
+ return (
+
- {description}
-
- )}
-
- {hasReactNode(after) && {after}
}
- {before}
}
+
+ {hasReactNode(subhead) && (
+
+ {subhead}
+
+ )}
+ {hasTitle && (
+
+ {hasReactNode(children) && (
+ <span className={styles.title}>{children}</span>
+ )}
+ {hasReactNode(hint) && (
+ <span className={styles.hint}>{hint}</span>
+ )}
+ {hasReactNode(titleBadge) && titleBadge}
+
+ )}
+ {hasReactNode(subtitle) && (
+
+ {subtitle}
+
+ )}
+ {hasReactNode(description) && (
+
+ {description}
+
+ )}
+
+ {hasReactNode(after) && {after}
}
+
+ );
+ }
+) as CellWithComponents;
+
+Cell.Info = Info;
+Cell.Navigation = Navigation;
diff --git a/src/components/Blocks/Cell/components/ButtonCell/ButtonCell.module.css.d.ts b/src/components/Blocks/Cell/components/ButtonCell/ButtonCell.module.css.d.ts
new file mode 100644
index 00000000..6d3a3037
--- /dev/null
+++ b/src/components/Blocks/Cell/components/ButtonCell/ButtonCell.module.css.d.ts
@@ -0,0 +1,7 @@
+declare const styles: {
+ readonly "wrapper": string;
+ readonly "wrapper--destructive": string;
+ readonly "wrapper--ios": string;
+};
+export = styles;
+
diff --git a/src/components/Blocks/Cell/components/ButtonCell/ButtonCell.stories.tsx b/src/components/Blocks/Cell/components/ButtonCell/ButtonCell.stories.tsx
index f93a1d36..dd656529 100644
--- a/src/components/Blocks/Cell/components/ButtonCell/ButtonCell.stories.tsx
+++ b/src/components/Blocks/Cell/components/ButtonCell/ButtonCell.stories.tsx
@@ -26,9 +26,16 @@ export const Playground: Story = {
children: 'Create Ad',
},
render: (props) => (
- -
+
{isAvatarStack && hasReactNode(avatarStack) && avatarStack}
{hasReactNode(children) && {children} }
{isText && hasReactNode(subtitle) && (
-
+
{subtitle}
)}
diff --git a/src/components/Blocks/Cell/components/Navigation/Navigation.module.css b/src/components/Blocks/Cell/components/Navigation/Navigation.module.css
index 4c5252f6..f6d8d1ef 100644
--- a/src/components/Blocks/Cell/components/Navigation/Navigation.module.css
+++ b/src/components/Blocks/Cell/components/Navigation/Navigation.module.css
@@ -11,6 +11,10 @@
overflow-wrap: anywhere;
}
+.text--base {
+ color: var(--tgui--link_color);
+}
+
.icon {
flex-shrink: 0;
}
diff --git a/src/components/Blocks/Cell/components/Navigation/Navigation.module.css.d.ts b/src/components/Blocks/Cell/components/Navigation/Navigation.module.css.d.ts
new file mode 100644
index 00000000..eccdf812
--- /dev/null
+++ b/src/components/Blocks/Cell/components/Navigation/Navigation.module.css.d.ts
@@ -0,0 +1,8 @@
+declare const styles: {
+ readonly "icon": string;
+ readonly "text": string;
+ readonly "text--base": string;
+ readonly "wrapper": string;
+};
+export = styles;
+
diff --git a/src/components/Blocks/Cell/components/Navigation/Navigation.tsx b/src/components/Blocks/Cell/components/Navigation/Navigation.tsx
index 4070e61b..525dba79 100644
--- a/src/components/Blocks/Cell/components/Navigation/Navigation.tsx
+++ b/src/components/Blocks/Cell/components/Navigation/Navigation.tsx
@@ -1,6 +1,6 @@
'use client';
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
import styles from './Navigation.module.css';
import { classNames } from 'helpers/classNames';
@@ -23,8 +23,17 @@ export const Navigation = ({ className, children }: NavigationProps) => {
return (
;
+
+export default meta;
+type Story = StoryObj;
+
+export const Playground: Story = {
+ args: {
+ children: 'Language',
+ color: 'mediumpurple',
+ icon: {icon}}
+ after={{after} }
+ className={classNames(styles.wrapper, className)}
+ {...props}
+ />
+ );
+}
diff --git a/src/components/Blocks/Cell/hooks/useTypographyCellComponents.tsx b/src/components/Blocks/Cell/hooks/useTypographyCellComponents.tsx
index ccdffb64..117d5b5a 100644
--- a/src/components/Blocks/Cell/hooks/useTypographyCellComponents.tsx
+++ b/src/components/Blocks/Cell/hooks/useTypographyCellComponents.tsx
@@ -7,27 +7,43 @@ import { usePlatform } from 'hooks/usePlatform';
import { Caption } from 'components/Typography/Caption/Caption';
import { Subheadline } from 'components/Typography/Subheadline/Subheadline';
import { Text } from 'components/Typography/Text/Text';
-import { TypographyProps } from 'components/Typography/Typography';
+import type { TypographyProps } from 'components/Typography/Typography';
export const useTypographyCellComponents = () => {
const platform = usePlatform();
const isIOS = platform === 'ios';
- const Title = useCallback((props: TypographyProps) => {
- if (isIOS) {
- return
+
{args.size === 's' && {
+export interface IconButtonProps
+ extends ButtonHTMLAttributes {
/** Specifies the button size, affecting icon scaling. Recommended icon sizes are 20px for 's', 24px for 'm', and 28px for 'l'. */
size?: 's' | 'm' | 'l';
/** Defines the button's visual style, affecting its color and background. */
@@ -19,34 +21,27 @@ const modeStyles = {
outline: styles['wrapper--outline'],
};
-const sizeStyles = {
- s: styles['wrapper--s'],
- m: styles['wrapper--m'],
- l: styles['wrapper--l'],
-};
-
/**
* Renders an icon button with customizable size and mode. It utilizes the `Tappable` component for enhanced
* touch interaction, allowing it to serve various UI actions efficiently.
*/
-export const IconButton = forwardRef(({
- size = 'm',
- mode = 'bezeled',
- className,
- children,
- ...restProps
-}, ref) => (
-
- {children}
-
-));
+export const IconButton = forwardRef(
+ (
+ { size = 'm', mode = 'bezeled', className, children, ...restProps },
+ ref
+ ) => (
+
+ {children}
+
+ )
+);
diff --git a/src/components/Blocks/IconContainer/IconContainer.module.css b/src/components/Blocks/IconContainer/IconContainer.module.css
index b068acec..f7c61684 100644
--- a/src/components/Blocks/IconContainer/IconContainer.module.css
+++ b/src/components/Blocks/IconContainer/IconContainer.module.css
@@ -1,4 +1,26 @@
.wrapper {
+ max-width: 30px;
+ width: 30px;
+ height: 30px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
color: var(--tgui--link_color);
}
+.wrapper--ios {
+ aspect-ratio: 1;
+ border-radius: 7.5px;
+ box-sizing: border-box;
+ padding: 4px;
+}
+
+.wrapper--base {
+ color: var(--tgui--hint_color);
+}
+
+.wrapper--ios svg,
+.wrapper--base svg {
+ width: 100%;
+ height: 100%;
+}
diff --git a/src/components/Blocks/IconContainer/IconContainer.module.css.d.ts b/src/components/Blocks/IconContainer/IconContainer.module.css.d.ts
new file mode 100644
index 00000000..8cd58869
--- /dev/null
+++ b/src/components/Blocks/IconContainer/IconContainer.module.css.d.ts
@@ -0,0 +1,7 @@
+declare const styles: {
+ readonly "wrapper": string;
+ readonly "wrapper--base": string;
+ readonly "wrapper--ios": string;
+};
+export = styles;
+
diff --git a/src/components/Blocks/IconContainer/IconContainer.stories.tsx b/src/components/Blocks/IconContainer/IconContainer.stories.tsx
new file mode 100644
index 00000000..7da49a4b
--- /dev/null
+++ b/src/components/Blocks/IconContainer/IconContainer.stories.tsx
@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Icon28Chat } from 'icons/28/chat';
+import { Icon28Devices } from 'icons/28/devices';
+import { Icon28Stats } from 'icons/28/stats';
+
+import { Cell, List, Section } from 'components';
+import { IconContainer } from './IconContainer';
+
+const meta = {
+ title: 'Blocks/IconContainer',
+ component: IconContainer,
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+const cells = [
+ {
+ id: 1,
+ color: 'orange',
+ icon: {
+ /** Background color for the icon container. */
+ color?: string;
+}
+
+const platformStyle = {
+ ios: styles['wrapper--ios'],
+ base: styles['wrapper--base'],
+};
-export interface IconContainerProps extends HTMLAttributes {}
+export const IconContainer = ({
+ className,
+ children,
+ color,
+ ...restProps
+}: IconContainerProps) => {
+ const platform = usePlatform();
-export const IconContainer = ({ className, children, ...restProps }: IconContainerProps) => (
- ) => {
if (loaded) {
@@ -75,7 +77,7 @@ export const Image = ({
className={classNames(
styles.wrapper,
loaded && styles['wrapper--loaded'],
- className,
+ className
)}
{...restProps}
>
@@ -95,7 +97,9 @@ export const Image = ({
onError={handleImageError}
/>
)}
- {needShowFallbackIcon && |
);
diff --git a/src/components/Blocks/Image/components/ImageBadge/ImageBadge.module.css.d.ts b/src/components/Blocks/Image/components/ImageBadge/ImageBadge.module.css.d.ts
new file mode 100644
index 00000000..b8932fc9
--- /dev/null
+++ b/src/components/Blocks/Image/components/ImageBadge/ImageBadge.module.css.d.ts
@@ -0,0 +1,5 @@
+declare const styles: {
+ readonly "wrapper": string;
+};
+export = styles;
+
diff --git a/src/components/Blocks/Image/components/ImageBadge/ImageBadge.tsx b/src/components/Blocks/Image/components/ImageBadge/ImageBadge.tsx
index c1afba3c..6d69e46b 100644
--- a/src/components/Blocks/Image/components/ImageBadge/ImageBadge.tsx
+++ b/src/components/Blocks/Image/components/ImageBadge/ImageBadge.tsx
@@ -2,11 +2,16 @@ import styles from './ImageBadge.module.css';
import { classNames } from 'helpers/classNames';
-import { Badge, BadgeProps } from 'components/Blocks/Badge/Badge';
+import type { BadgeProps } from 'components/Blocks/Badge/Badge';
+import { Badge } from 'components/Blocks/Badge/Badge';
-export interface ImageBadgeProps extends BadgeProps {}
+export type ImageBadgeProps = BadgeProps;
-export const ImageBadge = ({ type, className, ...restProps }: ImageBadgeProps) => {
+export const ImageBadge = ({
+ type,
+ className,
+ ...restProps
+}: ImageBadgeProps) => {
if (type !== 'number') {
console.error('[ImageBadge]: Component supports only type="number"');
return null;
diff --git a/src/components/Blocks/InlineButtons/InlineButtons.module.css.d.ts b/src/components/Blocks/InlineButtons/InlineButtons.module.css.d.ts
new file mode 100644
index 00000000..f7e60e80
--- /dev/null
+++ b/src/components/Blocks/InlineButtons/InlineButtons.module.css.d.ts
@@ -0,0 +1,6 @@
+declare const styles: {
+ readonly "wrapper": string;
+ readonly "wrapper--ios": string;
+};
+export = styles;
+
diff --git a/src/components/Blocks/InlineButtons/InlineButtons.stories.tsx b/src/components/Blocks/InlineButtons/InlineButtons.stories.tsx
index b0e484c3..71b2716c 100644
--- a/src/components/Blocks/InlineButtons/InlineButtons.stories.tsx
+++ b/src/components/Blocks/InlineButtons/InlineButtons.stories.tsx
@@ -22,13 +22,22 @@ export const Playground: Story = {
args: {
mode: 'plain',
children: [
-
- {hasChildren && {children} }
- {(!hasChildren || platform === 'ios') &&
+ {children}
+
+ )}
+ {platform === 'ios' &&
);
};
diff --git a/src/components/Blocks/Cell/components/NavigationCell/NavigationCell.module.css b/src/components/Blocks/Cell/components/NavigationCell/NavigationCell.module.css
new file mode 100644
index 00000000..bdba987b
--- /dev/null
+++ b/src/components/Blocks/Cell/components/NavigationCell/NavigationCell.module.css
@@ -0,0 +1,8 @@
+.wrapper {
+ width: 100%;
+ height: 48px;
+ padding: 10px 24px;
+ box-sizing: border-box;
+ border: none;
+ background: transparent;
+}
diff --git a/src/components/Blocks/Cell/components/NavigationCell/NavigationCell.module.css.d.ts b/src/components/Blocks/Cell/components/NavigationCell/NavigationCell.module.css.d.ts
new file mode 100644
index 00000000..b8932fc9
--- /dev/null
+++ b/src/components/Blocks/Cell/components/NavigationCell/NavigationCell.module.css.d.ts
@@ -0,0 +1,5 @@
+declare const styles: {
+ readonly "wrapper": string;
+};
+export = styles;
+
diff --git a/src/components/Blocks/Cell/components/NavigationCell/NavigationCell.stories.tsx b/src/components/Blocks/Cell/components/NavigationCell/NavigationCell.stories.tsx
new file mode 100644
index 00000000..7bec4036
--- /dev/null
+++ b/src/components/Blocks/Cell/components/NavigationCell/NavigationCell.stories.tsx
@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Icon28Stats } from 'icons/28/stats';
+import { hideControls, setControlsTypes } from 'storybook/controls';
+
+import { NavigationCell } from './NavigationCell';
+
+const meta = {
+ title: 'Blocks/Cell/NavigationCell',
+ component: NavigationCell,
+ argTypes: {
+ ...hideControls('before', 'after', 'titleBadge', 'icon'),
+ ...setControlsTypes(
+ ['Component', 'subhead', 'subtitle', 'children', 'hint', 'description'],
+ 'text'
+ ),
+ },
+} satisfies Meta-
+
- {children}
-
-);
+ return (
+
+ {children}
+
+ );
+};
diff --git a/src/components/Blocks/Image/Image.module.css.d.ts b/src/components/Blocks/Image/Image.module.css.d.ts
new file mode 100644
index 00000000..8fa95f8c
--- /dev/null
+++ b/src/components/Blocks/Image/Image.module.css.d.ts
@@ -0,0 +1,8 @@
+declare const styles: {
+ readonly "fallback": string;
+ readonly "image": string;
+ readonly "wrapper": string;
+ readonly "wrapper--loaded": string;
+};
+export = styles;
+
diff --git a/src/components/Blocks/Image/Image.tsx b/src/components/Blocks/Image/Image.tsx
index 1d5343bb..4b202f1d 100644
--- a/src/components/Blocks/Image/Image.tsx
+++ b/src/components/Blocks/Image/Image.tsx
@@ -1,6 +1,7 @@
'use client';
-import { ImgHTMLAttributes, isValidElement, ReactNode, SyntheticEvent, useState } from 'react';
+import type { ImgHTMLAttributes, ReactNode, SyntheticEvent } from 'react';
+import { isValidElement, useState } from 'react';
import styles from './Image.module.css';
import { classNames } from 'helpers/classNames';
@@ -45,7 +46,8 @@ export const Image = ({
const [failed, setFailed] = useState(false);
const hasSrc = src || srcSet;
- const needShowFallbackIcon = (failed || !hasSrc) && isValidElement(fallbackIcon);
+ const needShowFallbackIcon =
+ (failed || !hasSrc) && isValidElement(fallbackIcon);
const handleImageLoad = (event: SyntheticEvent{fallbackIcon}
}
+ {needShowFallbackIcon && (
+ {fallbackIcon}
+ )}
{children}
-
- {children}
-
-
- );
-}) as InlineButtonsWithComponents;
+export const InlineButtons = forwardRef
+
+ {children}
+
+
+ );
+ }
+) as InlineButtonsWithComponents;
InlineButtons.Item = InlineButtonsItem;
diff --git a/src/components/Blocks/InlineButtons/InlineButtonsContext.ts b/src/components/Blocks/InlineButtons/InlineButtonsContext.ts
index 59addd88..1edb1da4 100644
--- a/src/components/Blocks/InlineButtons/InlineButtonsContext.ts
+++ b/src/components/Blocks/InlineButtons/InlineButtonsContext.ts
@@ -4,4 +4,6 @@ export interface InlineButtonsContextProps {
mode?: 'plain' | 'bezeled' | 'gray';
}
-export const InlineButtonsContext = createContext
),
@@ -44,7 +44,10 @@ export const WithAction: Story = {
args: {
...Playground.args,
action: (
-
- {header}
+
+ {header}
+
;
export const Playground: Story = {
render: (args) => (
<>
-
-
-
+
+
+
), decorators: [ (StoryComponent) => ( -
-
-
+
+
+
), decorators: [ (StoryComponent) => ( -
+
{
+export interface CircularProgressProps
+ extends HTMLAttributes {
/** Specifies the size of the circular progress indicator. Can be 'small', 'medium', or 'large'. */
size?: 'small' | 'medium' | 'large';
/** Current progress of the circular indicator, expressed as a percentage from 0 to 100. */
diff --git a/src/components/Feedback/CircularProgress/helpers/getCircleAttributes.ts b/src/components/Feedback/CircularProgress/helpers/getCircleAttributes.ts
index 3100eecf..483700d4 100644
--- a/src/components/Feedback/CircularProgress/helpers/getCircleAttributes.ts
+++ b/src/components/Feedback/CircularProgress/helpers/getCircleAttributes.ts
@@ -1,27 +1,31 @@
export const getCircleAttributes = (size: 'small' | 'medium' | 'large') => {
switch (size) {
- case 'large':
+ case 'large': {
return {
size: 56,
strokeWidth: 4,
radius: 18,
};
+ }
- case 'medium':
+ case 'medium': {
return {
size: 36,
strokeWidth: 3,
radius: 14,
};
+ }
- case 'small':
+ case 'small': {
return {
size: 28,
strokeWidth: 3,
radius: 10,
};
+ }
- default:
- return undefined;
+ default: {
+ return;
+ }
}
};
diff --git a/src/components/Feedback/Progress/Progress.module.css.d.ts b/src/components/Feedback/Progress/Progress.module.css.d.ts
new file mode 100644
index 00000000..3ba8dcf1
--- /dev/null
+++ b/src/components/Feedback/Progress/Progress.module.css.d.ts
@@ -0,0 +1,7 @@
+declare const styles: {
+ readonly "progress": string;
+ readonly "wrapper": string;
+ readonly "wrapper--base": string;
+};
+export = styles;
+
diff --git a/src/components/Feedback/Progress/Progress.stories.tsx b/src/components/Feedback/Progress/Progress.stories.tsx
index 7235ebf2..468512d7 100644
--- a/src/components/Feedback/Progress/Progress.stories.tsx
+++ b/src/components/Feedback/Progress/Progress.stories.tsx
@@ -12,17 +12,38 @@ type Story = StoryObj;
export const Playground: Story = {
render: (args) => (
- ;
export const Playground: Story = {
render: (args) => (
-
-
-
-
-
- +
);
};
diff --git a/src/components/Feedback/Skeleton/Skeleton.module.css.d.ts b/src/components/Feedback/Skeleton/Skeleton.module.css.d.ts
new file mode 100644
index 00000000..6c7206dc
--- /dev/null
+++ b/src/components/Feedback/Skeleton/Skeleton.module.css.d.ts
@@ -0,0 +1,8 @@
+declare const styles: {
+ readonly "fade": string;
+ readonly "wrapper": string;
+ readonly "wrapper--noAnimation": string;
+ readonly "wrapper--visible": string;
+};
+export = styles;
+
diff --git a/src/components/Feedback/Skeleton/Skeleton.stories.tsx b/src/components/Feedback/Skeleton/Skeleton.stories.tsx
index c5169a4b..eaa0ed3f 100644
--- a/src/components/Feedback/Skeleton/Skeleton.stories.tsx
+++ b/src/components/Feedback/Skeleton/Skeleton.stories.tsx
@@ -13,12 +13,14 @@ type Story = StoryObj-
-
-
- +
+
+
+ +
+ +
+ +
+
),
} satisfies Story;
diff --git a/src/components/Feedback/Progress/Progress.tsx b/src/components/Feedback/Progress/Progress.tsx
index 81277834..b5e7c7ce 100644
--- a/src/components/Feedback/Progress/Progress.tsx
+++ b/src/components/Feedback/Progress/Progress.tsx
@@ -1,6 +1,6 @@
'use client';
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
import styles from './Progress.module.css';
import { classNames } from 'helpers/classNames';
@@ -19,7 +19,11 @@ const PROGRESS_MAX_VALUE = 100;
* Renders a linear progress bar that visually represents completion percentage towards a goal.
* The component respects accessibility standards by including appropriate ARIA attributes.
*/
-export const Progress = ({ value = 0, className, ...restProps }: ProgressProps) => {
+export const Progress = ({
+ value = 0,
+ className,
+ ...restProps
+}: ProgressProps) => {
const platform = usePlatform();
const progress = clamp(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);
@@ -35,11 +39,15 @@ export const Progress = ({ value = 0, className, ...restProps }: ProgressProps)
className={classNames(
styles.wrapper,
platform === 'base' && styles['wrapper--base'],
- className,
+ className
)}
{...restProps}
>
-
+
+ +
+ +
+ +
+
+
| Hello!!!! |
diff --git a/src/components/Feedback/Skeleton/Skeleton.tsx b/src/components/Feedback/Skeleton/Skeleton.tsx
index 24077e76..3ce52d99 100644
--- a/src/components/Feedback/Skeleton/Skeleton.tsx
+++ b/src/components/Feedback/Skeleton/Skeleton.tsx
@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
import styles from './Skeleton.module.css';
import { classNames } from 'helpers/classNames';
@@ -26,7 +26,7 @@ export const Skeleton = ({
styles.wrapper,
visible && styles['wrapper--visible'],
withoutAnimation && styles['wrapper--noAnimation'],
- className,
+ className
)}
{...restProps}
>
diff --git a/src/components/Feedback/Snackbar/Snackbar.module.css.d.ts b/src/components/Feedback/Snackbar/Snackbar.module.css.d.ts
new file mode 100644
index 00000000..3b08c7de
--- /dev/null
+++ b/src/components/Feedback/Snackbar/Snackbar.module.css.d.ts
@@ -0,0 +1,12 @@
+declare const styles: {
+ readonly "after": string;
+ readonly "before": string;
+ readonly "body": string;
+ readonly "middle": string;
+ readonly "verticalIntro": string;
+ readonly "wrapper": string;
+ readonly "wrapper--closing": string;
+ readonly "wrapper--ios": string;
+};
+export = styles;
+
diff --git a/src/components/Feedback/Snackbar/Snackbar.stories.tsx b/src/components/Feedback/Snackbar/Snackbar.stories.tsx
index 6473aad3..19bc0622 100644
--- a/src/components/Feedback/Snackbar/Snackbar.stories.tsx
+++ b/src/components/Feedback/Snackbar/Snackbar.stories.tsx
@@ -32,15 +32,20 @@ export const Playground: Story = {
return (
<>
-
+
{isDeleteSnackbarShown && (
setIsUndoSnackbarShown(true)}>
- Undo
+ Undo
- )}
+ }
onClose={() => setIsDeleteSnackbarShown(false)}
/>
)}
@@ -48,7 +53,14 @@ export const Playground: Story = {
Open}
+ link={
+
+ Open
+
+ }
onClose={() => setIsUndoSnackbarShown(false)}
>
Message restored
diff --git a/src/components/Feedback/Snackbar/Snackbar.tsx b/src/components/Feedback/Snackbar/Snackbar.tsx
index 4b5b95e1..a98540de 100644
--- a/src/components/Feedback/Snackbar/Snackbar.tsx
+++ b/src/components/Feedback/Snackbar/Snackbar.tsx
@@ -1,6 +1,7 @@
'use client';
-import { HTMLAttributes, ReactElement, ReactNode, useEffect, useState } from 'react';
+import type { HTMLAttributes, ReactElement, ReactNode } from 'react';
+import { useEffect, useState } from 'react';
import styles from './Snackbar.module.css';
import { classNames } from 'helpers/classNames';
@@ -8,7 +9,7 @@ import { hasReactNode } from 'helpers/react/node';
import { usePlatform } from 'hooks/usePlatform';
import { useTimeout } from 'hooks/useTimeout';
-import { LinkProps } from 'components/Navigation/Link/Link';
+import type { LinkProps } from 'components/Navigation/Link/Link';
import { RootRenderer } from 'components/Service/RootRenderer/RootRenderer';
import { Caption } from 'components/Typography/Caption/Caption';
import { SnackbarButton } from './components/SnackbarButton/SnackbarButton';
@@ -65,26 +66,20 @@ export const Snackbar = ({
styles.wrapper,
platform === 'ios' && styles['wrapper--ios'],
closing && styles['wrapper--closing'],
- className,
+ className
)}
{...restProps}
>
diff --git a/src/components/Feedback/Snackbar/components/SnackbarButton/SnackbarButton.module.css.d.ts b/src/components/Feedback/Snackbar/components/SnackbarButton/SnackbarButton.module.css.d.ts
new file mode 100644
index 00000000..b8932fc9
--- /dev/null
+++ b/src/components/Feedback/Snackbar/components/SnackbarButton/SnackbarButton.module.css.d.ts
@@ -0,0 +1,5 @@
+declare const styles: {
+ readonly "wrapper": string;
+};
+export = styles;
+
diff --git a/src/components/Feedback/Snackbar/components/SnackbarButton/SnackbarButton.tsx b/src/components/Feedback/Snackbar/components/SnackbarButton/SnackbarButton.tsx
index 54c362d7..95d57dc2 100644
--- a/src/components/Feedback/Snackbar/components/SnackbarButton/SnackbarButton.tsx
+++ b/src/components/Feedback/Snackbar/components/SnackbarButton/SnackbarButton.tsx
@@ -1,13 +1,17 @@
-import { ButtonHTMLAttributes } from 'react';
+import type { ButtonHTMLAttributes } from 'react';
import styles from './SnackbarButton.module.css';
import { classNames } from 'helpers/classNames';
import { Tappable } from 'components/Service/Tappable/Tappable';
-export interface SnackbarButtonProps extends ButtonHTMLAttributes {}
+export type SnackbarButtonProps = ButtonHTMLAttributes;
-export const SnackbarButton = ({ className, children, ...restProps }: SnackbarButtonProps) => (
+export const SnackbarButton = ({
+ className,
+ children,
+ ...restProps
+}: SnackbarButtonProps) => (
= {
render: (args) => (
-
{hasReactNode(before) && (
-
- {before}
-
+ {before}
)}
{hasReactNode(children) && {children} }
{hasReactNode(description) && {description} }
{hasReactNode(link) && {link} }
- {hasReactNode(after) && (
-
- {after}
-
- )}
+ {hasReactNode(after) && {after}
}
-
-
-
+ {
size: 's' | 'm' | 'l';
}
-const sizeStyles = {
- s: styles['wrapper--s'],
- m: styles['wrapper--m'],
- l: styles['wrapper--l'],
-};
-
/**
* Provides a visual indicator for loading states across different platforms. It automatically selects
* an appropriate spinner style based on the current platform, allowing for a consistent user experience.
*/
-export const Spinner = ({
- size = 'm',
- className,
-}: SpinnerProps) => {
+export const Spinner = ({ size = 'm', className }: SpinnerProps) => {
const platform = usePlatform();
const Component = platform === 'ios' ? IOSSpinner : BaseSpinner;
@@ -37,8 +28,7 @@ export const Spinner = ({
className={classNames(
styles.wrapper,
platform === 'ios' && styles['wrapper--ios'],
- sizeStyles[size],
- className,
+ className
)}
>
+ );
+ }
+);
diff --git a/src/components/Form/FormInput/components/FormInputTitle.tsx b/src/components/Form/FormInput/components/FormInputTitle.tsx
index 19c839d1..53c27f6f 100644
--- a/src/components/Form/FormInput/components/FormInputTitle.tsx
+++ b/src/components/Form/FormInput/components/FormInputTitle.tsx
@@ -4,14 +4,25 @@ import { usePlatform } from 'hooks/usePlatform';
import { Caption } from 'components/Typography/Caption/Caption';
import { Subheadline } from 'components/Typography/Subheadline/Subheadline';
-import { TypographyProps } from 'components/Typography/Typography';
+import type { TypographyProps } from 'components/Typography/Typography';
export const FormInputTitle = ({ ...restProps }: TypographyProps) => {
const platform = usePlatform();
if (platform === 'ios') {
- return -
-
+
+
+
+
),
};
diff --git a/src/components/Feedback/Spinner/Spinner.tsx b/src/components/Feedback/Spinner/Spinner.tsx
index f144cb1b..299659c0 100644
--- a/src/components/Feedback/Spinner/Spinner.tsx
+++ b/src/components/Feedback/Spinner/Spinner.tsx
@@ -1,6 +1,6 @@
'use client';
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
import styles from './Spinner.module.css';
import { classNames } from 'helpers/classNames';
@@ -14,20 +14,11 @@ export interface SpinnerProps extends HTMLAttributes+
+
-
+
-
setValue(e.target.value)}
- after={(
+ after={
-
+
- {chipsValue.map((option, index) => (
-
- {renderChip(
- {
+ };
+
+ const handleChipRemove = (
+ event: MouseEvent,
+ optionToRemove: MultiselectOption
+ ) => {
+ event.preventDefault();
+ event.stopPropagation();
+ onRemoveChipOption(optionToRemove);
+ };
+
+ const handleClick = () => {
+ const isFocused = document.activeElement === inputRef.current;
+ if (!isFocused && inputRef.current) {
+ inputRef.current.focus();
+ }
+ };
+
+ return (
+ // eslint-disable-next-line jsx-a11y/interactive-supports-focus
+
+ ))}
+
+ );
+ }
+);
diff --git a/src/components/Form/Multiselect/components/MultiselectBase/constants.tsx b/src/components/Form/Multiselect/components/MultiselectBase/constants.tsx
index b2d3bdd5..1207378c 100644
--- a/src/components/Form/Multiselect/components/MultiselectBase/constants.tsx
+++ b/src/components/Form/Multiselect/components/MultiselectBase/constants.tsx
@@ -1,6 +1,12 @@
-import { Chip, ChipProps } from 'components/Form/Chip/Chip';
+import type { ChipProps } from 'components/Form/Chip/Chip';
+import { Chip } from 'components/Form/Chip/Chip';
export const renderChipDefault = (props: ChipProps) => {
const { ...rest } = props;
- return
+ {chipsValue.map((option, index) => (
+ // eslint-disable-next-line @typescript-eslint/no-base-to-string, @typescript-eslint/restrict-template-expressions
+
+ {renderChip({
children: option.label,
className: styles.chip,
value: option.value,
@@ -188,25 +213,25 @@ export const MultiselectBase = forwardRef(
'aria-selected': true,
'aria-posinset': index + 1,
'aria-setsize': valueLength,
- },
- )}
-
- ))}
-
- );
-});
+ })}
+