@0xsquid/ui 2.6.3 → 2.6.5

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

@@ -10,10 +10,13 @@ interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     link?: string;
     isLoading?: boolean;
     showLoader?: boolean;
+    loaderSize?: LoaderSize;
     chip?: ChipProps;
     containerClassName?: string;
     buttonRef?: React.Ref<HTMLButtonElement>;
     anchorRef?: React.Ref<HTMLAnchorElement>;
 }
-export declare function Button({ label, disabled, size, variant, icon, link, isLoading, showLoader, chip, containerClassName, anchorRef, buttonRef, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+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 {};

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ChipProps extends React.HTMLAttributes<HTMLDivElement | HTMLButtonElement> {
     label?: string;
     icon?: React.ReactNode;
 }

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

@@ -0,0 +1,6 @@
+interface LargeNumericInputProps {
+    value?: string;
+    onChange: (value: string) => void;
+}
+export declare function LargeNumericInput({ onChange, value }: LargeNumericInputProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -34,6 +34,7 @@ interface NumericInputProps extends React.InputHTMLAttributes<HTMLInputElement>
         tooltip?: Omit<TooltipProps, "children">;
         hideMaxChip?: boolean;
     };
+    debounceInput?: boolean;
 }
-export declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, inputModeButton, isInteractive, balanceButton, ...props }: NumericInputProps): 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, ...props }: NumericInputProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SwitchSize } from "../../types/components";
+import { type SwitchSize } from "../../types/components";
 export interface SwitchProps {
     checked?: boolean;
     onChange?: (checked: boolean) => void;

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

@@ -1,6 +1,7 @@
 export * from "./Input";
+export * from "./LargeNumericInput";
 export * from "./NumericInput";
+export * from "./RangeInput";
 export * from "./SettingsSlider";
 export * from "./Switch";
 export * from "./Tooltip";
-export * from "./RangeInput";

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

@@ -114,3 +114,11 @@ export declare function MoneyBagIcon({ className, size, }: {
     className?: string;
     size?: string;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function PluginIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function CircleCheckIcon({ className, size, }: {
+    className?: string;
+    size?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -3,4 +3,7 @@ import { Player } from "@lottiefiles/react-lottie-player";
 interface Props extends React.ComponentProps<typeof Player> {
 }
 export declare const AnimationWrapper: (playerProps: Props) => import("react/jsx-runtime").JSX.Element;
+export declare function AnimationCard({ children }: {
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +1,5 @@
+interface ModalTitleProps {
+    title: string;
+}
+export declare function ModalTitle({ title }: ModalTitleProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -48,6 +48,8 @@ interface SwapConfigurationProps {
         disabled?: boolean;
     };
     showNumericInputDetails?: boolean;
+    fullHeight?: boolean;
+    debounceInput?: 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, }: 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, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -16,6 +16,7 @@ export * from "./Join";
 export * from "./Menu";
 export * from "./Modal";
 export * from "./ModalContent";
+export * from "./ModalTitle";
 export * from "./NavigationBar";
 export * from "./PipeSeparator";
 export * from "./ProductCard";

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { type ImageRoundedSize } from "../../types/components";
+type HTMLInteractiveItem = HTMLButtonElement | HTMLDivElement | HTMLLabelElement;
 interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     itemTitle: string | React.ReactNode;
     mainImageUrl?: string;
@@ -27,9 +28,11 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     itemsContainerRef?: React.RefObject<HTMLElement>;
     imageGroup?: string[];
     multilineSubtitle?: boolean;
+    control?: React.ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLInteractiveItem>) => void;
 }
 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, itemsContainerRef, dropdownMenuContent, imageGroup, multilineSubtitle, ...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, dropdownMenuContent, imageGroup, multilineSubtitle, control, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
 export declare const ListItemActionsButton: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
     isActive?: boolean | undefined;
 }, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -65,4 +65,11 @@ export declare function replaceKeys(obj: Record<string, any>, options: ReplaceKe
  * mapToCssVariables({ "accent-gold": { cssVariable: "--accent-gold" } }) -> { "accent-gold": "var(--accent-gold)" }
  */
 export declare function mapToCssVariables<T extends Record<string, any>>(obj: T): Record<keyof T & string, string>;
+/**
+ * Simple hash function to create a deterministic index from a given string.
+ * @param {string} str - The input string to hash.
+ * @param {number} max - The maximum value for the hash.
+ * @returns {number} - The index within the array.
+ */
+export declare function hashStringToIndex(str: string, max: number): number;
 export {};

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

@@ -0,0 +1 @@
+export declare function useColorFromSeed(seed: string): string | undefined;

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

@@ -13,3 +13,4 @@ export declare const ChainAndTokenLightText: Story;
 export declare const ChainAndTokenDarkText: Story;
 export declare const LongTokenSymbol: Story;
 export declare const Tooltip: Story;
+export declare const BrokenTokenImage: Story;

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

@@ -3,32 +3,47 @@ import { Button } from "../../components/buttons/Button";
 declare const meta: Meta<typeof Button>;
 export default meta;
 type Story = StoryObj<typeof meta>;
+export declare const SmallPrimary: Story;
 export declare const MediumPrimary: Story;
+export declare const LargePrimary: Story;
+export declare const SmallSecondary: Story;
 export declare const MediumSecondary: Story;
+export declare const LargeSecondary: Story;
+export declare const SmallTertiary: Story;
 export declare const MediumTertiary: Story;
+export declare const LargeTertiary: Story;
+export declare const SmallDisabled: Story;
 export declare const MediumDisabled: Story;
-export declare const MediumAndLink: Story;
-export declare const MediumAndLinkDisabled: Story;
-export declare const MediumPrimaryIconOnly: Story;
-export declare const MediumSecondaryIconOnly: Story;
-export declare const MediumTertiaryIconOnly: Story;
+export declare const LargeDisabled: Story;
+export declare const SmallWithLink: Story;
+export declare const MediumWithLink: Story;
+export declare const LargeWithLink: Story;
+export declare const SmallDisabledWithLink: Story;
+export declare const MediumDisabledWithLink: Story;
+export declare const LargeDisabledWithLink: Story;
+export declare const SmallIconOnly: Story;
+export declare const MediumIconOnly: Story;
+export declare const LargeIconOnly: Story;
+export declare const SmallDisabledIconOnly: Story;
 export declare const MediumDisabledIconOnly: Story;
-export declare const MediumPrimaryIconAndLabel: Story;
-export declare const MediumSecondaryIconAndLabel: Story;
-export declare const MediumTertiaryIconAndLabel: Story;
+export declare const LargeDisabledIconOnly: Story;
+export declare const SmallIconAndLabel: Story;
+export declare const MediumIconAndLabel: Story;
+export declare const LargeIconAndLabel: Story;
 export declare const MediumDisabledIconAndLabel: Story;
-export declare const LargePrimary: Story;
-export declare const LargeSecondary: Story;
-export declare const LargeTertiary: Story;
-export declare const LargeDisabled: Story;
-export declare const LargeAndLink: Story;
-export declare const LargeAndLinkDisabled: Story;
+export declare const SmallWithLoader: Story;
+export declare const MediumWithLoader: Story;
 export declare const LargeWithLoader: Story;
 export declare const LargeDisabledWithLoader: Story;
+export declare const SmallWithIconLoading: Story;
 export declare const MediumWithIconLoading: Story;
+export declare const LargeWithIconLoading: Story;
+export declare const SmallWithLabelLoading: Story;
 export declare const MediumWithLabelLoading: Story;
-export declare const MediumWithLongLabelLoading: Story;
 export declare const LargeWithLabelLoading: Story;
+export declare const SmallWithLongLabelLoading: Story;
+export declare const MediumWithLongLabelLoading: Story;
 export declare const LargeWithLongLabelLoading: Story;
+export declare const SmallWithChip: Story;
 export declare const MediumWithChip: Story;
 export declare const LargeWithChip: Story;

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

@@ -1,7 +1,8 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { type Meta, type StoryObj } from "@storybook/react";
 import { Chip } from "../../components/buttons/Chip";
 declare const meta: Meta<typeof Chip>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Text: Story;
 export declare const Icon: Story;
+export declare const Interactive: Story;

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

@@ -1,11 +1,13 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { type Meta, type StoryObj } from "@storybook/react";
 import { Switch } from "../../components/controls/Switch";
 declare const meta: Meta<typeof Switch>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const LargeChecked: Story;
 export declare const LargeUnchecked: Story;
-export declare const LargeDisabled: Story;
+export declare const LargeCheckedDisabled: Story;
+export declare const LargeUncheckedDisabled: Story;
 export declare const SmallChecked: Story;
 export declare const SmallUnchecked: Story;
-export declare const SmallDisabled: Story;
+export declare const SmallCheckedDisabled: Story;
+export declare const SmallUncheckedDisabled: Story;

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

@@ -33,3 +33,6 @@ export declare const SmallWithoutExtraPadding: Story;
 export declare const LargeWithoutExtraPadding: Story;
 export declare const LargeWithDropdownMenu: Story;
 export declare const LargeWithMultilineSubtitle: Story;
+export declare const SmallWithSwitchControl: Story;
+export declare const LargeWithSwitchControl: Story;
+export declare const LargeWithSwitchControlDisabled: Story;

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

@@ -1,7 +1,7 @@
 export type TextSize = "small" | "medium" | "large";
 export type SwitchSize = "small" | "large";
 export type ButtonVariant = "primary" | "secondary" | "tertiary";
-export type ButtonSize = "md" | "lg";
+export type ButtonSize = "sm" | "md" | "lg";
 export type SwapDirection = "from" | "to";
 export type BoostMode = "normal" | "boost";
 export type HistoryItemStatus = "completed" | "pending" | "failed" | "warning";

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

@@ -1,6 +1,6 @@
 import { type DeepPartial } from "./utils";
-declare const THEME_COLOR_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-600", "royal-700", "highlight-700", "status-positive", "status-negative", "status-partial", "button-lg-primary-bg", "button-lg-primary-text", "button-lg-secondary-bg", "button-lg-secondary-text", "button-lg-tertiary-bg", "button-lg-tertiary-text", "button-md-primary-bg", "button-md-primary-text", "button-md-secondary-bg", "button-md-secondary-text", "button-md-tertiary-bg", "button-md-tertiary-text", "input-placeholder", "input-text", "input-selection", "input-bg", "animation-bg", "animation-text", "modal-backdrop", "menu-bg", "menu-text", "menu-backdrop", "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"];
-declare const THEME_BORDER_RADIUS_KEYS: readonly ["button-lg-primary", "button-lg-secondary", "button-lg-tertiary", "button-md-primary", "button-md-secondary", "button-md-tertiary", "container", "input", "menu-sm", "menu-lg", "modal"];
+declare const THEME_COLOR_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-600", "royal-700", "highlight-700", "status-positive", "status-negative", "status-partial", "button-lg-primary-bg", "button-lg-primary-text", "button-lg-secondary-bg", "button-lg-secondary-text", "button-lg-tertiary-bg", "button-lg-tertiary-text", "button-md-primary-bg", "button-md-primary-text", "button-md-secondary-bg", "button-md-secondary-text", "button-md-tertiary-bg", "button-md-tertiary-text", "button-sm-primary-bg", "button-sm-primary-text", "button-sm-secondary-bg", "button-sm-secondary-text", "button-sm-tertiary-bg", "button-sm-tertiary-text", "input-placeholder", "input-text", "input-selection", "input-bg", "animation-bg", "animation-text", "modal-backdrop", "menu-bg", "menu-text", "menu-backdrop", "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"];
+declare const THEME_BORDER_RADIUS_KEYS: readonly ["button-lg-primary", "button-lg-secondary", "button-lg-tertiary", "button-md-primary", "button-md-secondary", "button-md-tertiary", "button-sm-primary", "button-sm-secondary", "button-sm-tertiary", "container", "input", "menu-sm", "menu-lg", "modal"];
 declare const THEME_FONT_SIZE_KEYS: readonly ["caption", "body-large", "body-medium", "body-small", "heading-small", "heading-medium", "heading-large"];
 declare const THEME_FONT_WEIGHT_KEYS: readonly ["caption", "body-small", "body-medium", "body-large", "heading-small", "heading-medium", "heading-large"];
 declare const THEME_FONT_FAMILY_KEYS: readonly ["squid-main"];
@@ -26,7 +26,7 @@ export interface InternalTheme {
  * These colors are optional
  * and will be generated internally using the base colors if not provided
  */
-type OptionalColorsKeys = "button-lg-primary-bg" | "button-lg-primary-text" | "button-lg-secondary-bg" | "button-lg-secondary-text" | "button-lg-tertiary-bg" | "button-lg-tertiary-text" | "button-md-primary-bg" | "button-md-primary-text" | "button-md-secondary-bg" | "button-md-secondary-text" | "button-md-tertiary-bg" | "button-md-tertiary-text" | "input-placeholder" | "input-text" | "input-selection" | "input-bg" | "animation-bg" | "animation-text" | "modal-backdrop" | "menu-bg" | "menu-text" | "menu-backdrop";
+type OptionalColorsKeys = "button-lg-primary-bg" | "button-lg-primary-text" | "button-lg-secondary-bg" | "button-lg-secondary-text" | "button-lg-tertiary-bg" | "button-lg-tertiary-text" | "button-md-primary-bg" | "button-md-primary-text" | "button-md-secondary-bg" | "button-md-secondary-text" | "button-md-tertiary-bg" | "button-md-tertiary-text" | "button-sm-primary-bg" | "button-sm-primary-text" | "button-sm-secondary-bg" | "button-sm-secondary-text" | "button-sm-tertiary-bg" | "button-sm-tertiary-text" | "input-placeholder" | "input-text" | "input-selection" | "input-bg" | "animation-bg" | "animation-text" | "modal-backdrop" | "menu-bg" | "menu-text" | "menu-backdrop";
 /**
  * These colors are generated internally using the base colors
  */

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

@@ -1,4 +1,4 @@
 export type { Theme, PublicTheme, Settings } from "./config";
 export * from "./utils";
-export type { SwapState, ThemeType, SwapStep, HistoryItemStatus, ActionStatus, AssetsButtonVariant, ButtonVariant, ButtonSize, DescriptionBlock, } from "./components";
+export type { SwapState, ThemeType, SwapStep, HistoryItemStatus, ActionStatus, AssetsButtonVariant, ButtonVariant, ButtonSize, DescriptionBlock, DropdownPosition, } from "./components";
 export { themeKeysToCssVariables } from "./config";