@0xsquid/ui 2.2.2 → 2.2.4

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

@@ -10,6 +10,6 @@ interface BadgeImageProps {
      */
     placeholderImageUrl?: string;
 }
-type BadgeSize = "sm" | "md";
+type BadgeSize = "sm" | "md" | "lg";
 export declare function BadgeImage({ imageUrl: _imageUrl, badgeUrl, size, extraMarginForBadge, rounded, placeholderImageUrl, }: BadgeImageProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

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

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

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

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

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

@@ -13,11 +13,15 @@ export * from "./Coins";
 export * from "./Collection";
 export * from "./CompassRound";
 export * from "./Copy";
+export * from "./CrossAnimatedIcon";
 export * from "./DashboardFast";
+export * from "./DockIcons";
 export * from "./DotGrid";
 export * from "./EmojiSad";
 export * from "./Ethereum";
+export * from "./FavouriteFilterIcon";
 export * from "./Filter";
+export * from "./Generic";
 export * from "./Heart";
 export * from "./Help";
 export * from "./HomeIcon";
@@ -26,6 +30,7 @@ export * from "./Infinity";
 export * from "./Lightning";
 export * from "./Link";
 export * from "./Loader";
+export * from "./MarketIcons";
 export * from "./Max";
 export * from "./NotAllowed";
 export * from "./Percent";
@@ -49,7 +54,4 @@ export * from "./Timeline";
 export * from "./TradingViewSteps";
 export * from "./TriangleExclamation";
 export * from "./Wallet";
-export * from "./CrossAnimatedIcon";
 export * from "./Weather";
-export * from "./DockIcons";
-export * from "./Generic";

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

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+interface Token {
+    address: string;
+    name: string;
+    symbol: string;
+    image: string;
+    color: string;
+    textColor: string;
+    chainId: string;
+}
+interface Chain {
+    name: string;
+    image: string;
+}
+export type Timeframe = "1H" | "1D" | "1W" | "1Y";
+interface TokenDetailsViewProps {
+    isOpen: boolean;
+    onClose: () => void;
+    token: Token;
+    chain: Chain;
+    tokenPrice: number;
+    priceChange: number;
+    balance: number;
+    balanceUSD: number;
+    volume24h: string;
+    marketCap: string;
+    totalSupply: string;
+    loading: boolean;
+    onLikeToken: () => void;
+    Chart?: React.ComponentType<{
+        timeframe: Timeframe;
+    }>;
+    initialTimeframe?: Timeframe;
+    onTimeframeChange?: (timeframe: Timeframe) => void;
+    onSwapFrom: (token: Pick<Token, "address" | "chainId">) => void;
+    onSwapTo: (token: Pick<Token, "address" | "chainId">) => void;
+}
+export declare const TokenDetailsView: ({ isOpen, onClose, token, chain, tokenPrice, priceChange, balance, balanceUSD, volume24h, marketCap, totalSupply, loading, onLikeToken, Chart, initialTimeframe, onTimeframeChange, onSwapFrom, onSwapTo, }: TokenDetailsViewProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -3,6 +3,7 @@ export * from "./AppContainer";
 export * from "./Boost";
 export * from "./Breadcrumb";
 export * from "./Collapse";
+export * from "./CollapsibleMenu";
 export * from "./DescriptionBlocks";
 export * from "./DetailsToolbar";
 export * from "./DropdownMenu";
@@ -15,12 +16,13 @@ export * from "./Modal";
 export * from "./ModalContent";
 export * from "./NavigationBar";
 export * from "./PipeSeparator";
-export * from "./CollapsibleMenu";
 export * from "./ProductCard";
 export * from "./ProfileHeaderBackground";
 export * from "./SwapConfiguration";
 export * from "./SwapProgressViewHeader";
 export * from "./SwapStepsCollapsed";
+export * from "./Toast";
+export * from "./TokenDetailsView";
 export * from "./TokenPair";
 export * from "./TransactionFilters";
 export * from "./TransactionHeader/BridgeHeader";
@@ -38,4 +40,3 @@ export * from "./TransactionProperties/SwapProperties";
 export * from "./TransactionProperties/TransactionProperties";
 export * from "./TransactionSearch";
 export * from "./Transfer";
-export * from "./Toast";

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

@@ -5,6 +5,10 @@ interface BodyTextProps extends React.HTMLAttributes<HTMLSpanElement> {
     size: TextSize;
     bold?: boolean;
     tight?: boolean;
+    loading?: {
+        isLoading?: boolean;
+        width?: string;
+    };
 }
-export declare function BodyText({ size, children, bold, tight, ...props }: BodyTextProps): import("react/jsx-runtime").JSX.Element;
+export declare function BodyText({ size, children, bold, tight, loading, ...props }: BodyTextProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,6 +1,11 @@
-/// <reference types="react" />
+import { type ReactNode } from "react";
 interface CaptionProps extends React.HTMLAttributes<HTMLSpanElement> {
+    children: ReactNode;
     bold?: boolean;
+    loading?: {
+        isLoading?: boolean;
+        width?: string;
+    };
 }
-export declare function CaptionText({ children, bold, ...props }: CaptionProps): import("react/jsx-runtime").JSX.Element;
+export declare function CaptionText({ children, bold, loading, ...props }: CaptionProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/services/internal/colorService.d.ts

@@ -30,5 +30,6 @@ export declare function hexToRgb(hex: string): {
     a: number;
 } | null;
 export declare function rgbToHex(r: number, g: number, b: number): string;
-export declare function blendColors(foreground: string, background: string): string | null;
+export declare function blendColors(foreground: string, background: string, factor?: number): string | null;
 export declare const isValidHexColor: (hex: string) => boolean;
+export declare const getColorBrightness: (color: string) => number;

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { type Meta, type StoryObj } from "@storybook/react";
 import { DetailsToolbar } from "../../components/layout/DetailsToolbar";
 declare const meta: Meta<typeof DetailsToolbar>;
 export default meta;

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

@@ -0,0 +1,13 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { TokenDetailsView } from "../../components/layout/TokenDetailsView";
+declare const meta: Meta<typeof TokenDetailsView>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const PositivePriceChange: Story;
+export declare const LowBalance: Story;
+export declare const HighBalance: Story;
+export declare const DifferentToken: Story;
+export declare const Closed: Story;
+export declare const Loading: Story;
+export declare const WithFakeChart: Story;

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

@@ -39,6 +39,10 @@ export interface PublicTheme extends Omit<InternalTheme, "color"> {
     color: // Remove the hidden colors and the optional colors
     Omit<InternalTheme["color"], HiddenColorsKeys | OptionalColorsKeys> & Partial<Pick<InternalTheme["color"], OptionalColorsKeys>>;
 }
+/**
+ * The theme interface exposed for the end user
+ * Everything is optional, any missing config will be generated internally
+ */
 export type Theme = DeepPartial<PublicTheme>;
 interface CssVariable {
     cssVariable: string;