@0xsquid/ui 2.6.2 → 2.6.4

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/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/icons/Arrow.d.ts

@@ -75,8 +75,9 @@ export declare function ArrowCornerDownRightIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function ChevronDownSmallIcon({ size, className, }: {
+export declare function ChevronDownSmallIcon({ size, strokeWidth, className, }: {
     size?: string;
+    strokeWidth?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function ArrowDownIcon({ size, className, }: {

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

@@ -62,11 +62,12 @@ export declare function LaptopIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function CopyOutlinedIcon({ size, className, }: {
+export declare function CopyOutlinedIcon({ size, strokeWidth, className, }: {
     size?: string;
     className?: string;
+    strokeWidth?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function CopyIcon({ size, className, }: {
+export declare function Copy2Icon({ size, className, }: {
     size?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
@@ -113,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/icons/Social.d.ts

@@ -1,4 +1,4 @@
-export declare function XSocial({ className, size, }: {
+export declare function XSocialIcon({ className, size, }: {
     size?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
@@ -14,3 +14,11 @@ export declare function MirrorIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function FarcasterIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TelegramIcon({ className, size, }: {
+    className?: string;
+    size?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -12,7 +12,6 @@ export * from "./Clock";
 export * from "./Coins";
 export * from "./Collection";
 export * from "./CompassRound";
-export * from "./Copy";
 export * from "./CrossAnimatedIcon";
 export * from "./DashboardFast";
 export * from "./DockIcons";

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

@@ -10,6 +10,7 @@ interface DropdownMenuProps {
     children?: React.ReactNode;
     contentWrapperProps?: React.ComponentProps<"div">;
     menuContentClassName?: string;
+    trigger?: React.ReactNode;
 }
-export declare function DropdownMenu({ dropdownRef, className, menuRef, isHidden, listClassName, containerClassName, children, contentWrapperProps, menuContentClassName, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownMenu({ dropdownRef, className, menuRef, isHidden, listClassName, containerClassName, children, contentWrapperProps, menuContentClassName, trigger, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
 export {};

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/components/views/SwapProgressView.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SwapState, type SwapStep } from "../../types/components";
 import { type SwapStepsCollapsedFooterButton } from "../layout/SwapStepsCollapsed";
 interface ChainData {
@@ -9,12 +10,12 @@ interface Token {
     logoUrl: string;
     bgColor: string;
 }
-export declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, refundTokenSymbol, addGasLink, }: {
+export declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, refundTokenSymbol, addGasLink, shareSwapDropdownContent, }: {
     steps: SwapStep[];
     handleClose?: (swapState: SwapState) => void;
     handleComplete?: () => void;
     isOpen?: boolean;
-    socialLink?: string;
+    shareSwapDropdownContent?: React.ReactNode;
     supportLink?: string;
     fromToken: Token;
     toToken: Token;

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/hooks/useDropdownMenu.d.ts

@@ -1,11 +1,11 @@
-import React from "react";
-export type DropdownPosition = "top" | "bottom" | "center";
-export type DropdownStyles = {
+import type React from "react";
+import { type DropdownPosition } from "../types/components";
+export interface DropdownStyles {
     position: DropdownPosition;
     maxHeight: number | null;
-};
+}
 interface UseDropdownMenuParams {
-    initialIsModalOpen?: boolean;
+    initialIsDropdownOpen?: boolean;
     itemsContainerRef?: React.RefObject<HTMLElement>;
 }
 export declare function useDropdownMenu(props?: UseDropdownMenuParams): {

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/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/layout/AppContainer.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react/*";
+import { type Meta, type StoryObj } from "@storybook/react/*";
 declare const meta: Meta<typeof SwitchingAppContainer>;
 export default meta;
 type Story = StoryObj<typeof meta>;

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/stories/views/MainView.stories.d.ts

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

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

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

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