@0xsquid/ui 0.25.1-beta.0 → 0.26.0-beta.0

package/dist/cjs/types/components/buttons/StopsButton.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { TooltipProps } from '../controls';
+export interface StopsProps extends React.ComponentProps<'button'> {
+    stopsCount?: string | number;
+    estimatedTime?: string;
+    tooltip?: Omit<TooltipProps, 'children'>;
+    providers: Provider[];
+}
+export declare function StopsButton({ stopsCount, estimatedTime, tooltip, providers, ...props }: StopsProps): import("react/jsx-runtime").JSX.Element;
+type Provider = {
+    logoUrl: string;
+};
+export {};

package/dist/cjs/types/components/icons/Arrow.d.ts

@@ -61,3 +61,15 @@ export declare function ArrowCornerDownRightIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function ChevronDownSmallIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ArrowDownIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ArrowSplit({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/components/icons/CompassRound.d.ts

@@ -1,4 +1,8 @@
-export declare function CompassRound({ size, className, }: {
+export declare function CompassRoundOutlinedIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function CompassRoundSolidIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/components/layout/DetailsToolbar.d.ts

@@ -1,4 +1,4 @@
-import { BoostMode } from '../../types/components';
+import { StopsProps as StopsButtonProps } from '../buttons/StopsButton';
 import { TooltipProps } from '../controls';
 interface DetailsToolbarProps {
     errorMessage?: string;
@@ -12,21 +12,13 @@ interface DetailsToolbarProps {
         tooltip?: Omit<TooltipProps, 'children'>;
         onClick: () => void;
     };
-    estimatedTime?: string;
     isLoading?: boolean;
     isEmpty?: boolean;
     helpButton?: {
         label: string;
         onClick: () => void;
     };
-    boostButton?: {
-        tooltip?: Omit<TooltipProps, 'children'>;
-        onClick?: ({ boostMode }: {
-            boostMode: BoostMode;
-        }) => void;
-        canToggleBoostMode?: boolean;
-        boostMode?: BoostMode;
-    };
+    stopsButton?: StopsButtonProps;
 }
-export declare function DetailsToolbar({ errorMessage, estimatedTime, helpButton, isLoading, isEmpty, flipButton, feeButton, boostButton, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function DetailsToolbar({ errorMessage, helpButton, isLoading, isEmpty, flipButton, feeButton, stopsButton, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/components/lists/DropdownMenuItem.d.ts

@@ -5,5 +5,6 @@ export interface DropdownMenuItemProps {
     imageUrl?: string;
     icon?: React.ReactNode;
     onClick?: () => void;
+    link?: string;
 }
-export declare function DropdownMenuItem({ label, imageUrl, icon, labelClassName, onClick, }: DropdownMenuItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownMenuItem({ label, imageUrl, icon, labelClassName, onClick, link, }: DropdownMenuItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/components/lists/HistoryItem.d.ts

@@ -15,5 +15,5 @@ interface HistoryItemProps {
     onClick?: () => void;
     warningLabel?: string;
 }
-export declare function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, dropdownMenuItems, itemsContainerRef, status, warningLabel, onClick, }: HistoryItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, dropdownMenuItems: _dropdownMenuItemsProp, itemsContainerRef, status, warningLabel, onClick, }: HistoryItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/components/lists/ListItem.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { DropdownMenuItemProps } from './DropdownMenuItem';
 interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     itemTitle: string | React.ReactNode;
     mainImageUrl?: string;
@@ -22,7 +23,10 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     containerProps?: React.HTMLAttributes<HTMLLIElement>;
     compactOnMobile?: boolean;
     extraPadding?: boolean;
+    dropdownMenuItems?: DropdownMenuItemProps[];
+    itemsContainerRef?: React.RefObject<HTMLElement>;
 }
 type ListItemSize = 'small' | 'large';
-export declare function ListItem({ itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, compactOnMobile, extraPadding, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function ListItem({ itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, compactOnMobile, extraPadding, itemsContainerRef, dropdownMenuItems: _dropdownMenuItemsProp, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
+export declare const ListItemActionsButton: (props: React.ComponentProps<'button'>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/components/lists/PropertyListItem.d.ts

@@ -6,5 +6,9 @@ export interface PropertyListItemProps extends ComponentProps<'li'> {
     icon?: React.ReactNode;
     detail?: React.ReactNode;
     variant?: PropertyListItemSize;
+    showGradientBg?: boolean;
+    labelClassName?: string;
+    iconClassName?: string;
+    detailClassName?: string;
 }
-export declare function PropertyListItem({ isLoading, label, detail, icon, className, variant, ...props }: PropertyListItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function PropertyListItem({ isLoading, label, detail, icon, className, variant, showGradientBg, labelClassName, iconClassName, detailClassName, ...props }: PropertyListItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/components/lists/RouteStep.d.ts

@@ -0,0 +1,9 @@
+import { DescriptionBlock } from '../../types/components';
+interface RouteStepProps {
+    imageUrl: string;
+    descriptionBlocks: DescriptionBlock[];
+    subtitle: string;
+    showStepSeparator?: boolean;
+}
+export declare function RouteStep({ imageUrl, descriptionBlocks, subtitle, showStepSeparator, }: RouteStepProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/types/components/lists/index.d.ts

@@ -23,3 +23,4 @@ export * from './TransactionAction/SwapAction';
 export * from './TransactionAction/TransactionAction';
 export * from './TransactionAction/WrapAction';
 export * from './TransactionItem';
+export * from './RouteStep';

package/dist/cjs/types/hooks/useDropdownMenu.d.ts

@@ -1,10 +1,17 @@
 /// <reference types="react" />
-export declare function useDropdownMenu(props?: {
+import { DropdownPosition } from '../types/components';
+interface UseDropdownMenuParams {
     initialIsModalOpen?: boolean;
-}): {
+    itemsContainerRef?: React.RefObject<HTMLElement>;
+}
+export declare function useDropdownMenu(props?: UseDropdownMenuParams): {
     isDropdownOpen: boolean;
     openDropdown: () => void;
     closeDropdown: () => void;
     dropdownRef: React.RefObject<HTMLDivElement>;
     openDropdownButtonRef: React.RefObject<HTMLButtonElement>;
+    dropdownPosition: DropdownPosition | null;
+    itemRef: React.RefObject<HTMLLIElement>;
+    menuRef: React.RefObject<HTMLDivElement>;
 };
+export {};

package/dist/cjs/types/stories/buttons/StopsButton.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { StopsButton } from '../../components/buttons/StopsButton';
+declare const meta: Meta<typeof StopsButton>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const OneProvider: Story;
+export declare const TwoProviders: Story;
+export declare const ThreeProviders: Story;
+export declare const FourProviders: Story;
+export declare const TenProviders: Story;

package/dist/cjs/types/stories/layout/DetailsToolbar.stories.d.ts

@@ -9,9 +9,9 @@ export declare const Empty: Story;
 export declare const EmptyLoading: Story;
 export declare const Error: Story;
 export declare const ErrorHelpButton: Story;
-export declare const BoostButtonWithTooltip: Story;
-export declare const BoostDisabledWithTooltip: Story;
-export declare const BoostDisabledWithDelayedTooltip: Story;
+export declare const StopsButtonWithTooltip: Story;
+export declare const StopsButtonDisabledWithTooltip: Story;
+export declare const StopsButtonWithDelayedTooltip: Story;
 export declare const FlipButtonWithTooltip: Story;
 export declare const FlipButtonDisabled: Story;
 export declare const FeeButtonTooltip: Story;

package/dist/cjs/types/stories/lists/DropdownMenuItem.stories.d.ts

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Image: Story;
 export declare const Icon: Story;
+export declare const Link: Story;

package/dist/cjs/types/stories/lists/ListItem.stories.d.ts

@@ -30,3 +30,4 @@ export declare const LargeCompactOnMobile: Story;
 export declare const SmallCompactOnMobile: Story;
 export declare const SmallWithoutExtraPadding: Story;
 export declare const LargeWithoutExtraPadding: Story;
+export declare const LargeWithDropdownMenu: Story;

package/dist/cjs/types/stories/lists/PropertyListItem.stories.d.ts

@@ -4,6 +4,8 @@ declare const meta: Meta<typeof PropertyListItem>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const WithoutGradient: Story;
+export declare const CustomColors: Story;
 export declare const TextDetail: Story;
 export declare const CustomDetail: Story;
 export declare const Loading: Story;

package/dist/cjs/types/stories/lists/RouteStep.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { RouteStep } from '../../components/lists/RouteStep';
+declare const meta: Meta<typeof RouteStep>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithStepSeparator: Story;

package/dist/cjs/types/types/components.d.ts

@@ -41,3 +41,4 @@ export type ChainTypeFilter = 'source' | 'destination';
 export type StatusFilter = 'success' | 'ongoing' | 'error';
 export type AssetsButtonVariant = 'primary' | 'accent';
 export type PropertyListItemSize = 'small' | 'large';
+export type DropdownPosition = 'top' | 'bottom' | 'center';

package/dist/cjs/types/types/config.d.ts

@@ -2,7 +2,7 @@
  * The color format must be of type #FFFFFF
  */
 export type ColorType = `#${string}${string}${string}${string}${string}${string}`;
-declare const INTERNAL_SQUID_THEME_KEYS: readonly ["grey-100", "grey-200", "grey-300", "grey-400", "grey-500", "grey-600", "grey-700", "grey-800", "grey-900", "royal-300", "royal-400", "royal-500", "royal-700", "status-positive", "status-negative", "status-partial", "material-light-thin", "material-light-average", "material-light-thick", "material-dark-thin", "material-dark-average", "material-dark-thick", "grey-100-005", "material-light-blend-grey-900", "volt-700"];
+declare const INTERNAL_SQUID_THEME_KEYS: readonly ["grey-100", "grey-200", "grey-300", "grey-400", "grey-500", "grey-600", "grey-700", "grey-800", "grey-900", "royal-300", "royal-400", "royal-500", "royal-700", "status-positive", "status-negative", "status-partial", "material-light-thin", "material-light-average", "material-light-thick", "material-dark-thin", "material-dark-average", "material-dark-thick", "grey-100-005", "material-light-blend-grey-900", "material-light-blend-grey-800", "volt-700"];
 export type InternalSquidTheme = Record<(typeof INTERNAL_SQUID_THEME_KEYS)[number], string>;
 export type SquidTheme = {
     'content-100': string;