diff --git a/src/app/components/account/account-list-item.layout.tsx b/src/app/components/account/account-list-item.layout.tsx
index c337501e059..0b0f014af0e 100644
--- a/src/app/components/account/account-list-item.layout.tsx
+++ b/src/app/components/account/account-list-item.layout.tsx
@@ -2,9 +2,9 @@ import { ReactNode } from 'react';
import { SettingsSelectors } from '@tests/selectors/settings.selectors';
-import { ItemInteractive } from '@app/ui/components/item/item-interactive';
-import { ItemLayout } from '@app/ui/components/item/item.layout';
+import { ItemLayout } from '@app/ui/components/item-layout/item-layout';
import { Spinner } from '@app/ui/components/spinner';
+import { Pressable } from '@app/ui/pressable/pressable';
interface AccountListItemLayoutProps {
accountAddresses: ReactNode;
@@ -29,7 +29,7 @@ export function AccountListItemLayout(props: AccountListItemLayoutProps) {
} = props;
return (
-
-
+
);
}
diff --git a/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx b/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx
index fc140fd769d..597bdd7ac26 100644
--- a/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx
+++ b/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx
@@ -5,9 +5,9 @@ import { createMoney } from '@shared/models/money.model';
import { formatBalance } from '@app/common/format-balance';
import { Brc20Token } from '@app/query/bitcoin/bitcoin-client';
import { Brc20AvatarIcon } from '@app/ui/components/avatar/brc20-avatar-icon';
-import { ItemInteractive } from '@app/ui/components/item/item-interactive';
-import { ItemLayout } from '@app/ui/components/item/item.layout';
+import { ItemLayout } from '@app/ui/components/item-layout/item-layout';
import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
+import { Pressable } from '@app/ui/pressable/pressable';
interface Brc20TokenAssetItemLayoutProps {
token: Brc20Token;
@@ -29,7 +29,7 @@ export function Brc20TokenAssetItemLayout({
label="Not enough BTC in balance"
side="top"
>
-
+
}
titleLeft={token.ticker}
@@ -46,7 +46,7 @@ export function Brc20TokenAssetItemLayout({
}
/>
-
+
);
}
diff --git a/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx b/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx
index 6d8f0e40e8a..87f19679360 100644
--- a/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx
+++ b/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx
@@ -5,10 +5,10 @@ import { Flex, styled } from 'leather-styles/jsx';
import { AllCryptoCurrencyAssetBalances } from '@shared/models/crypto-asset-balance.model';
import { BulletSeparator } from '@app/ui/components/bullet-separator/bullet-separator';
-import { ItemInteractive } from '@app/ui/components/item/item-interactive';
-import { ItemLayout } from '@app/ui/components/item/item.layout';
+import { ItemLayout } from '@app/ui/components/item-layout/item-layout';
import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
import { Caption } from '@app/ui/components/typography/caption';
+import { Pressable } from '@app/ui/pressable/pressable';
import { parseCryptoCurrencyAssetBalance } from './crypto-currency-asset.utils';
@@ -36,7 +36,7 @@ export function CryptoCurrencyAssetItemLayout({
parseCryptoCurrencyAssetBalance(assetBalance);
return (
-
+
-
+
);
}
diff --git a/src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx b/src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx
index 50ab3468b3b..d3034ebd737 100644
--- a/src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx
+++ b/src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx
@@ -3,9 +3,9 @@ import { styled } from 'leather-styles/jsx';
import { StacksFungibleTokenAssetBalance } from '@shared/models/crypto-asset-balance.model';
import { StacksAssetAvatar } from '@app/components/crypto-assets/stacks/components/stacks-asset-avatar';
-import { ItemInteractive } from '@app/ui/components/item/item-interactive';
-import { ItemLayout } from '@app/ui/components/item/item.layout';
+import { ItemLayout } from '@app/ui/components/item-layout/item-layout';
import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
+import { Pressable } from '@app/ui/pressable/pressable';
import { parseStacksFungibleTokenAssetBalance } from './fungible-token-asset.utils';
@@ -21,7 +21,7 @@ export function StacksFungibleTokenAssetItemLayout({
parseStacksFungibleTokenAssetBalance(assetBalance);
return (
-
+
}
/>
-
+
);
}
diff --git a/src/app/components/transaction-item/transaction-item.layout.tsx b/src/app/components/transaction-item/transaction-item.layout.tsx
index 38514a301cf..fbd50bd1d51 100644
--- a/src/app/components/transaction-item/transaction-item.layout.tsx
+++ b/src/app/components/transaction-item/transaction-item.layout.tsx
@@ -2,9 +2,9 @@ import { ReactNode } from 'react';
import { HStack, styled } from 'leather-styles/jsx';
-import { ItemInteractive } from '@app/ui/components/item/item-interactive';
-import { ItemLayout } from '@app/ui/components/item/item.layout';
+import { ItemLayout } from '@app/ui/components/item-layout/item-layout';
import { Caption } from '@app/ui/components/typography/caption';
+import { Pressable } from '@app/ui/pressable/pressable';
interface TransactionItemLayoutProps {
openTxLink(): void;
@@ -26,7 +26,7 @@ export function TransactionItemLayout({
txValue,
}: TransactionItemLayoutProps) {
return (
-
+
-
+
);
}
diff --git a/src/app/pages/receive/components/receive-item.tsx b/src/app/pages/receive/components/receive-item.tsx
index 8985584ba17..2b9060b5c22 100644
--- a/src/app/pages/receive/components/receive-item.tsx
+++ b/src/app/pages/receive/components/receive-item.tsx
@@ -1,8 +1,8 @@
import { Button } from '@app/ui/components/button/button';
-import { ItemInteractive } from '@app/ui/components/item/item-interactive';
-import { ItemWithButtonsLayout } from '@app/ui/components/item/item-with-buttons.layout';
+import { ItemLayoutWithButtons } from '@app/ui/components/item-layout/item-layout-with-buttons';
import { CopyIcon } from '@app/ui/icons/copy-icon';
import { QrCodeIcon } from '@app/ui/icons/qr-code-icon';
+import { Pressable } from '@app/ui/pressable/pressable';
import { truncateMiddle } from '@app/ui/utils/truncate-middle';
interface ReceiveItemProps {
@@ -23,8 +23,8 @@ export function ReceiveItem({
}: ReceiveItemProps) {
if (!address) return null;
return (
-
-
+
}
/>
-
+
);
}
diff --git a/src/app/pages/swap/swap-choose-asset/components/swap-asset-item.tsx b/src/app/pages/swap/swap-choose-asset/components/swap-asset-item.tsx
index 4e4a5429d0d..ff3dedfd37d 100644
--- a/src/app/pages/swap/swap-choose-asset/components/swap-asset-item.tsx
+++ b/src/app/pages/swap/swap-choose-asset/components/swap-asset-item.tsx
@@ -4,8 +4,8 @@ import { formatMoneyWithoutSymbol } from '@app/common/money/format-money';
import { useGetFungibleTokenMetadataQuery } from '@app/query/stacks/tokens/fungible-tokens/fungible-token-metadata.query';
import { isFtAsset } from '@app/query/stacks/tokens/token-metadata.utils';
import { Avatar, defaultFallbackDelay, getAvatarFallback } from '@app/ui/components/avatar/avatar';
-import { ItemInteractive } from '@app/ui/components/item/item-interactive';
-import { ItemLayout } from '@app/ui/components/item/item.layout';
+import { ItemLayout } from '@app/ui/components/item-layout/item-layout';
+import { Pressable } from '@app/ui/pressable/pressable';
import { useAlexSdkBalanceAsFiat } from '../../hooks/use-alex-sdk-fiat-price';
import { SwapAsset } from '../../hooks/use-swap-form';
@@ -23,11 +23,7 @@ export function SwapAssetItem({ asset, onClick }: SwapAssetItemProps) {
const fallback = getAvatarFallback(asset.name);
return (
-
+
@@ -40,6 +36,6 @@ export function SwapAssetItem({ asset, onClick }: SwapAssetItemProps) {
titleRight={formatMoneyWithoutSymbol(asset.balance)}
captionRight={balanceAsFiat}
/>
-
+
);
}
diff --git a/src/app/ui/components/dowpdown-menu/dropdown-menu.tsx b/src/app/ui/components/dowpdown-menu/dropdown-menu.tsx
index e53cdf06634..1ba3e52013f 100644
--- a/src/app/ui/components/dowpdown-menu/dropdown-menu.tsx
+++ b/src/app/ui/components/dowpdown-menu/dropdown-menu.tsx
@@ -5,9 +5,9 @@ import { css } from 'leather-styles/css';
import { type HTMLStyledProps, styled } from 'leather-styles/jsx';
import { ChevronDownIcon } from '@app/ui/icons';
+import { pressableBaseStyles, pressableStyles } from '@app/ui/pressable/pressable';
import { Flag } from '../flag/flag';
-import { itemBaseStyles, itemInteractiveStyles } from '../item/item-interactive';
export interface DropdownMenuItem {
iconLeft?: ReactNode;
@@ -77,7 +77,7 @@ const Item: typeof RadixDropdownMenu.Item = forwardRef((props, ref) => (
diff --git a/src/app/ui/components/item/item-with-buttons.layout.tsx b/src/app/ui/components/item-layout/item-layout-with-buttons.tsx
similarity index 82%
rename from src/app/ui/components/item/item-with-buttons.layout.tsx
rename to src/app/ui/components/item-layout/item-layout-with-buttons.tsx
index af00349f3f8..dd610fbf398 100644
--- a/src/app/ui/components/item/item-with-buttons.layout.tsx
+++ b/src/app/ui/components/item-layout/item-layout-with-buttons.tsx
@@ -2,8 +2,9 @@ import { ReactNode } from 'react';
import { Flex, HStack, Stack, styled } from 'leather-styles/jsx';
+import { pressableCaptionStyles } from '@app/ui/pressable/pressable';
+
import { Flag } from '../flag/flag';
-import { itemCaptionStyles } from './item-interactive';
interface ItemWithButtonsLayoutProps {
buttons: ReactNode;
@@ -11,7 +12,7 @@ interface ItemWithButtonsLayoutProps {
flagImg: ReactNode;
title: string;
}
-export function ItemWithButtonsLayout({
+export function ItemLayoutWithButtons({
buttons,
caption,
flagImg,
@@ -31,7 +32,7 @@ export function ItemWithButtonsLayout({
{title}
-
+
{caption}
diff --git a/src/app/ui/components/item/item.stories.tsx b/src/app/ui/components/item-layout/item-layout.stories.tsx
similarity index 93%
rename from src/app/ui/components/item/item.stories.tsx
rename to src/app/ui/components/item-layout/item-layout.stories.tsx
index d510c152ec1..7b43d5f8ec3 100644
--- a/src/app/ui/components/item/item.stories.tsx
+++ b/src/app/ui/components/item-layout/item-layout.stories.tsx
@@ -1,7 +1,7 @@
import { Meta, StoryObj } from '@storybook/react';
import { Box, Circle } from 'leather-styles/jsx';
-import { ItemLayout as Component } from './item.layout';
+import { ItemLayout as Component } from './item-layout';
const meta: Meta = {
component: Component,
diff --git a/src/app/ui/components/item/item.layout.tsx b/src/app/ui/components/item-layout/item-layout.tsx
similarity index 83%
rename from src/app/ui/components/item/item.layout.tsx
rename to src/app/ui/components/item-layout/item-layout.tsx
index 236e96144c7..9080292d5e3 100644
--- a/src/app/ui/components/item/item.layout.tsx
+++ b/src/app/ui/components/item-layout/item-layout.tsx
@@ -2,10 +2,11 @@ import { ReactNode, isValidElement } from 'react';
import { Flex, HStack, Stack, styled } from 'leather-styles/jsx';
+import { pressableCaptionStyles, pressableChevronStyles } from '@app/ui/pressable/pressable';
+
import { CheckmarkIcon } from '../../icons/checkmark-icon';
import { ChevronUpIcon } from '../../icons/chevron-up-icon';
import { Flag } from '../flag/flag';
-import { itemCaptionStyles, itemChevronStyles } from './item-interactive';
interface ItemLayoutProps {
captionLeft: ReactNode;
@@ -50,7 +51,7 @@ export function ItemLayout({
{isValidElement(captionLeft) ? (
captionLeft
) : (
-
+
{captionLeft}
)}
@@ -67,13 +68,17 @@ export function ItemLayout({
{isValidElement(captionRight) ? (
captionRight
) : (
-
+
{captionRight}
)}
{showChevron && (
-
+
)}
diff --git a/src/app/ui/components/select/select.tsx b/src/app/ui/components/select/select.tsx
index c0b89e58d67..28671f15d1d 100644
--- a/src/app/ui/components/select/select.tsx
+++ b/src/app/ui/components/select/select.tsx
@@ -3,7 +3,7 @@ import { ReactNode, forwardRef } from 'react';
import * as RadixSelect from '@radix-ui/react-select';
import { css } from 'leather-styles/css';
-import { itemBaseStyles, itemInteractiveStyles } from '../item/item-interactive';
+import { pressableBaseStyles, pressableStyles } from '@app/ui/pressable/pressable';
export interface SelectItem {
iconLeft?: ReactNode;
@@ -74,7 +74,7 @@ const Label: typeof RadixSelect.Label = forwardRef((props, ref) => (
));
const Item: typeof RadixSelect.Item = forwardRef((props, ref) => (
-
+
));
const selectSeparatorStyles = css({
diff --git a/src/app/ui/components/item/item-interactive.stories.tsx b/src/app/ui/pressable/pressable.stories.tsx
similarity index 88%
rename from src/app/ui/components/item/item-interactive.stories.tsx
rename to src/app/ui/pressable/pressable.stories.tsx
index 556c8544c16..c9381210117 100644
--- a/src/app/ui/components/item/item-interactive.stories.tsx
+++ b/src/app/ui/pressable/pressable.stories.tsx
@@ -4,16 +4,16 @@ import { styled } from 'leather-styles/jsx';
import { BtcAvatarIcon } from '@app/ui/components/avatar/btc-avatar-icon';
import { CopyIcon } from '@app/ui/icons/copy-icon';
import { QrCodeIcon } from '@app/ui/icons/qr-code-icon';
+import { Pressable as Component } from '@app/ui/pressable/pressable';
-import { Button } from '../button/button';
-import { ItemInteractive as Component } from './item-interactive';
-import { ItemWithButtonsLayout } from './item-with-buttons.layout';
-import { ItemLayout } from './item.layout';
+import { Button } from '../components/button/button';
+import { ItemLayout } from '../components/item-layout/item-layout';
+import { ItemLayoutWithButtons } from '../components/item-layout/item-layout-with-buttons';
const meta: Meta = {
component: Component,
tags: ['autodocs'],
- title: 'ItemInteractive',
+ title: 'Pressable',
parameters: {
controls: { include: [] },
},
@@ -35,7 +35,7 @@ function ExampleInteractiveItemContent() {
);
}
-export const ItemInteractive: Story = {
+export const Pressable: Story = {
parameters: {
docs: {
description: {
@@ -70,7 +70,7 @@ export const Disabled: Story = {
export const WithButtons: Story = {
args: {
children: (
- }
title="Label"
caption="Caption"
diff --git a/src/app/ui/components/item/item-interactive.tsx b/src/app/ui/pressable/pressable.tsx
similarity index 64%
rename from src/app/ui/components/item/item-interactive.tsx
rename to src/app/ui/pressable/pressable.tsx
index 3a7d18d2664..ef581e892ad 100644
--- a/src/app/ui/components/item/item-interactive.tsx
+++ b/src/app/ui/pressable/pressable.tsx
@@ -1,7 +1,7 @@
import { forwardRef } from 'react';
import { type RecipeVariantProps, css, cva } from 'leather-styles/css';
-import { Box, BoxProps } from 'leather-styles/jsx';
+import { type HTMLStyledProps, styled } from 'leather-styles/jsx';
import { isDefined } from '@shared/utils';
@@ -24,7 +24,7 @@ const focusVisibleStyles = {
_focusWithin: { outline: 'none' },
};
-export const itemBaseStyles = css.raw({
+export const pressableBaseStyles = css.raw({
position: 'relative',
bg: 'ink.background-primary',
color: 'ink.text-primary',
@@ -37,7 +37,7 @@ export const itemBaseStyles = css.raw({
width: '100%',
});
-export const itemInteractiveStyles = css.raw({
+export const pressableStyles = css.raw({
cursor: 'pointer',
position: 'relative',
_before: basePseudoOutlineProps,
@@ -66,41 +66,41 @@ export const itemInteractiveStyles = css.raw({
},
});
-const itemRecipe = cva({
- base: itemBaseStyles,
+const pressableRecipe = cva({
+ base: pressableBaseStyles,
variants: {
disabled: { true: {} },
- interactive: {
- true: itemInteractiveStyles,
+ pressable: {
+ true: pressableStyles,
},
},
});
-export const itemCaptionStyles = css({
+export const pressableCaptionStyles = css({
_groupDisabled: { color: 'ink.non-interactive' },
color: 'ink.text-subdued',
});
-export const itemChevronStyles = css({
+export const pressableChevronStyles = css({
_groupDisabled: { color: 'ink.non-interactive' },
color: 'ink.action-primary-default',
});
-type ItemVariantProps = RecipeVariantProps;
+type PressableVariantProps = RecipeVariantProps;
-export const ItemInteractive = forwardRef(
- (props, ref) => {
- const { disabled, onClick, ...rest } = props;
- const isInteractive = isDefined(onClick);
- return (
-
- );
- }
-);
+export const Pressable = forwardRef<
+ HTMLButtonElement,
+ HTMLStyledProps<'button'> & PressableVariantProps
+>((props, ref) => {
+ const { disabled, onClick, ...rest } = props;
+ const isPressable = isDefined(onClick);
+ return (
+
+ );
+});