@0xsquid/ui 0.27.5 → 0.27.7-beta.0

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

@@ -1,5 +1,5 @@
-import { AssetsButtonVariant } from "../../types/components";
-import { TooltipProps } from "../controls";
+import { type AssetsButtonVariant } from "../../types/components";
+import { type TooltipProps } from "../controls";
 interface AssetsButtonProps {
     token?: {
         iconUrl: string;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { ButtonSize, ButtonVariant } from "../../types/components";
-import { ChipProps } from "./Chip";
+import { type ButtonSize, type ButtonVariant } from "../../types/components";
+import { type ChipProps } from "./Chip";
 interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     label?: string;
     icon?: React.ReactNode;
@@ -11,6 +11,8 @@ interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     isLoading?: boolean;
     chip?: ChipProps;
     containerClassName?: string;
+    buttonRef?: React.Ref<HTMLButtonElement>;
+    anchorRef?: React.Ref<HTMLAnchorElement>;
 }
-export declare function Button({ label, disabled, size, variant, icon, link, isLoading, chip, containerClassName, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ label, disabled, size, variant, icon, link, isLoading, chip, containerClassName, anchorRef, buttonRef, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ButtonVariant } from "../../types/components";
+import { type ButtonVariant } from "../../types/components";
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     placeholder?: string;
     showIcon?: boolean;
@@ -12,9 +12,9 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     inputRef?: React.RefObject<HTMLInputElement>;
 }
 export declare function Input({ placeholder, showIcon, className, icon, isError, isWarning, containerClassName, actionButtonProps, autoFocusTimeout, inputRef: inputRefProp, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
-type InputActionButtonProps = {
+interface InputActionButtonProps {
     onClick?: () => void;
     variant?: ButtonVariant;
     label?: string;
-};
+}
 export {};

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { SwapDirection } from "../../types/components";
-import { TooltipProps } from "./Tooltip";
+import { type SwapDirection } from "../../types/components";
+import { type TooltipProps } from "./Tooltip";
 interface Token {
     price: number;
     symbol: string;

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

@@ -38,3 +38,47 @@ export declare function FilterTimelineIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function NewspaperIcon({ className, size, }: {
+    className?: string;
+    size?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function AtomIcon({ className, size, }: {
+    className?: string;
+    size?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function SunriseSmallIcon({ className, size, }: {
+    className?: string;
+    size?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function CoinsOutlinedIcon({ className, size, }: {
+    className?: string;
+    size?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function PhoneIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function LaptopIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function CopyIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function FileDownloadIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function CodeSolidSquareIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function CodeBracketsIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function CommandIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -10,3 +10,11 @@ export declare function MoonIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function SunOutlinedIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function CrossedOutSunSolidIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import { ReactNode } from "react";
 interface InfoBoxProps {
     title: string;
-    description: string;
-    icon?: React.ReactNode;
+    description: string | ReactNode;
+    icon?: ReactNode;
 }
 export declare function InfoBox({ title, description, icon }: InfoBoxProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -46,6 +46,7 @@ interface SwapConfigurationProps {
         emptyAddressLabel?: string;
         disabled?: boolean;
     };
+    showNumericInputDetails?: boolean;
 }
-export declare function SwapConfiguration({ amount, tokenPrice, isFetching: isFetchingProp, chain, token, direction, onAmountChange, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, maxUsdDecimals, isInputInteractive, isLoading, inputModeButton, balanceButton, assetsButton, walletButton, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
+export declare function SwapConfiguration({ amount, tokenPrice, isFetching: isFetchingProp, chain, token, direction, onAmountChange, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, maxUsdDecimals, isInputInteractive, isLoading, inputModeButton, balanceButton, assetsButton, walletButton, showNumericInputDetails, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
-import { TextSize } from "../../types/components";
+import { type ReactNode } from "react";
+import { type TextSize } from "../../types/components";
 interface BodyTextProps extends React.HTMLAttributes<HTMLSpanElement> {
     children: ReactNode;
     size: TextSize;

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

@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
-import { TextSize } from "../../types/components";
+import { type ReactNode } from "react";
+import { type TextSize } from "../../types/components";
 interface HeadingTextProps {
     children?: ReactNode;
     size: TextSize;

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

@@ -1,4 +1,5 @@
-export declare function SwapDetailsView({ isLoading, canToggleBoostMode, }: {
+export declare function SwapDetailsView({ isLoading, canToggleBoostMode, displayBoostMode, }: {
     isLoading?: boolean;
     canToggleBoostMode?: boolean;
+    displayBoostMode?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,11 @@
 import type { Config } from "tailwindcss";
+export declare const spacing: {
+    "squid-xxs": string;
+    "squid-xs": string;
+    "squid-s": string;
+    "squid-m": string;
+    "squid-l": string;
+    "squid-xl": string;
+    "squid-xxl": string;
+};
 export declare const baseTailwindConfig: Config;

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

@@ -0,0 +1,2 @@
+export declare const ROUTING_TOKEN_SUPPORT_ARTICLE = "https://support.squidrouter.com/squid-overview/liquidity-pools/what-is-a-routing-token";
+export declare const PRICE_IMPACT_SUPPORT_ARTICLE = "https://support.squidrouter.com/swapping-with-squid/squid-settings-and-features/what-is-price-impact";

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

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

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

@@ -1,12 +1,17 @@
-import { ThemeType } from "../types/components";
-import { SquidTheme } from "../types/config";
-export type Theme = {
+import { type ThemeType } from "../types/components";
+import { type Theme } from "../types/config";
+export interface ThemeConfig {
     name: string;
     themeImgPath: string;
     websiteBackgroundColor: string;
-    theme: SquidTheme;
+    theme: Theme;
     type: ThemeType;
-};
-export declare const lightTheme: SquidTheme;
-export declare const darkTheme: SquidTheme;
-export declare const themes: Theme[];
+}
+export declare const defaultFontSize: Theme["fontSize"];
+export declare const defaultFontWeight: Theme["fontWeight"];
+export declare const defaultFontFamily: Theme["fontFamily"];
+export declare const defaultBorderRadius: Theme["borderRadius"];
+export declare const lightTheme: Theme;
+export declare const darkTheme: Theme;
+export declare const defaultTheme: Required<Theme>;
+export declare const themes: ThemeConfig[];

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

@@ -1,5 +1,5 @@
-import { ClassValue } from "clsx";
-import { ComponentProps, ElementType } from "react";
+import { type ClassValue } from "clsx";
+import { type ComponentProps, type ElementType } from "react";
 /**
  * Combines multiple class names into a single string
  *
@@ -35,4 +35,13 @@ export declare const calcLerp: (a: string, b: string, t: string | number) => str
  * @returns The filtered array
  */
 export declare const getFirstUniques: <T>(array: T[], key: keyof T, count: number) => T[];
+interface FlattenOptions {
+    prefix?: string;
+}
+export declare function flatten<T extends Record<string, any>>(obj: T, options?: FlattenOptions): Record<string, string>;
+interface ReplaceKeysOptions {
+    keysToReplace: Array<[string, string]>;
+}
+export declare function replaceKeys(obj: Record<string, any>, options: ReplaceKeysOptions): Record<string, any>;
+export declare function mapToCssVariables<T extends Record<string, any>>(obj: T): Record<keyof T & string, string>;
 export {};

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

@@ -4,3 +4,4 @@ export * from "./useCollapsibleMenu";
 export * from "./useRect";
 export * from "./useVersion";
 export * from "./useTimer";
+export * from "./useUserTheme";

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

@@ -0,0 +1,13 @@
+import { type ThemeType } from "../types";
+export declare enum ThemePreference {
+    LIGHT = "light",
+    DARK = "dark",
+    SYSTEM = "system"
+}
+export declare function useUserTheme(): {
+    themePreference: ThemePreference;
+    themeType: ThemeType;
+    theme: import("../types").Theme;
+    setThemeManually: (theme: ThemePreference) => void;
+    isDarkMode: boolean;
+};

package/dist/cjs/types/providers/ThemeProvider.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import "../styles/compiled-tailwind.css";
+import { type Theme } from "../types";
+import { type ThemeType } from "../types/components";
+interface ThemeProviderProps extends React.ComponentProps<"div"> {
+    theme?: Theme;
+    children?: React.ReactNode;
+    themeType?: ThemeType;
+}
+export declare function ThemeProvider({ theme, children, themeType, ...props }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1 +1 @@
-export * from "./SquidConfigProvider";
+export * from "./ThemeProvider";

package/dist/cjs/types/services/internal/colorService.d.ts

@@ -1,4 +1,4 @@
-import { SquidTheme } from "../../types/config";
+import { type Theme } from "../../types/config";
 /**
  * Parses the user readable config to css variables
  * Also maps the public theme variables to the internal theme variables
@@ -18,9 +18,7 @@ import { SquidTheme } from "../../types/config";
  * }
  * @param style
  */
-export declare const parseSquidTheme: (userTheme?: SquidTheme) => {
-    [key: string]: string | undefined;
-} | undefined;
+export declare const parseSquidTheme: (userTheme?: Theme) => Record<string, string | undefined> | undefined;
 export declare function getContrastColor({ r, g, b, }: {
     r: number;
     g: number;
@@ -36,4 +34,11 @@ export declare function getContrastColor({ r, g, b, }: {
  * @returns {string} The hexadecimal color with opacity.
  */
 export declare function getHexColorFromOpacityPercentage(color: string, opacity: number): string;
+export declare function hexToRgb(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+} | null;
+export declare function rgbToHex(r: number, g: number, b: number): string;
 export declare function blendColors(foreground: string, background: string): string | null;

package/dist/cjs/types/stories/layout/SwapConfiguration.stories.d.ts

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof SwapConfiguration>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const EmptyVariantPrimary: Story;
+export declare const EmptyVariantWithoutNumericInputDetails: Story;
 export declare const EmptyVariantAccent: Story;
 export declare const Loading: Story;
 export declare const LoadingWithAllProps: Story;

package/dist/cjs/types/stories/views/SwapDetailsView.stories.d.ts

@@ -6,3 +6,4 @@ type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Loading: Story;
 export declare const BoostDisabled: Story;
+export declare const BoostHidden: Story;

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

@@ -1,33 +1,32 @@
-/**
- * The color format must be of type #FFFFFF
- */
-export type ColorType = `#${string}${string}${string}${string}${string}${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", "material-light-blend-grey-800", "volt-700"];
-export type InternalSquidTheme = Record<(typeof INTERNAL_SQUID_THEME_KEYS)[number], string>;
-export type SquidTheme = {
-    "content-100": string;
-    "content-200": string;
-    "content-300": string;
-    "content-400": string;
-    "content-500": string;
-    "content-600": string;
-    "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;
+declare const THEME_COLOR_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", "highlight-700", "grey-100-005", "material-light-blend-grey-900", "material-light-blend-grey-800"];
+declare const THEME_BORDER_RADIUS_KEYS: readonly ["button-large", "button-medium"];
+declare const THEME_FONT_SIZE_KEYS: readonly ["caption", "body-large", "body-medium", "body-small", "heading-small", "heading-medium", "heading-large"];
+declare const THEME_FONT_WEIGHT_KEYS: readonly ["caption", "body-small", "body-medium", "body-large", "heading-small", "heading-medium", "heading-large"];
+declare const THEME_FONT_FAMILY_KEYS: readonly ["squid-main"];
+type ThemeColors = Record<(typeof THEME_COLOR_KEYS)[number], string>;
+type ThemeFontSize = Record<(typeof THEME_FONT_SIZE_KEYS)[number], string>;
+type ThemeFontWeight = Record<(typeof THEME_FONT_WEIGHT_KEYS)[number], string>;
+type ThemeBorderRadius = Record<(typeof THEME_BORDER_RADIUS_KEYS)[number], string>;
+type ThemeFontFamily = Record<(typeof THEME_FONT_FAMILY_KEYS)[number], string>;
+export interface InternalTheme {
+    color: ThemeColors;
+    fontSize: ThemeFontSize;
+    fontWeight: ThemeFontWeight;
+    borderRadius: ThemeBorderRadius;
+    fontFamily: ThemeFontFamily;
+}
+export interface Theme extends Omit<InternalTheme, "color"> {
+    color: Omit<ThemeColors, "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" | "material-light-blend-grey-800">;
+}
+interface CssVariable {
+    cssVariable: string;
+}
+type ThemeCssVariables = {
+    [K in keyof InternalTheme]: Record<keyof InternalTheme[K], CssVariable>;
 };
-export declare const SQUID_THEME_CSS_VARIABLE_PREFIX = "--squid-theme-";
 /**
- * Mapping between readable variables name and css variables used TailwindCSS config
+ * 'st' = Squid Theme
  */
-export declare const themeTypesKeys: Record<keyof InternalSquidTheme, {
-    cssVariable: string;
-}>;
+export declare const THEME_CSS_VARIABLE_PREFIX = "--st-";
+export declare const themeKeysToCssVariables: ThemeCssVariables;
 export {};

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

@@ -1,3 +1,3 @@
-export type { SquidTheme } from "./config";
+export type { Theme } from "./config";
 export * from "./utils";
-export type { SwapState, ThemeType, SwapStep, HistoryItemStatus, ActionStatus, AssetsButtonVariant, DescriptionBlock, } from "./components";
+export type { SwapState, ThemeType, SwapStep, HistoryItemStatus, ActionStatus, AssetsButtonVariant, ButtonVariant, ButtonSize, DescriptionBlock, } from "./components";