@0xsquid/ui 0.23.2 → 0.24.0

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

@@ -1,11 +1,6 @@
 import { ReactNode } from 'react';
 import { ActionStatus, TransactionStateVariant } from '../../types/components';
-export declare const statusBgClassMap: Record<ActionStatus, string>;
 export declare const statusTextClassMap: Record<ActionStatus, string>;
-export declare const statusColorClassMap: {
-    bg: Record<ActionStatus, string>;
-    text: Record<ActionStatus, string>;
-};
 interface TransactionStateProps extends React.HTMLAttributes<HTMLDivElement> {
     status: ActionStatus;
     variant?: TransactionStateVariant;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface IconButtonProps extends React.ComponentProps<'button'> {
+    icon: React.ReactNode;
+}
+export declare const IconButton: ({ icon, ...props }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

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

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

@@ -14,3 +14,15 @@ export declare function CirclePlusIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function CircleXFilledIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TranslateIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function PowerIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare function CrossAnimatedIcon({ size, isOpen, transitionDuration, className, }: {
+    size?: number;
+    isOpen?: boolean;
+    transitionDuration?: React.CSSProperties['transitionDuration'];
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,10 @@
+interface DockIconProps {
+    isSelected?: boolean;
+}
+export declare function DockIconSwap({ isSelected }: DockIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function DockIconCheckout({ isSelected }: DockIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function DockIconScan({ isSelected }: DockIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function DockIconAnalytics({ isSelected }: DockIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function DockIconProfile({ isSelected }: DockIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function DockIconHelp({ isSelected }: DockIconProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -6,3 +6,7 @@ export declare function EmojiMeh({ className, size, }: {
     className?: string;
     size?: string;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function SmileIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,19 @@
 export declare function HomeIcon({ className }: {
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function MenuSwapIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ColorPaletteIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ConsoleIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function BubblesIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -2,3 +2,15 @@ export declare function XSocial({ className, size, }: {
     size?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function GithubIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function DiscordIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MirrorIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

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

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

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

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

@@ -0,0 +1,12 @@
+export declare function SunriseIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function SunIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MoonIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -49,3 +49,6 @@ export * from './Timeline';
 export * from './TradingViewSteps';
 export * from './TriangleExclamation';
 export * from './Wallet';
+export * from './CrossAnimatedIcon';
+export * from './Weather';
+export * from './DockIcons';

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

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+interface CollapsibleMenuProps {
+    menuRef: React.MutableRefObject<HTMLDivElement | null>;
+    size: {
+        open: {
+            width: string;
+            height: string;
+        };
+        closed: {
+            width: string;
+            height: string;
+        };
+    };
+    children?: React.ReactNode;
+    isOpen?: boolean;
+    transitionDuration?: React.CSSProperties['transitionDuration'];
+    className?: string;
+}
+export declare function CollapsibleMenu({ children, menuRef, isOpen, transitionDuration, size, className, }: CollapsibleMenuProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -15,6 +15,7 @@ export * from './Modal';
 export * from './ModalContent';
 export * from './NavigationBar';
 export * from './PipeSeparator';
+export * from './CollapsibleMenu';
 export * from './ProductCard';
 export * from './ProfileHeaderBackground';
 export * from './SwapConfiguration';

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

@@ -1,14 +1,16 @@
 import { ReactNode } from 'react';
 import { ActionStatus } from '../../types/components';
+type TransactionItemVariant = 'compact' | 'full';
+type TransactionItemType = {
+    icon?: ReactNode;
+    name: string;
+};
 interface TransactionItemProps {
     className?: string;
     isLoading?: boolean;
     status?: ActionStatus;
     image?: ReactNode;
-    type?: {
-        icon?: ReactNode;
-        name: string;
-    };
+    type?: TransactionItemType;
     hash?: string;
     fromChain?: {
         logoURI: string;
@@ -21,6 +23,7 @@ interface TransactionItemProps {
     fromAmount?: string;
     toAmount?: string;
     timestamp?: number;
+    variant?: TransactionItemVariant;
 }
-export declare function TransactionItem({ className, isLoading, status, image, type, hash, fromChain, toChain, fromAmount, toAmount, timestamp, }: TransactionItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function TransactionItem({ className, isLoading, status, image, type, hash, fromChain, toChain, fromAmount, toAmount, timestamp, variant, }: TransactionItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -14,6 +14,10 @@ export declare const CSS_VARS: {
     SLIDE_TO_BOTTOM_DURATION: string;
     BLUR_IN_DURATION: string;
     BLUR_OUT_DURATION: string;
+    COLLAPSIBLE_MENU_OPEN_WIDTH: string;
+    COLLAPSIBLE_MENU_OPEN_HEIGHT: string;
+    COLLAPSIBLE_MENU_CLOSED_WIDTH: string;
+    COLLAPSIBLE_MENU_CLOSED_HEIGHT: string;
 };
 export declare const ANIMATION_DURATIONS: {
     SHOW_ROUTE: number;

package/dist/cjs/types/core/design-system.d.ts

@@ -0,0 +1,2 @@
+import type { Config } from 'tailwindcss';
+export declare const baseTailwindConfig: Config;

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

@@ -1,2 +1,4 @@
-export { MEDIA_QUERIES } from './constants';
+export { MEDIA_QUERIES, CSS_VARS } from './constants';
 export { darkTheme, lightTheme } from './themes';
+export { baseTailwindConfig } from './design-system';
+export { cn } from './utils';

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

@@ -1,2 +1,6 @@
 export * from './useDropdownMenu';
 export * from './useMediaQuery';
+export * from './useCollapsibleMenu';
+export * from './useRect';
+export * from './useVersion';
+export * from './useTimer';

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare function useCollapsibleMenu(): {
+    isMenuOpen: boolean;
+    toggleMenu: () => void;
+    menuRef: import("react").RefObject<HTMLDivElement>;
+};

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

@@ -5,11 +5,16 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Success: Story;
 export declare const SuccessCompact: Story;
+export declare const SuccessSmall: Story;
 export declare const Fail: Story;
 export declare const FailCompact: Story;
+export declare const FailSmall: Story;
 export declare const Processing: Story;
 export declare const ProcessingCompact: Story;
+export declare const ProcessingSmall: Story;
 export declare const Waiting: Story;
 export declare const WaitingCompact: Story;
+export declare const WaitingSmall: Story;
 export declare const Incomplete: Story;
 export declare const IncompleteCompact: Story;
+export declare const IncompleteSmall: Story;

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

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

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

@@ -4,7 +4,12 @@ declare const meta: Meta<typeof TransactionItem>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Swap: Story;
+export declare const SwapCompact: Story;
 export declare const NFT: Story;
+export declare const NFTCompact: Story;
 export declare const Bridge: Story;
+export declare const BridgeCompact: Story;
 export declare const Approve: Story;
+export declare const ApproveCompact: Story;
 export declare const Loading: Story;
+export declare const LoadingCompact: Story;

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

@@ -32,7 +32,7 @@ export type DetailsToolbarState = 'full' | 'loading' | 'empty' | 'error';
 export type ThemeType = 'light' | 'dark';
 export type ActionStatus = 'pending' | 'waiting' | 'ongoing' | 'executed' | 'success' | 'error' | 'warning';
 export type InputMode = 'token' | 'price';
-export type TransactionStateVariant = 'full' | 'compact';
+export type TransactionStateVariant = 'full' | 'compact' | 'small';
 export type TokenPairVariant = 'horizontal' | 'vertical';
 export type TokenPairSize = 'small' | 'medium';
 export type ImageIconVariant = 'square' | 'round' | 'proportional';

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

@@ -2,30 +2,8 @@
  * The color format must be of type #FFFFFF
  */
 export type ColorType = `#${string}${string}${string}${string}${string}${string}`;
-export interface InternalSquidTheme {
-    'grey-100': string;
-    'grey-200': string;
-    'grey-300': string;
-    'grey-400': string;
-    'grey-500': string;
-    'grey-600': string;
-    'grey-700': string;
-    'grey-800': string;
-    'grey-900': string;
-    'royal-400': string;
-    'royal-500': string;
-    'status-positive': string;
-    'status-negative': string;
-    'status-partial': string;
-    'material-light-thin': string;
-    'material-light-average': string;
-    'material-light-thick': string;
-    'material-dark-thin': string;
-    'material-dark-average': string;
-    'material-dark-thick': string;
-    'grey-100-005': string;
-    'material-light-blend-grey-900': string;
-}
+declare const INTERNAL_SQUID_THEME_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-700", "status-positive", "status-negative", "status-partial", "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", "volt-700"];
+export type InternalSquidTheme = Record<(typeof INTERNAL_SQUID_THEME_KEYS)[number], string>;
 export type SquidTheme = {
     'content-100': string;
     'content-200': string;
@@ -36,11 +14,14 @@ export type SquidTheme = {
     'content-700': string;
     'content-800': string;
     'content-900': string;
+    'accent-300': string;
     'accent-400': string;
     'accent-500': string;
+    'accent-700': string;
     'status-positive': string;
     'status-negative': string;
     'status-warning': string;
+    'highlight-700': string;
 };
 export declare const SQUID_THEME_CSS_VARIABLE_PREFIX = "--squid-theme-";
 /**
@@ -49,3 +30,4 @@ export declare const SQUID_THEME_CSS_VARIABLE_PREFIX = "--squid-theme-";
 export declare const themeTypesKeys: Record<keyof InternalSquidTheme, {
     cssVariable: string;
 }>;
+export {};