npm - @0xsquid/ui - Versions diffs - 2.6.8-send-beta.0 → 2.6.8 - Mend

@0xsquid/ui 2.6.8-send-beta.0 → 2.6.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (45) hide show

package/dist/cjs/types/components/badges/PriceChange.d.ts CHANGED Viewed

@@ -1,6 +1,8 @@
 interface PriceChangeProps {
     variant?: "small" | "large";
     value: string | number;
+    highlightText?: boolean;
+    triangle?: "none" | "prefix" | "suffix";
 }
-export declare function PriceChange({ value: rawValue, variant, }: PriceChangeProps): import("react/jsx-runtime").JSX.Element;
+export declare function PriceChange({ value: rawValue, variant, highlightText, triangle, }: PriceChangeProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/components/badges/index.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ export * from "./BadgeImage";
 export * from "./IconLabel";
 export * from "./Image";
 export * from "./ImageGroup";
-export * from "./LoadingSkeleton";
+export * from "../feedback/LoadingSkeleton";
 export * from "./PriceChange";
 export * from "./TransactionState";
 export * from "./UsdAmount";

package/dist/cjs/types/components/buttons/Button.d.ts CHANGED Viewed

@@ -9,6 +9,7 @@ interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     disabled?: boolean;
     link?: string;
     isLoading?: boolean;
+    isShimmering?: boolean;
     showLoader?: boolean;
     loaderSize?: LoaderSize;
     chip?: ChipProps;
@@ -18,5 +19,5 @@ interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
 }
 type LoaderSize = "sm" | "md" | "lg";
 export declare const buttonRoundedClassMap: Record<ButtonSize, Record<ButtonVariant, string>>;
-export declare function Button({ label, disabled, size, variant, icon, link, isLoading, showLoader, loaderSize, chip, containerClassName, anchorRef, buttonRef, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ label, disabled, size, variant, icon, link, isLoading, isShimmering, showLoader, loaderSize, chip, containerClassName, anchorRef, buttonRef, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/components/controls/NumericInput.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { UserInputType } from "../../hooks/useNumericInput";
 import { type SwapDirection } from "../../types/components";
 import { type TooltipProps } from "./Tooltip";
 export interface Token {
@@ -26,6 +27,12 @@ export interface NumericInputProps {
         hideMaxChip?: boolean;
     };
     debounceInput?: boolean;
+    initialInputMode?: UserInputType;
+    customSymbol?: string;
+    hideControls?: boolean;
+    hideBalance?: boolean;
+    containerClassName?: string;
+    inputClassName?: string;
 }
 export interface Props extends NumericInputProps, React.InputHTMLAttributes<HTMLInputElement> {
     direction?: SwapDirection;
@@ -38,4 +45,4 @@ export interface Props extends NumericInputProps, React.InputHTMLAttributes<HTML
         message: string;
     };
 }
-export declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, inputModeButton, isInteractive, balanceButton, debounceInput, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, inputModeButton, isInteractive, balanceButton, debounceInput, initialInputMode, customSymbol, hideControls, hideBalance, containerClassName, inputClassName, ...props }: Props): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/components/feedback/LoadingText.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { type ButtonVariant } from "../../types/components";
+interface LoadingTextProps extends React.HTMLAttributes<HTMLSpanElement> {
+    variant?: ButtonVariant;
+}
+export declare function LoadingText({ children, className, ...props }: LoadingTextProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/types/components/icons/Loader.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { ComponentProps } from "react";
+import { type ComponentProps } from "react";
 interface LoaderProps extends ComponentProps<"svg"> {
     size?: string;
     strokeWidth?: string;

package/dist/cjs/types/components/icons/PaymentIcons.d.ts ADDED Viewed

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

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

@@ -32,6 +32,7 @@ export * from "./Loader";
 export * from "./MarketIcons";
 export * from "./Max";
 export * from "./NotAllowed";
+export * from "./PaymentIcons";
 export * from "./Percent";
 export * from "./PieChart";
 export * from "./Plus";

package/dist/cjs/types/components/layout/SwapConfiguration.d.ts CHANGED Viewed

@@ -1,5 +1,18 @@
 import { type AssetsButtonVariant, type SwapDirection } from "../../types/components";
 import { type TooltipProps } from "../controls";
+interface AddressHeaderProps {
+    direction: SwapDirection;
+    onClick?: () => void;
+    isDisabled?: boolean;
+    tooltip?: TooltipProps["tooltipContent"];
+    label: string;
+    walletIconUrl?: string | null;
+    isLoading?: boolean;
+    displayLabel?: boolean;
+    highlightLabel?: boolean;
+    showIcon?: boolean;
+}
+export declare const AddressHeader: ({ direction, onClick, isDisabled, tooltip, label, walletIconUrl, isLoading, displayLabel, highlightLabel, showIcon, }: AddressHeaderProps) => import("react/jsx-runtime").JSX.Element;
 interface SwapConfigurationProps {
     direction: SwapDirection;
     priceImpactPercentage?: string;
@@ -46,10 +59,13 @@ interface SwapConfigurationProps {
         address?: string;
         emptyAddressLabel?: string;
         disabled?: boolean;
+        walletIconUrl?: string | null;
+        showIcon?: boolean;
     };
     showNumericInputDetails?: boolean;
     fullHeight?: boolean;
     debounceInput?: boolean;
+    showWalletButtonHeader?: boolean;
 }
-export declare function SwapConfiguration({ amount, tokenPrice, isFetching: isFetchingProp, chain, token, direction, onAmountChange, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, maxUsdDecimals, isInputInteractive, isLoading, inputModeButton, balanceButton, assetsButton, walletButton, showNumericInputDetails, fullHeight, debounceInput, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
+export declare function SwapConfiguration({ amount, tokenPrice, isFetching: isFetchingProp, chain, token, direction, onAmountChange, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, maxUsdDecimals, isInputInteractive, isLoading, inputModeButton, balanceButton, assetsButton, walletButton, showNumericInputDetails, fullHeight, debounceInput, showWalletButtonHeader, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/useNumericInput.d.ts CHANGED Viewed

@@ -19,8 +19,9 @@ interface UseNumericInputOptions {
     maxUsdDecimals?: number;
     debounceInput?: boolean;
     direction?: "from" | "to";
+    initialInputMode?: UserInputType;
 }
-export declare function useNumericInput({ onAmountChange, token, balance, debounceInput, forcedAmount, formatIfVerySmall, inputModeButton, maxUsdDecimals, direction, }: UseNumericInputOptions): {
+export declare function useNumericInput({ onAmountChange, token, balance, debounceInput, forcedAmount, formatIfVerySmall, inputModeButton, maxUsdDecimals, direction, initialInputMode, }: UseNumericInputOptions): {
     userInputType: UserInputType;
     inputValue: string;
     handleInputChange: (e: ChangeEvent<HTMLInputElement>) => void;

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

@@ -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, baseFontSize?: number) => number;
-export declare const pxToRem: (px: string | number, baseFontSize?: number) => number;
 export declare function getContrastColor({ r, g, b, }: {
     r: number;
     g: number;

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

@@ -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/controls/NumericInput.stories.d.ts ADDED Viewed

@@ -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/{esm/types/stories/badges → cjs/types/stories/feedback}/Loader.stories.d.ts RENAMED Viewed

@@ -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 RENAMED Viewed

@@ -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 ADDED Viewed

@@ -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;