Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@0xsquid/ui

Package Overview
Dependencies
Maintainers
3
Versions
176
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@0xsquid/ui - npm Package Compare versions

Comparing version 0.8.3 to 0.9.0

dist/cjs/types/components/layout/InfoBox.d.ts
dist/cjs/types/hooks/useDropdownMenu.d.ts
dist/cjs/types/stories/layout/InfoBox.stories.d.ts
dist/esm/types/components/layout/InfoBox.d.ts
dist/esm/types/hooks/useDropdownMenu.d.ts
dist/esm/types/stories/layout/InfoBox.stories.d.ts

1

dist/cjs/types/components/badges/index.d.ts
export * from './BadgeImage';
export * from './LoadingSkeleton';
export * from './UsdAmount';

4

dist/cjs/types/components/controls/Input.d.ts

@@ -7,6 +7,6 @@ /// <reference types="react" />

icon?: React.ReactNode;
error?: string;
isError?: boolean;
onPasteButtonClick?: () => void;
}
export declare function Input({ placeholder, showIcon, showPasteButton, className, icon, error, onPasteButtonClick, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
export declare function Input({ placeholder, showIcon, showPasteButton, className, icon, isError, onPasteButtonClick, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
export {};

3

dist/cjs/types/components/controls/Tooltip.d.ts
import React from 'react';
export type TooltipWidth = 'max' | 'container';
export type TooltipThreshold = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
interface TooltipProps {
export interface TooltipProps {
children: React.ReactNode;

@@ -14,2 +14,1 @@ tooltipContent: React.ReactNode;

export declare function Tooltip({ children, tooltipContent, tooltipWidth, threshold, containerClassName, childrenClassName, tooltipClassName, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
export {};

5

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

@@ -5,6 +5,9 @@ /// <reference types="react" />

dropdownRef?: React.RefObject<HTMLDivElement>;
menuRef?: React.RefObject<HTMLDivElement>;
items: DropdownMenuItemProps[];
className?: string;
isHidden?: boolean;
listClassName?: string;
}
export declare function DropdownMenu({ dropdownRef, items, className, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
export declare function DropdownMenu({ dropdownRef, items, className, menuRef, isHidden, listClassName, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
export {};

1

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

@@ -5,2 +5,3 @@ export * from './Boost';

export * from './ErrorMessage';
export * from './InfoBox';
export * from './Menu';

@@ -7,0 +8,0 @@ export * from './Modal';

3

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

@@ -9,4 +9,5 @@ import React from 'react';

rounded?: Rounded;
menuRef?: React.RefObject<HTMLDivElement>;
}
export declare function Menu({ children, containerClassName, contentClassName, title, displayControls, rounded, ...props }: MenuProps): import("react/jsx-runtime").JSX.Element;
export declare function Menu({ children, containerClassName, contentClassName, title, displayControls, rounded, menuRef, ...props }: MenuProps): import("react/jsx-runtime").JSX.Element;
export {};

3

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

@@ -7,3 +7,4 @@ /// <reference types="react" />

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;

4

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

@@ -0,1 +1,2 @@

import { DropdownMenuItemProps } from './DropdownMenuItem';
interface HistoryItemProps {

@@ -11,4 +12,5 @@ firstImageUrl: 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 {};

5

dist/cjs/types/components/lists/SettingsItem.d.ts
/// <reference types="react" />
import { TooltipProps } from '../controls';
export interface SettingsItemProps {

@@ -9,3 +10,5 @@ icon: React.ReactNode;

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;

2

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

@@ -1,1 +0,1 @@

export * from './useModal';
export * from './useDropdownMenu';

3

dist/cjs/types/stories/buttons/AssetsButton.stories.d.ts

@@ -8,3 +8,4 @@ import { Meta, StoryObj } from '@storybook/react';

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;

1

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

@@ -8,1 +8,2 @@ import { Meta, StoryObj } from '@storybook/react';

export declare const Pending: Story;
export declare const WithActions: Story;

2

dist/cjs/types/stories/lists/SettingsItem.stories.d.ts

@@ -11,1 +11,3 @@ import { Meta, StoryObj } from '@storybook/react';

export declare const Link: Story;
export declare const Transparent: Story;
export declare const WithHelpTooltip: Story;

1

dist/esm/types/components/badges/index.d.ts
export * from './BadgeImage';
export * from './LoadingSkeleton';
export * from './UsdAmount';

4

dist/esm/types/components/controls/Input.d.ts

@@ -7,6 +7,6 @@ /// <reference types="react" />

icon?: React.ReactNode;
error?: string;
isError?: boolean;
onPasteButtonClick?: () => void;
}
export declare function Input({ placeholder, showIcon, showPasteButton, className, icon, error, onPasteButtonClick, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
export declare function Input({ placeholder, showIcon, showPasteButton, className, icon, isError, onPasteButtonClick, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
export {};

3

dist/esm/types/components/controls/Tooltip.d.ts
import React from 'react';
export type TooltipWidth = 'max' | 'container';
export type TooltipThreshold = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
interface TooltipProps {
export interface TooltipProps {
children: React.ReactNode;

@@ -14,2 +14,1 @@ tooltipContent: React.ReactNode;

export declare function Tooltip({ children, tooltipContent, tooltipWidth, threshold, containerClassName, childrenClassName, tooltipClassName, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
export {};

5

dist/esm/types/components/layout/DropdownMenu.d.ts

@@ -5,6 +5,9 @@ /// <reference types="react" />

dropdownRef?: React.RefObject<HTMLDivElement>;
menuRef?: React.RefObject<HTMLDivElement>;
items: DropdownMenuItemProps[];
className?: string;
isHidden?: boolean;
listClassName?: string;
}
export declare function DropdownMenu({ dropdownRef, items, className, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
export declare function DropdownMenu({ dropdownRef, items, className, menuRef, isHidden, listClassName, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
export {};

1

dist/esm/types/components/layout/index.d.ts

@@ -5,2 +5,3 @@ export * from './Boost';

export * from './ErrorMessage';
export * from './InfoBox';
export * from './Menu';

@@ -7,0 +8,0 @@ export * from './Modal';

3

dist/esm/types/components/layout/Menu.d.ts

@@ -9,4 +9,5 @@ import React from 'react';

rounded?: Rounded;
menuRef?: React.RefObject<HTMLDivElement>;
}
export declare function Menu({ children, containerClassName, contentClassName, title, displayControls, rounded, ...props }: MenuProps): import("react/jsx-runtime").JSX.Element;
export declare function Menu({ children, containerClassName, contentClassName, title, displayControls, rounded, menuRef, ...props }: MenuProps): import("react/jsx-runtime").JSX.Element;
export {};

3

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

@@ -7,3 +7,4 @@ /// <reference types="react" />

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;

4

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

@@ -0,1 +1,2 @@

import { DropdownMenuItemProps } from './DropdownMenuItem';
interface HistoryItemProps {

@@ -11,4 +12,5 @@ firstImageUrl: 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 {};

5

dist/esm/types/components/lists/SettingsItem.d.ts
/// <reference types="react" />
import { TooltipProps } from '../controls';
export interface SettingsItemProps {

@@ -9,3 +10,5 @@ icon: React.ReactNode;

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;

2

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

@@ -1,1 +0,1 @@

export * from './useModal';
export * from './useDropdownMenu';

3

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

@@ -8,3 +8,4 @@ import { Meta, StoryObj } from '@storybook/react';

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;

1

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

@@ -8,1 +8,2 @@ import { Meta, StoryObj } from '@storybook/react';

export declare const Pending: Story;
export declare const WithActions: Story;

2

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

@@ -11,1 +11,3 @@ import { Meta, StoryObj } from '@storybook/react';

export declare const Link: Story;
export declare const Transparent: Story;
export declare const WithHelpTooltip: Story;

48

dist/index.d.ts

@@ -15,2 +15,7 @@ /// <reference types="react" />

declare function LoadingSkeleton({ className, height, }: {
className?: string;
height?: string;
}): react_jsx_runtime.JSX.Element;
interface UsdAmountProps {

@@ -105,6 +110,6 @@ usdAmount: string;

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;

@@ -185,4 +190,5 @@ interface Props extends InputHTMLAttributes<HTMLInputElement> {

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;

@@ -199,4 +205,5 @@ interface HistoryItemProps {

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;

@@ -248,4 +255,6 @@ interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {

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;

@@ -271,6 +280,9 @@ interface SwapDetailListItemProps {

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;

@@ -283,2 +295,9 @@ type ErrorMessageProps = {

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

@@ -291,4 +310,5 @@ interface MenuProps extends React$1.ComponentProps<'div'> {

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;

@@ -435,12 +455,12 @@ interface ModalProps {

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 };

2

package.json

@@ -8,3 +8,3 @@ {

"description": "Squid's UI components",
"version": "0.8.3",
"version": "0.9.0",
"author": "",

@@ -11,0 +11,0 @@ "license": "MIT",

22

README.md

@@ -74,2 +74,24 @@ # Squid UI

### Folder structure
```
- src
- index.ts <- barrel file
- components
- index.ts <- barrel file
- buttons
- index.ts <- barrel file
- Button.tsx
- lists
- index.ts <- barrel file
- HistoryItem.tsx
- stories
- buttons
- Button.stories.tsx
- lists
- HistoryItem.stories.tsx
```
When creating a new component, don't forget to update the barrel file, exporting your component in the `index.ts` file in the corresponding component folder. You can also install the [AutoBarrel VSCode extension](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-auto-barrel).
### Images

@@ -76,0 +98,0 @@ 

dist/cjs/types/hooks/useModal.d.ts
dist/esm/types/hooks/useModal.d.ts
dist/cjs/index.js

Sorry, the diff of this file is too big to display

dist/esm/index.js

Sorry, the diff of this file is too big to display

dist/index.css

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc