@0xsquid/ui 0.8.2 → 0.9.0

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

@@ -4,5 +4,6 @@ export interface DropdownMenuItemProps {
     labelClassName?: string;
     imageUrl?: string;
     icon?: React.ReactNode;
+    onClick?: () => void;
 }
-export declare function DropdownMenuItem({ label, imageUrl, icon, labelClassName, }: DropdownMenuItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownMenuItem({ label, imageUrl, icon, labelClassName, onClick, }: DropdownMenuItemProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,4 @@
+import { DropdownMenuItemProps } from './DropdownMenuItem';
 interface HistoryItemProps {
     firstImageUrl: string;
     secondImageUrl: string;
@@ -8,6 +9,7 @@ interface HistoryItemProps {
     dateCompleted: string;
     fromAmount: string;
     toAmount: string;
+    dropdownMenuItems?: DropdownMenuItemProps[];
 }
-export declare function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel, }: HistoryItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel, dropdownMenuItems, }: HistoryItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/components/lists/SettingsItem.d.ts

@@ -1,9 +1,13 @@
 /// <reference types="react" />
+import { TooltipProps } from '../controls';
 export interface SettingsItemProps {
     icon: React.ReactNode;
     label: string;
     controls?: React.ReactNode;
     transparentControls?: boolean;
     showHelpIcon?: boolean;
+    link?: string;
+    transparent?: boolean;
+    helpTooltip?: Omit<TooltipProps, 'children'>;
 }
-export declare function SettingsItem({ icon, label, controls, transparentControls, showHelpIcon, }: SettingsItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function SettingsItem({ icon, label, controls, transparentControls, showHelpIcon, link, transparent, helpTooltip, }: SettingsItemProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-export * from './useModal';
+export * from './useDropdownMenu';

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare function useDropdownMenu(props?: {
+    initialIsModalOpen?: boolean;
+}): {
+    isDropdownOpen: boolean;
+    openDropdown: () => void;
+    closeDropdown: () => void;
+    dropdownRef: React.RefObject<HTMLDivElement>;
+    openDropdownButtonRef: React.RefObject<HTMLButtonElement>;
+};

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

@@ -5,5 +5,6 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Empty: Story;
 export declare const ChainOnly: Story;
-export declare const ChainAndToken: Story;
+export declare const ChainAndTokenLightText: Story;
+export declare const ChainAndTokenDarkText: Story;
 export declare const LongTokenSymbol: Story;

package/dist/esm/types/stories/controls/Input.stories.d.ts

@@ -6,3 +6,4 @@ type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const WithoutIcon: Story;
 export declare const WithPasteButton: Story;
+export declare const Error: Story;

package/dist/esm/types/stories/layout/ErrorMessage.stories.d.ts

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof ErrorMessage>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const WithoutIcon: Story;

package/dist/esm/types/stories/layout/InfoBox.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { InfoBox } from '../../components/layout/InfoBox';
+declare const meta: Meta<typeof InfoBox>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithIcon: Story;

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

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Pending: Story;
+export declare const WithActions: Story;

package/dist/esm/types/stories/lists/SettingsItem.stories.d.ts

@@ -7,3 +7,6 @@ export declare const Default: Story;
 export declare const WithControls: Story;
 export declare const WithoutHelpIcon: Story;
 export declare const TransparentControls: Story;
+export declare const Link: Story;
+export declare const Transparent: Story;
+export declare const WithHelpTooltip: Story;

package/dist/index.css

@@ -605,10 +605,6 @@ video {
   left: -5px;
 }
 
-.-tw-left-\[85px\] {
-  left: -85px;
-}
-
 .-tw-right-1\/3 {
   right: -33.333333%;
 }
@@ -633,6 +629,10 @@ video {
   top: -4px;
 }
 
+.-tw-top-\[55px\] {
+  top: -55px;
+}
+
 .-tw-top-full {
   top: -100%;
 }
@@ -649,6 +649,10 @@ video {
   bottom: 0.5rem;
 }
 
+.tw-bottom-7 {
+  bottom: 1.75rem;
+}
+
 .tw-bottom-full {
   bottom: 100%;
 }
@@ -669,8 +673,8 @@ video {
   left: -14px;
 }
 
-.tw-left-\[16px\] {
-  left: 16px;
+.tw-left-\[15px\] {
+  left: 15px;
 }
 
 .tw-left-\[54px\] {
@@ -697,6 +701,14 @@ video {
   right: 1rem;
 }
 
+.tw-right-\[40px\] {
+  right: 40px;
+}
+
+.tw-right-\[calc\(100\%-10px\)\] {
+  right: calc(100% - 10px);
+}
+
 .tw-right-squid-xxs {
   right: 0.3125rem;
 }
@@ -1495,6 +1507,10 @@ video {
   animation: tw-translate-to-top 0.4s ease-in-out both;
 }
 
+.tw-cursor-help {
+  cursor: help;
+}
+
 .tw-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -1503,11 +1519,6 @@ video {
   cursor: pointer;
 }
 
-.tw-scroll-px-5 {
-  scroll-padding-left: 1.25rem;
-  scroll-padding-right: 1.25rem;
-}
-
 .tw-grid-cols-\[180px_1fr_299px\] {
   grid-template-columns: 180px 1fr 299px;
 }
@@ -1632,10 +1643,6 @@ video {
   border-radius: 1rem;
 }
 
-.tw-rounded-\[25px\] {
-  border-radius: 25px;
-}
-
 .tw-rounded-full {
   border-radius: 9999px;
 }
@@ -1998,11 +2005,6 @@ video {
   padding-right: 1rem;
 }
 
-.tw-px-5 {
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
-}
-
 .tw-px-\[3px\] {
   padding-left: 3px;
   padding-right: 3px;
@@ -2228,6 +2230,10 @@ video {
   line-height: 1rem;
 }
 
+.\!tw-font-medium {
+  font-weight: 500 !important;
+}
+
 .tw-font-heading-bold {
   font-weight: 600;
 }
@@ -2455,6 +2461,10 @@ video {
   outline-color: var(--squid-theme-material-light-thin);
 }
 
+.tw-outline-status-negative {
+  outline-color: var(--squid-theme-status-negative);
+}
+
 .tw-backdrop-blur-2xl {
   --tw-backdrop-blur: blur(40px);
   -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
@@ -2503,6 +2513,10 @@ video {
   transition-duration: 150ms;
 }
 
+.tw-duration-200 {
+  transition-duration: 200ms;
+}
+
 .tw-duration-300 {
   transition-duration: 300ms;
 }
@@ -2575,6 +2589,10 @@ li {
   background-color: var(--squid-theme-material-light-thin);
 }
 
+.hover\:tw-text-grey-400:hover {
+  color: var(--squid-theme-grey-400);
+}
+
 .focus\:tw-bg-material-light-thin:focus {
   background-color: var(--squid-theme-material-light-thin);
 }

package/dist/index.d.ts

@@ -12,6 +12,11 @@ interface BadgeImageProps {
 type BadgeSize = 'sm' | 'md';
 declare function BadgeImage({ imageUrl, badgeUrl, size, extraMarginForBadge, rounded, }: BadgeImageProps): react_jsx_runtime.JSX.Element | null;
 
+declare function LoadingSkeleton({ className, height, }: {
+    className?: string;
+    height?: string;
+}): react_jsx_runtime.JSX.Element;
+
 interface UsdAmountProps {
     usdAmount: string;
 }
@@ -101,8 +106,10 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     showIcon?: boolean;
     showPasteButton?: boolean;
     icon?: React.ReactNode;
+    isError?: boolean;
+    onPasteButtonClick?: () => void;
 }
-declare function Input({ placeholder, showIcon, showPasteButton, className, icon, ...props }: InputProps): react_jsx_runtime.JSX.Element;
+declare function Input({ placeholder, showIcon, showPasteButton, className, icon, isError, onPasteButtonClick, ...props }: InputProps): react_jsx_runtime.JSX.Element;
 
 interface Props extends InputHTMLAttributes<HTMLInputElement> {
     onParsedValueChanged: (value: string) => void;
@@ -178,8 +185,9 @@ interface DropdownMenuItemProps {
     labelClassName?: string;
     imageUrl?: string;
     icon?: React.ReactNode;
+    onClick?: () => void;
 }
-declare function DropdownMenuItem({ label, imageUrl, icon, labelClassName, }: DropdownMenuItemProps): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuItem({ label, imageUrl, icon, labelClassName, onClick, }: DropdownMenuItemProps): react_jsx_runtime.JSX.Element;
 
 interface HistoryItemProps {
     firstImageUrl: string;
@@ -191,8 +199,9 @@ interface HistoryItemProps {
     dateCompleted: string;
     fromAmount: string;
     toAmount: string;
+    dropdownMenuItems?: DropdownMenuItemProps[];
 }
-declare function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel, }: HistoryItemProps): react_jsx_runtime.JSX.Element;
+declare function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel, dropdownMenuItems, }: HistoryItemProps): react_jsx_runtime.JSX.Element;
 
 interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
     itemTitle: string | React.ReactNode;
@@ -238,8 +247,11 @@ interface SettingsItemProps {
     controls?: React.ReactNode;
     transparentControls?: boolean;
     showHelpIcon?: boolean;
+    link?: string;
+    transparent?: boolean;
+    helpTooltip?: Omit<TooltipProps, 'children'>;
 }
-declare function SettingsItem({ icon, label, controls, transparentControls, showHelpIcon, }: SettingsItemProps): react_jsx_runtime.JSX.Element;
+declare function SettingsItem({ icon, label, controls, transparentControls, showHelpIcon, link, transparent, helpTooltip, }: SettingsItemProps): react_jsx_runtime.JSX.Element;
 
 interface SwapDetailListItemProps {
     label: string;
@@ -260,14 +272,26 @@ declare function SwapStepItem({ descriptionBlocks, chipContent, showStepSeparato
 
 interface DropdownMenuProps {
     dropdownRef?: React.RefObject<HTMLDivElement>;
+    menuRef?: React.RefObject<HTMLDivElement>;
     items: DropdownMenuItemProps[];
     className?: string;
+    isHidden?: boolean;
+    listClassName?: string;
 }
-declare function DropdownMenu({ dropdownRef, items, className, }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
+declare function DropdownMenu({ dropdownRef, items, className, menuRef, isHidden, listClassName, }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
 
-declare function ErrorMessage({ message }: {
+type ErrorMessageProps = {
     message: string;
-}): react_jsx_runtime.JSX.Element;
+    showIcon?: boolean;
+};
+declare function ErrorMessage({ message, showIcon }: ErrorMessageProps): react_jsx_runtime.JSX.Element;
+
+interface InfoBoxProps {
+    title: string;
+    description: string;
+    icon?: React.ReactNode;
+}
+declare function InfoBox({ title, description, icon }: InfoBoxProps): react_jsx_runtime.JSX.Element;
 
 type Rounded = 'sm' | 'lg';
 interface MenuProps extends React$1.ComponentProps<'div'> {
@@ -276,8 +300,9 @@ interface MenuProps extends React$1.ComponentProps<'div'> {
     title?: string;
     displayControls?: boolean;
     rounded?: Rounded;
+    menuRef?: React$1.RefObject<HTMLDivElement>;
 }
-declare function Menu({ children, containerClassName, contentClassName, title, displayControls, rounded, ...props }: MenuProps): react_jsx_runtime.JSX.Element;
+declare function Menu({ children, containerClassName, contentClassName, title, displayControls, rounded, menuRef, ...props }: MenuProps): react_jsx_runtime.JSX.Element;
 
 interface ModalProps {
     children: React.ReactNode;
@@ -302,6 +327,8 @@ declare function NavigationBar({ title, displayBackButton, logoUrl, transparent,
 
 declare function ProductCard({ children }: React.PropsWithChildren): react_jsx_runtime.JSX.Element;
 
+declare function ProfileHeaderBackground(): react_jsx_runtime.JSX.Element;
+
 interface SwapConfigurationProps {
     direction: SwapDirection;
     priceImpactPercentage?: string;
@@ -329,8 +356,9 @@ interface SwapConfigurationProps {
         message: string;
     };
     criticalPriceImpactPercentage?: number;
+    emptyAddressLabel?: string;
 }
-declare function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, address, error, criticalPriceImpactPercentage, }: SwapConfigurationProps): react_jsx_runtime.JSX.Element;
+declare function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, address, error, criticalPriceImpactPercentage, emptyAddressLabel, }: SwapConfigurationProps): react_jsx_runtime.JSX.Element;
 
 interface SwapProgressViewHeaderProps {
     title: string;
@@ -416,14 +444,14 @@ declare function SquidConfigProvider({ theme, children, themeType, }: {
     themeType?: ThemeType;
 }): react_jsx_runtime.JSX.Element;
 
-declare function useModal(props?: {
+declare function useDropdownMenu(props?: {
     initialIsModalOpen?: boolean;
 }): {
-    isModalOpen: boolean;
-    openModal: () => void;
-    closeModal: () => void;
-    modalRef: React.RefObject<HTMLDivElement>;
-    openModalButtonRef: React.RefObject<HTMLButtonElement>;
+    isDropdownOpen: boolean;
+    openDropdown: () => void;
+    closeDropdown: () => void;
+    dropdownRef: React.RefObject<HTMLDivElement>;
+    openDropdownButtonRef: React.RefObject<HTMLButtonElement>;
 };
 
-export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, ErrorMessage, FeeButton, HeadingText, HistoryItem, Input, ListItem, Menu, MenuItem, Modal, NavigationBar, NumericInput, ProductCard, SectionTitle, SettingsButton, type SettingsButtonProps, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SquidConfigProvider, type SquidTheme, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, type TooltipThreshold, type TooltipWidth, UsdAmount, useModal };
+export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, ErrorMessage, FeeButton, HeadingText, HistoryItem, InfoBox, Input, ListItem, LoadingSkeleton, Menu, MenuItem, Modal, NavigationBar, NumericInput, ProductCard, ProfileHeaderBackground, SectionTitle, SettingsButton, type SettingsButtonProps, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SquidConfigProvider, type SquidTheme, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, UsdAmount, useDropdownMenu };

package/package.json

@@ -5,7 +5,7 @@
     "url": "git+https://github.com/0xsquid/squid-ui.git"
   },
   "description": "Squid's UI components",
-  "version": "0.8.2",
+  "version": "0.9.0",
   "author": "",
   "license": "MIT",
   "scripts": {

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

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-export declare function useModal(props?: {
-    initialIsModalOpen?: boolean;
-}): {
-    isModalOpen: boolean;
-    openModal: () => void;
-    closeModal: () => void;
-    modalRef: React.RefObject<HTMLDivElement>;
-    openModalButtonRef: React.RefObject<HTMLButtonElement>;
-};

package/dist/esm/types/hooks/useModal.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-export declare function useModal(props?: {
-    initialIsModalOpen?: boolean;
-}): {
-    isModalOpen: boolean;
-    openModal: () => void;
-    closeModal: () => void;
-    modalRef: React.RefObject<HTMLDivElement>;
-    openModalButtonRef: React.RefObject<HTMLButtonElement>;
-};