@0xsquid/ui 0.27.0 → 0.27.1

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

@@ -1,10 +1,10 @@
 import { ReactNode } from "react";
-import { ImageIconVariant } from "../../types/components";
+import { ImageVariant } from "../../types/components";
 interface IconLabelProps {
     isLoading?: boolean;
     src?: string;
     children?: ReactNode;
-    variant?: ImageIconVariant;
+    variant?: ImageVariant;
 }
 export declare function IconLabel({ src, children, variant }: IconLabelProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +1,9 @@
+import { ImageSize, ImageVariant } from "../../types/components";
+interface ImageProps {
+    src?: string;
+    variant?: ImageVariant;
+    size?: ImageSize;
+    className?: string;
+}
+export declare function Image({ src, variant, size, className: propsClassName, }: ImageProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,6 +1,6 @@
 export * from "./BadgeImage";
 export * from "./IconLabel";
-export * from "./ImageIcon";
+export * from "./Image";
 export * from "./LoadingSkeleton";
 export * from "./TransactionState";
 export * from "./UsdAmount";

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

@@ -2,5 +2,5 @@
 interface IconButtonProps extends React.ComponentProps<"button"> {
     icon: React.ReactNode;
 }
-export declare const IconButton: ({ icon, ...props }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IconButton: import("react").ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 export {};

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

@@ -1,9 +1,10 @@
+/// <reference types="react" />
 import { SwitchSize } from "../../types/components";
-interface SwitchProps {
+export interface SwitchProps {
     checked?: boolean;
     onChange?: (checked: boolean) => void;
     size: SwitchSize;
     disabled?: boolean;
+    inputProps?: React.ComponentProps<"input">;
 }
-export declare function Switch({ checked, onChange, size, disabled, }: SwitchProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function Switch({ checked, onChange, size, disabled, inputProps, }: SwitchProps): import("react/jsx-runtime").JSX.Element;

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

@@ -20,7 +20,10 @@ export declare function ChevronLargeRightIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function ChevronRightSmallIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function ChevronRightSmallIcon({ className, size, }: {
+    className?: string;
+    size?: string;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function ArrowLeftIcon({ className, size, }: {
     className?: string;
     size?: string;

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

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

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

@@ -1,6 +1,6 @@
 export declare function CoinsIcon(): import("react/jsx-runtime").JSX.Element;
 export declare function CoinsAddIcon(): import("react/jsx-runtime").JSX.Element;
-export declare function Dollar({ className, size, }: {
+export declare function DollarOutlinedIcon({ className, size, }: {
     className?: string;
     size?: string;
 }): import("react/jsx-runtime").JSX.Element;
@@ -8,3 +8,7 @@ export declare function StocksIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function DollarSolidIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,40 @@
+export declare function GhostIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function SettingsSliderIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function EyeOpenIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function BellAlarmIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function LimitIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function PoopIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function CatSquareIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function FilterAscendingIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ImageIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function FilterTimelineIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -52,3 +52,4 @@ export * from "./Wallet";
 export * from "./CrossAnimatedIcon";
 export * from "./Weather";
 export * from "./DockIcons";
+export * from "./Generic";

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

@@ -1,12 +1,15 @@
 /// <reference types="react" />
-import { DropdownMenuItemProps } from "../lists";
 interface DropdownMenuProps {
     dropdownRef?: React.RefObject<HTMLDivElement>;
     menuRef?: React.RefObject<HTMLDivElement>;
-    items: DropdownMenuItemProps[];
     className?: string;
     isHidden?: boolean;
     listClassName?: string;
+    containerClassName?: string;
+    containerRef?: React.RefObject<HTMLDivElement>;
+    children?: React.ReactNode;
+    contentWrapperProps?: React.ComponentProps<"div">;
+    menuContentClassName?: string;
 }
-export declare function DropdownMenu({ dropdownRef, items, className, menuRef, isHidden, listClassName, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownMenu({ dropdownRef, className, menuRef, isHidden, listClassName, containerClassName, children, contentWrapperProps, menuContentClassName, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -5,7 +5,7 @@ interface MenuProps extends React.ComponentProps<"div"> {
     contentClassName?: string;
     rounded?: Rounded;
     menuRef?: React.RefObject<HTMLDivElement>;
-    contentWrapperClassName?: string;
+    contentWrapperProps?: React.ComponentProps<"div">;
 }
-export declare function Menu({ children, containerClassName, contentClassName, rounded, menuRef, contentWrapperClassName, ...props }: MenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function Menu({ children, containerClassName, contentClassName, rounded, menuRef, contentWrapperProps, ...props }: MenuProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,10 +1,25 @@
 /// <reference types="react" />
+import { AllOrNone } from "../../types";
+import { SwitchProps } from "../controls";
+interface DropdownMenuItemControl extends Omit<SwitchProps, "size"> {
+    type: "switch";
+}
 export interface DropdownMenuItemProps {
     label: string;
     labelClassName?: string;
     imageUrl?: string;
     icon?: React.ReactNode;
-    onClick?: () => void;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     link?: string;
+    control?: DropdownMenuItemControl;
+    detail?: React.ReactNode;
+    isSelected?: boolean;
+    itemRef?: React.RefObject<HTMLLIElement>;
+    children?: React.ReactNode;
+    contentRef?: React.RefObject<HTMLButtonElement>;
 }
-export declare function DropdownMenuItem({ label, imageUrl, icon, labelClassName, onClick, link, }: DropdownMenuItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownMenuItem(props: DropdownMenuItemProps & AllOrNone<{
+    submenu: React.ReactNode;
+    containerRef: React.RefObject<HTMLDivElement>;
+}>): import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { HistoryItemStatus } from "../../types/components";
-import { DropdownMenuItemProps } from "./DropdownMenuItem";
 interface HistoryItemProps {
     firstImageUrl: string;
     secondImageUrl: string;
@@ -10,10 +9,10 @@ interface HistoryItemProps {
     dateCompleted: string;
     fromAmount: string;
     toAmount: string;
-    dropdownMenuItems?: DropdownMenuItemProps[];
     itemsContainerRef?: React.RefObject<HTMLElement>;
     onClick?: () => void;
     warningLabel?: string;
+    dropdownMenuContent?: React.ReactNode;
 }
-export declare function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, dropdownMenuItems: _dropdownMenuItemsProp, itemsContainerRef, status, warningLabel, onClick, }: HistoryItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, dropdownMenuContent, itemsContainerRef, status, warningLabel, onClick, }: HistoryItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import { DropdownMenuItemProps } from "./DropdownMenuItem";
 interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     itemTitle: string | React.ReactNode;
     mainImageUrl?: string;
@@ -23,10 +22,12 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     containerProps?: React.HTMLAttributes<HTMLLIElement>;
     compactOnMobile?: boolean;
     extraPadding?: boolean;
-    dropdownMenuItems?: DropdownMenuItemProps[];
+    dropdownMenuContent?: React.ReactNode;
     itemsContainerRef?: React.RefObject<HTMLElement>;
 }
 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, dropdownMenuItems: _dropdownMenuItemsProp, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
-export declare const ListItemActionsButton: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+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, ...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>>;
 export {};

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

@@ -24,3 +24,4 @@ export * from "./TransactionAction/TransactionAction";
 export * from "./TransactionAction/WrapAction";
 export * from "./TransactionItem";
 export * from "./RouteStep";
+export * from "./DropdownMenuTitle";

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

@@ -1,5 +1,9 @@
-/// <reference types="react" />
-import { DropdownPosition } from "../types/components";
+import React from "react";
+export type DropdownPosition = "top" | "bottom" | "center";
+export type DropdownStyles = {
+    position: DropdownPosition;
+    maxHeight: number | null;
+};
 interface UseDropdownMenuParams {
     initialIsModalOpen?: boolean;
     itemsContainerRef?: React.RefObject<HTMLElement>;
@@ -10,7 +14,7 @@ export declare function useDropdownMenu(props?: UseDropdownMenuParams): {
     closeDropdown: () => void;
     dropdownRef: React.RefObject<HTMLDivElement>;
     openDropdownButtonRef: React.RefObject<HTMLButtonElement>;
-    dropdownPosition: DropdownPosition | null;
+    dropdownStyles: DropdownStyles | null;
     itemRef: React.RefObject<HTMLLIElement>;
     menuRef: React.RefObject<HTMLDivElement>;
 };

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

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

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

@@ -3,4 +3,7 @@ import { DropdownMenu } from "../../components/layout/DropdownMenu";
 declare const meta: Meta<typeof DropdownMenu>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
+export declare const Images: Story;
+export declare const Icons: Story;
+export declare const DetailsControlsAndLinks: Story;
+export declare const SubMenu: Story;

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

@@ -1,8 +1,13 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { DropdownMenuItem } from "../../components/lists/DropdownMenuItem";
+import { DropdownMenuItem, DropdownMenuItemProps } from "../../components/lists/DropdownMenuItem";
 declare const meta: Meta<typeof DropdownMenuItem>;
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = Omit<StoryObj<typeof meta>, "args"> & {
+    args: DropdownMenuItemProps;
+};
 export declare const Image: Story;
 export declare const Icon: Story;
 export declare const Link: Story;
+export declare const SwitchControl: Story;
+export declare const Detail: Story;
+export declare const Selected: Story;

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

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

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

@@ -8,4 +8,5 @@ export declare const Pending: Story;
 export declare const Failed: Story;
 export declare const Warning: Story;
 export declare const WithActions: Story;
+export declare const WithActionsSubmenu: Story;
 export declare const IsClickable: Story;

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

@@ -35,8 +35,8 @@ export type InputMode = "token" | "price";
 export type TransactionStateVariant = "full" | "compact" | "small";
 export type TokenPairVariant = "horizontal" | "vertical";
 export type TokenPairSize = "small" | "medium";
-export type ImageIconVariant = "square" | "round" | "proportional";
-export type ImageIconSize = "small" | "medium" | "large" | "xlarge";
+export type ImageVariant = "square" | "round" | "proportional";
+export type ImageSize = "small" | "medium" | "large" | "xlarge";
 export type ChainTypeFilter = "source" | "destination";
 export type StatusFilter = "success" | "ongoing" | "error";
 export type AssetsButtonVariant = "primary" | "accent";

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

@@ -1,2 +1,3 @@
 export type { SquidTheme } from "./config";
+export * from "./utils";
 export type { SwapState, ThemeType, SwapStep, HistoryItemStatus, ActionStatus, AssetsButtonVariant, } from "./components";

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

@@ -0,0 +1,11 @@
+/**
+ * Utility type to allow for a type to be either all of the properties of another type, or none of them
+ * @example
+ * type Person = { age: number } & AllOrNone<{ name: string, lastName: string }>
+ * const person: Person = { age: 30 } // ok
+ * const person: Person = { age: 30, name: "John" } // error, requires lastName
+ * const person: Person = { age: 30, name: "John", lastName: "Doe" } // ok, all properties are present
+ */
+export type AllOrNone<T> = T | {
+    [K in keyof T]?: never;
+};