@0xsquid/ui 0.8.3 → 0.9.1

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { TooltipProps } from '../controls';
 export interface SettingsItemProps {
     icon: React.ReactNode;
     label: string;
@@ -6,5 +7,7 @@ export interface SettingsItemProps {
     transparentControls?: boolean;
     showHelpIcon?: boolean;
     link?: string;
+    transparent?: boolean;
+    helpTooltip?: Omit<TooltipProps, 'children'>;
 }
-export declare function SettingsItem({ icon, label, controls, transparentControls, showHelpIcon, link, }: 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/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/layout/ModalContent.stories.d.ts

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

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

@@ -7,5 +7,6 @@ export declare const Default: Story;
 export declare const Title: Story;
 export declare const BackButton: Story;
 export declare const Logo: Story;
+export declare const WithActions: Story;
 export declare const AllProps: Story;
 export declare const Transparent: 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

@@ -8,3 +8,5 @@ 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;
 }
@@ -908,10 +920,6 @@ video {
   height: 46px;
 }
 
-.tw-h-\[470px\] {
-  height: 470px;
-}
-
 .tw-h-\[50px\] {
   height: 50px;
 }
@@ -1000,10 +1008,6 @@ video {
   max-height: 540px;
 }
 
-.tw-max-h-\[570px\] {
-  max-height: 570px;
-}
-
 .tw-max-h-\[600px\] {
   max-height: 600px;
 }
@@ -1495,6 +1499,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;
 }
@@ -1627,10 +1635,6 @@ video {
   border-radius: 1rem;
 }
 
-.tw-rounded-\[25px\] {
-  border-radius: 25px;
-}
-
 .tw-rounded-full {
   border-radius: 9999px;
 }
@@ -1808,6 +1812,11 @@ video {
   background-color: var(--squid-theme-royal-400) !important;
 }
 
+.tw-bg-\[\#FBFBFD\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(251 251 253 / var(--tw-bg-opacity));
+}
+
 .tw-bg-blue-950 {
   --tw-bg-opacity: 1;
   background-color: rgb(23 37 84 / var(--tw-bg-opacity));
@@ -2218,6 +2227,10 @@ video {
   line-height: 1rem;
 }
 
+.\!tw-font-medium {
+  font-weight: 500 !important;
+}
+
 .tw-font-heading-bold {
   font-weight: 600;
 }
@@ -2497,6 +2510,10 @@ video {
   transition-duration: 150ms;
 }
 
+.tw-duration-200 {
+  transition-duration: 200ms;
+}
+
 .tw-duration-300 {
   transition-duration: 300ms;
 }
@@ -2569,6 +2586,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);
 }
@@ -2577,6 +2598,10 @@ li {
   color: var(--squid-theme-royal-400);
 }
 
+.focus\:tw-opacity-100:focus {
+  opacity: 1;
+}
+
 .focus\:tw-outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -2627,6 +2652,10 @@ li {
   display: block;
 }
 
+.tw-peer:focus ~ .peer-focus\:tw-opacity-0 {
+  opacity: 0;
+}
+
 .aria-disabled\:tw-bg-grey-600[aria-disabled="true"] {
   background-color: var(--squid-theme-grey-600);
 }

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,10 +106,10 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     showIcon?: boolean;
     showPasteButton?: boolean;
     icon?: React.ReactNode;
-    error?: string;
+    isError?: boolean;
     onPasteButtonClick?: () => void;
 }
-declare function Input({ placeholder, showIcon, showPasteButton, className, icon, error, onPasteButtonClick, ...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;
@@ -180,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;
@@ -193,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;
@@ -241,8 +248,10 @@ interface SettingsItemProps {
     transparentControls?: boolean;
     showHelpIcon?: boolean;
     link?: string;
+    transparent?: boolean;
+    helpTooltip?: Omit<TooltipProps, 'children'>;
 }
-declare function SettingsItem({ icon, label, controls, transparentControls, showHelpIcon, link, }: 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;
@@ -263,10 +272,13 @@ 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;
 
 type ErrorMessageProps = {
     message: string;
@@ -274,6 +286,13 @@ type ErrorMessageProps = {
 };
 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'> {
     containerClassName?: string;
@@ -281,17 +300,23 @@ 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;
     className?: string;
     onBackdropClick?: () => void;
     isOpen?: boolean;
+    maxHeight?: boolean;
 }
-declare function Modal({ children, className, onBackdropClick, isOpen: _isOpen, }: ModalProps): false | react_jsx_runtime.JSX.Element;
+declare function Modal({ children, className, onBackdropClick, isOpen: _isOpen, maxHeight, }: ModalProps): false | react_jsx_runtime.JSX.Element;
 
+type ActionButton = {
+    labelOrIcon: string | React.ReactNode;
+    onClick?: () => void;
+};
 interface NavigationBarProps {
     title?: string;
     displayBackButton?: boolean;
@@ -299,11 +324,9 @@ interface NavigationBarProps {
     transparent?: boolean;
     displayButtonShadows?: boolean;
     onBackButtonClick?: () => void;
-    onAddressButtonClick?: () => void;
-    label?: string;
-    isLoading?: boolean;
+    actions?: ActionButton[];
 }
-declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, onBackButtonClick, label, onAddressButtonClick, isLoading, }: NavigationBarProps): react_jsx_runtime.JSX.Element;
+declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, onBackButtonClick, actions, }: NavigationBarProps): react_jsx_runtime.JSX.Element;
 
 declare function ProductCard({ children }: React.PropsWithChildren): react_jsx_runtime.JSX.Element;
 
@@ -424,14 +447,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, ProfileHeaderBackground, 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.3",
+  "version": "0.9.1",
   "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>;
-};