@0xsquid/ui 2.7.1-dex-beta.1 → 2.8.0

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

@@ -18,6 +18,5 @@ export interface TokenGroupProps<T> {
     onChildClick?: (tokenProps: T) => void;
     isAdjacentToPreviousExpanded?: boolean;
     isAdjacentToNextExpanded?: boolean;
-    action?: React.ReactNode;
 }
-export declare function TokenGroup<T extends TokenGroupProps<T>>({ isSelected, tokenItems, priceChange, balance, balanceUsd, extraSpacing, chainImageUrl, imageUrl, symbol, name, onClick, variant, className, onChildClick, isAdjacentToPreviousExpanded, isAdjacentToNextExpanded, action, }: TokenGroupProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function TokenGroup<T extends TokenGroupProps<T>>({ isSelected, tokenItems, priceChange, balance, balanceUsd, extraSpacing, chainImageUrl, imageUrl, symbol, name, onClick, variant, className, onChildClick, isAdjacentToPreviousExpanded, isAdjacentToNextExpanded, }: TokenGroupProps<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -10,7 +10,7 @@ interface Token {
     logoUrl: string;
     bgColor: string;
 }
-export declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, refundTokenSymbol, addGasLink, shareSwapDropdownContent, }: {
+export declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, refundTokenSymbol, addGasLink, shareSwapDropdownContent, isSendTransaction, }: {
     steps: SwapStep[];
     handleClose?: (swapState: SwapState) => void;
     handleComplete?: () => void;
@@ -30,5 +30,6 @@ export declare function SwapProgressView({ steps, isOpen, handleClose, handleCom
     footerButton?: SwapStepsCollapsedFooterButton;
     refundTokenSymbol?: string;
     addGasLink?: string;
+    isSendTransaction?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/core/constants.d.ts

@@ -36,7 +36,7 @@ export declare const ANIMATION_TIMINGS: {
     HIDE_ROUTE: string;
     GENERIC: string;
 };
-type MediaQuery = "MOBILE_LG" | "MOBILE_SM_HEIGHT" | "MOBILE_XS" | "MOBILE_XS_HEIGHT" | "DESKTOP_MD";
+type MediaQuery = "MOBILE_LG" | "MOBILE_SM_HEIGHT" | "MOBILE_XS" | "MOBILE_XS_HEIGHT";
 export declare const MEDIA_QUERIES: Record<MediaQuery, {
     media: string;
     key: string;

package/dist/cjs/types/core/index.d.ts

@@ -1,4 +1,4 @@
 export { MEDIA_QUERIES, CSS_VARS, ANIMATION_DURATIONS } from "./constants";
 export { darkTheme, lightTheme } from "./themes";
 export { baseTailwindConfig, spacing } from "./design-system";
-export { cn } from "./utils";
+export { cn, pxToRem, remToPx } from "./utils";

package/dist/cjs/types/core/utils.d.ts

@@ -72,4 +72,20 @@ export declare function mapToCssVariables<T extends Record<string, any>>(obj: T)
  * @returns {number} - The index within the array.
  */
 export declare function hashStringToIndex(str: string, max: number): number;
+/**
+ * Formats a value for CSS properties by adding 'px' if no unit is present.
+ * @param {string | number} value - The value to format (can be a number or string)
+ * @returns {string} - The formatted CSS value with appropriate units
+ *
+ * @example
+ * // Returns "20px"
+ * formatCSSValue(20)
+ *
+ * @example
+ * // Returns "5rem"
+ * formatCSSValue("5rem")
+ */
+export declare function formatCSSValue(value: string | number): string;
+export declare const remToPx: (rem: string | number, baseFontSize?: number) => number;
+export declare const pxToRem: (px: string | number, baseFontSize?: number) => number;
 export {};

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

@@ -1,7 +1,8 @@
+export * from "./useCollapsibleMenu";
 export * from "./useDropdownMenu";
 export * from "./useMediaQuery";
-export * from "./useCollapsibleMenu";
+export * from "./useNumericInput";
 export * from "./useRect";
-export * from "./useVersion";
 export * from "./useTimer";
 export * from "./useUserTheme";
+export * from "./useVersion";

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

@@ -0,0 +1,36 @@
+declare type ResizeObserverCallback = (entries: any[], observer: ResizeObserver) => void;
+declare class ResizeObserver {
+    constructor(callback: ResizeObserverCallback);
+    observe(target: Element, options?: any): void;
+    unobserve(target: Element): void;
+    disconnect(): void;
+    static toString(): string;
+}
+export interface RectReadOnly {
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+    readonly top: number;
+    readonly right: number;
+    readonly bottom: number;
+    readonly left: number;
+    [key: string]: number;
+}
+type HTMLOrSVGElement = HTMLElement | SVGElement;
+type Result = [
+    (element: HTMLOrSVGElement | null) => void,
+    RectReadOnly,
+    () => void
+];
+export interface Options {
+    debounce?: number | {
+        scroll: number;
+        resize: number;
+    };
+    scroll?: boolean;
+    polyfill?: new (cb: ResizeObserverCallback) => ResizeObserver;
+    offsetSize?: boolean;
+}
+declare function useMeasure({ debounce, scroll, polyfill, offsetSize }?: Options): Result;
+export default useMeasure;

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

@@ -0,0 +1,35 @@
+import { type ChangeEvent } from "react";
+import { type Token } from "../components/controls/NumericInput";
+export declare enum UserInputType {
+    TOKEN = 0,
+    USD = 1
+}
+interface UseNumericInputOptions {
+    token: Pick<Token, "decimals" | "price">;
+    onAmountChange: (tokenAmount: string) => void;
+    forcedAmount?: string;
+    formatIfVerySmall: {
+        token: string;
+        usd: string;
+    };
+    balance: string;
+    inputModeButton?: {
+        amountUsd?: string;
+    };
+    maxUsdDecimals?: number;
+    debounceInput?: boolean;
+    direction?: "from" | "to";
+    initialInputMode?: UserInputType;
+}
+export declare function useNumericInput({ onAmountChange, token, balance, debounceInput, forcedAmount, formatIfVerySmall, inputModeButton, maxUsdDecimals, direction, initialInputMode, }: UseNumericInputOptions): {
+    userInputType: UserInputType;
+    inputValue: string;
+    handleInputChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    handleSwitchInputMode: () => void;
+    isTokenAmountVerySmall: boolean;
+    isUsdAmountVerySmall: boolean;
+    amountFormatted: string;
+    onBalanceButtonClick: () => void;
+    balanceFormatted: string;
+};
+export {};

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

@@ -12,8 +12,6 @@ interface RGB {
  * @param style
  */
 export declare const parseSquidTheme: (userTheme: Theme, themeType: ThemeType) => Record<string, string | undefined> | undefined;
-export declare const remToPx: (rem: string | number, addSuffix?: boolean) => string;
-export declare const pxToRem: (px: string | number, addSuffix?: boolean) => string;
 export declare function getContrastColor({ r, g, b, }: {
     r: number;
     g: number;

package/dist/cjs/types/stories/badges/ImageGroup.stories.d.ts

@@ -4,7 +4,6 @@ declare const meta: Meta<typeof ImageGroup>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Large: Story;
-export declare const Medium: Story;
 export declare const Small: Story;
-export declare const LargeWithBadge: Story;
-export declare const LargeWithCustomBadgeContent: Story;
+export declare const Badge: Story;
+export declare const CustomBadgeContent: Story;

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

@@ -44,6 +44,9 @@ export declare const LargeWithLabelLoading: Story;
 export declare const SmallWithLongLabelLoading: Story;
 export declare const MediumWithLongLabelLoading: Story;
 export declare const LargeWithLongLabelLoading: Story;
+export declare const SmallWithLongLabelShimmer: Story;
+export declare const MediumWithLongLabelShimmer: Story;
+export declare const LargeWithLongLabelShimmer: Story;
 export declare const SmallWithChip: Story;
 export declare const MediumWithChip: Story;
 export declare const LargeWithChip: Story;

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

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

package/dist/cjs/types/stories/controls/NumericInput.stories.d.ts

@@ -0,0 +1,17 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { NumericInput } from "../../components/controls/NumericInput";
+declare const meta: Meta<typeof NumericInput>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const FiatOnRampStyle: Story;
+export declare const FiatOnRampStyleLoading: Story;
+export declare const CustomSymbol: Story;
+export declare const MinimalVersion: Story;
+export declare const MinimalVersionWithCustomSymbol: Story;
+export declare const MinimalVersionWithBigSymbol: Story;
+export declare const WithError: Story;
+export declare const WithPriceImpact: Story;
+export declare const WithTooltips: Story;
+export declare const Loading: Story;
+export declare const NonInteractive: Story;

package/dist/cjs/types/stories/feedback/AnimateNumber.stories.d.ts

@@ -0,0 +1,6 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { AnimateNumber } from "../../components/feedback/AnimateNumber";
+declare const meta: Meta<typeof AnimateNumber>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/{esm/types/stories/badges → cjs/types/stories/feedback}/Loader.stories.d.ts

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

package/dist/cjs/types/stories/{badges → feedback}/LoadingSkeleton.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { LoadingSkeleton } from "../../components/badges/LoadingSkeleton";
+import { type Meta, type StoryObj } from "@storybook/react";
+import { LoadingSkeleton } from "../../components/feedback/LoadingSkeleton";
 declare const meta: Meta<typeof LoadingSkeleton>;
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/cjs/types/stories/feedback/LoadingText.stories.d.ts

@@ -0,0 +1,6 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { LoadingText } from "../../components/feedback/LoadingText";
+declare const meta: Meta<typeof LoadingText>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

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

@@ -17,3 +17,4 @@ export declare const AllProps: Story;
 export declare const Loading: Story;
 export declare const LoadingAndSubtitle: Story;
 export declare const Transparent: Story;
+export declare const ActionsWithPadding: Story;

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

@@ -15,7 +15,7 @@ export declare const InputNotInteractiveWithAllProps: Story;
 export declare const ChainOnly: Story;
 export declare const ChainAndToken: Story;
 export declare const WithSwapAmountUsd: Story;
-export declare const Address: Story;
+export declare const AddressAndImage: Story;
 export declare const WithBalance: Story;
 export declare const LowPriceImpact: Story;
 export declare const HighPriceImpact: Story;

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

@@ -23,7 +23,6 @@ export declare const SubtitleLoading: Story;
 export declare const CustomSubtitleLoading: Story;
 export declare const ImageAndBadgeLoading: Story;
 export declare const Small: Story;
-export declare const SmallWithImageGroup: Story;
 export declare const SmallInteractive: Story;
 export declare const SmallWithLongTitle: Story;
 export declare const SmallSelected: Story;

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

@@ -8,7 +8,6 @@ export declare const BalanceUsd: Story;
 export declare const PositivePriceChange: Story;
 export declare const NegativePriceChange: Story;
 export declare const NeutralPriceChange: Story;
-export declare const ActionButton: Story;
 export declare const LargeVariant: Story;
 export declare const SmallVariant: Story;
 export declare const CompactVariant: Story;

package/dist/cjs/types/stories/views/SwapProgressView.stories.d.ts

@@ -15,3 +15,4 @@ export declare const ConfirmationTooLong: Story;
 export declare const NeedsGas: Story;
 export declare const PartialSuccess: Story;
 export declare const Progress: Story;
+export declare const SendTransaction: Story;