@0xsquid/ui 0.23.2-beta.1 → 0.23.2-beta.2

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

@@ -1 +1,5 @@
 export declare function BagIcon(): 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/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/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/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,5 @@ export * from './Timeline';
 export * from './TradingViewSteps';
 export * from './TriangleExclamation';
 export * from './Wallet';
+export * from './CrossAnimatedIcon';
+export * from './Weather';

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

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

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/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';