@0xsquid/ui 1.0.0 → 2.0.0

package/dist/esm/types/components/views/RecipientView.d.ts

@@ -1,4 +1,4 @@
-type WalletViewType = 'paymentMethod' | 'recipientEmpty' | 'recipientTypingEns' | 'recipientTypingAddress';
+type WalletViewType = "paymentMethod" | "recipientEmpty" | "recipientTypingEns" | "recipientTypingAddress";
 interface WalletsViewProps {
     type: WalletViewType;
 }

package/dist/esm/types/components/views/SettingsView.d.ts

@@ -0,0 +1 @@
+export declare function SettingsView(): import("react/jsx-runtime").JSX.Element;

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

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

package/dist/esm/types/components/views/SwapProgressView.d.ts

@@ -1,5 +1,32 @@
-type SwapProgressState = 'confirm' | 'progress' | 'completed' | 'error' | 'partialSuccess' | 'confirmationTooLong' | 'confirmationRejected';
-export declare function SwapProgressView({ state }: {
-    state: SwapProgressState;
+import { SwapState, SwapStep } from "../../types/components";
+import { SwapStepsCollapsedFooterButton } from "../layout/SwapStepsCollapsed";
+type ChainData = {
+    networkName: string;
+    logoUrl: string;
+};
+type Token = {
+    symbol: string;
+    logoUrl: string;
+    bgColor: string;
+};
+export declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, refundTokenSymbol, }: {
+    steps: SwapStep[];
+    handleClose?: (swapState: SwapState) => void;
+    handleComplete?: () => void;
+    isOpen?: boolean;
+    socialLink?: string;
+    supportLink?: string;
+    fromToken: Token;
+    toToken: Token;
+    fromAmount: string;
+    toAmount: string;
+    fromChain: ChainData;
+    toChain: ChainData;
+    fromAddressFormatted: string;
+    toAddressFormatted: string;
+    swapState: SwapState;
+    estimatedTimeToComplete?: string;
+    footerButton?: SwapStepsCollapsedFooterButton;
+    refundTokenSymbol?: string;
 }): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/components/views/TransactionView/BaseTransactionViewProps.d.ts

@@ -0,0 +1,10 @@
+import { ActionStatus } from "../../../types/components";
+import { FeesActionProps, TransactionActionProps } from "../../lists/TransactionAction";
+export interface BaseTransactionViewProps {
+    title?: string;
+    hash: string;
+    status: ActionStatus;
+    url?: string;
+    actions: TransactionActionProps[];
+    fees: FeesActionProps;
+}

package/dist/esm/types/components/views/TransactionView/BridgeTransactionView.d.ts

@@ -0,0 +1,22 @@
+import { BaseTransactionViewProps } from "./BaseTransactionViewProps";
+interface BridgeTransactionViewProps extends BaseTransactionViewProps {
+    amount: string;
+    token: {
+        logoURI: string;
+        bgColor: string;
+        symbol: string;
+    };
+    fromChain: {
+        logoURI: string;
+        name: string;
+    };
+    toChain: {
+        logoURI: string;
+        name: string;
+    };
+    address: string;
+    boosted?: boolean;
+    timeToComplete: string;
+}
+export declare function BridgeTransactionView({ title, hash, status, url, amount, token, fromChain, toChain, address, actions, fees, boosted, timeToComplete, }: BridgeTransactionViewProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/types/components/views/TransactionView/BuyNFTTransactionView.d.ts

@@ -0,0 +1,34 @@
+import { BaseTransactionViewProps } from "./BaseTransactionViewProps";
+interface BuyNFTTTransactionViewProps extends BaseTransactionViewProps {
+    title: string;
+    imageURI: string;
+    collection: {
+        imageURI: string;
+        name: string;
+    };
+    price: string;
+    token: {
+        logoURI: string;
+        symbol: string;
+    };
+    marketplace: {
+        logoURI: string;
+        name: string;
+    };
+    fromChain: {
+        logoURI: string;
+        name: string;
+    };
+    toChain: {
+        logoURI: string;
+        name: string;
+    };
+    fromAddress: string;
+    toAddress: string;
+    boosted?: boolean;
+    tokenId: string;
+    nftType: string;
+    timeToComplete: string;
+}
+export declare function BuyNFTTransactionView({ title, hash, status, url, imageURI, collection, price, token, marketplace, fromChain, toChain, fromAddress, toAddress, boosted, timeToComplete, tokenId, nftType, actions, fees, }: BuyNFTTTransactionViewProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/types/components/views/TransactionView/InteractionTransactionView.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+import { BaseTransactionViewProps } from "./BaseTransactionViewProps";
+interface InteractionTTransactionViewProps extends BaseTransactionViewProps {
+    image?: ReactNode;
+    chain: {
+        logoURI: string;
+        name: string;
+    };
+    address: string;
+    boosted?: boolean;
+    timeToComplete: string;
+}
+export declare function InteractionTransactionView({ title, hash, status, url, image, chain, address, boosted, timeToComplete, actions, fees, }: InteractionTTransactionViewProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/types/components/views/TransactionView/SwapTransactionView.d.ts

@@ -0,0 +1,30 @@
+import { BaseTransactionViewProps } from "./BaseTransactionViewProps";
+interface SwapTransactionViewProps extends BaseTransactionViewProps {
+    fromAmount: string;
+    fromToken: {
+        logoURI: string;
+        bgColor: string;
+        symbol: string;
+    };
+    toAmount: string;
+    toToken: {
+        logoURI: string;
+        bgColor: string;
+        symbol: string;
+    };
+    fromChain: {
+        logoURI: string;
+        name: string;
+    };
+    toChain: {
+        logoURI: string;
+        name: string;
+    };
+    fromAddress: string;
+    toAddress: string;
+    exchangeRate: string;
+    boosted?: boolean;
+    timeToComplete: string;
+}
+export declare function SwapTransactionView({ title, hash, status, url, fromAmount, fromToken, toAmount, toToken, fromChain, toChain, fromAddress, toAddress, exchangeRate, boosted, timeToComplete, actions, fees, }: SwapTransactionViewProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/types/components/views/TransactionView/TransactionView.d.ts

@@ -0,0 +1,21 @@
+import { ComponentProps } from "react";
+import { BridgeTransactionView } from "./BridgeTransactionView";
+import { BuyNFTTransactionView } from "./BuyNFTTransactionView";
+import { InteractionTransactionView } from "./InteractionTransactionView";
+import { SwapTransactionView } from "./SwapTransactionView";
+declare const componentMap: {
+    readonly swap: typeof SwapTransactionView;
+    readonly buy_nft: typeof BuyNFTTransactionView;
+    readonly interaction: typeof InteractionTransactionView;
+    readonly bridge: typeof BridgeTransactionView;
+};
+type TransactionViewComponents = typeof componentMap;
+export type TransactionViewType = keyof TransactionViewComponents;
+export type TransactionViewProps = {
+    [Type in TransactionViewType]: {
+        type: Type;
+        props: ComponentProps<TransactionViewComponents[Type]>;
+    };
+}[TransactionViewType];
+export declare function TransactionView({ type, props }: TransactionViewProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/types/components/views/TransactionView/TransactionViewLayout.d.ts

@@ -0,0 +1,11 @@
+import { ComponentProps, ReactNode } from "react";
+import { FeesActionProps, TransactionActionProps } from "../../lists/TransactionAction";
+interface TransactionViewLayoutProps extends ComponentProps<"div"> {
+    isLoading?: boolean;
+    header?: ReactNode;
+    properties?: ReactNode;
+    actions?: TransactionActionProps[];
+    fees?: FeesActionProps;
+}
+export declare function TransactionViewLayout({ isLoading, header, properties, actions, fees, ...props }: TransactionViewLayoutProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/types/components/views/TransactionView/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./BaseTransactionViewProps";
+export * from "./BuyNFTTransactionView";
+export * from "./InteractionTransactionView";
+export * from "./SwapTransactionView";
+export * from "./TransactionView";
+export * from "./TransactionViewLayout";

package/dist/esm/types/components/views/index.d.ts

@@ -0,0 +1,13 @@
+export * from "./AssetsView";
+export * from "./MainView";
+export * from "./RecipientView";
+export * from "./SwapDetailsView";
+export * from "./SwapProgressView";
+export * from "./TransactionView/BaseTransactionViewProps";
+export * from "./TransactionView/BridgeTransactionView";
+export * from "./TransactionView/BuyNFTTransactionView";
+export * from "./TransactionView/InteractionTransactionView";
+export * from "./TransactionView/SwapTransactionView";
+export * from "./TransactionView/TransactionView";
+export * from "./TransactionView/TransactionViewLayout";
+export * from "./WalletsView";

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

@@ -0,0 +1,43 @@
+export declare const CSS_VARS: {
+    MOVE_WITH_SPRING_BOUNCE_DURATION: string;
+    DISPLAY_DELAYED_DURATION: string;
+    COLLAPSE_ROUTE_DURATION: string;
+    EXPAND_ROUTE_DURATION: string;
+    FADE_IN_DURATION: string;
+    FADE_OUT_DURATION: string;
+    SCALE_AND_FADE_UP_DURATION: string;
+    SCALE_AND_FADE_DOWN_DURATION: string;
+    TRANSLATE_TOP_OR_BOTTOM: string;
+    SHOW_MODAL_DURATION: string;
+    HIDE_MODAL_DURATION: string;
+    SLIDE_TO_TOP_DURATION: string;
+    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;
+    HIDE_ROUTE: number;
+    CHANGE_SWAP_STEP: number;
+    SHOW_MODAL: number;
+    HIDE_MODAL: number;
+    BOOST_BUTTON: number;
+};
+export declare const ANIMATION_TIMINGS: {
+    EXPAND_ROUTE: string;
+    COLLAPSE_ROUTE: string;
+    CHANGE_SWAP_STEP: string;
+    SHOW_ROUTE: string;
+    HIDE_ROUTE: string;
+};
+type MediaQuery = "MOBILE_LG" | "MOBILE_SM_HEIGHT" | "MOBILE_XS" | "MOBILE_XS_HEIGHT";
+export declare const MEDIA_QUERIES: Record<MediaQuery, {
+    media: string;
+    key: string;
+    value: number;
+}>;
+export {};

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

@@ -0,0 +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/esm/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/esm/types/core/index.d.ts

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

package/dist/esm/types/core/numbers.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Convert token amount to USD
+ * @param {string|number} tokenAmount - The amount of tokens
+ * @param {string|number} tokenPrice - The price of one token in USD
+ * @returns {BigNumber} - The equivalent amount in USD
+ */
+export declare function convertTokenAmountToUSD(tokenAmount: string | number, tokenPrice: string | number, maxDecimals?: number): string;
+/**
+ * Convert USD to token amount
+ * @param {string|number} usdAmount - The amount in USD
+ * @param {string|number} tokenPrice - The price of one token in USD
+ * @param {number} maxDecimals - The maximum number of decimals
+ * @returns {BigNumber} - The equivalent amount of tokens
+ */
+export declare function convertUSDToTokenAmount(usdAmount: string | number, tokenPrice: string | number, maxDecimals: number): string;
+export declare function formatTokenAmount(amount: string, { exact }?: {
+    exact?: boolean | undefined;
+}): string;
+interface FormatUsdAmountOptions {
+    includeSign?: boolean;
+}
+export declare function formatUsdAmount(amount?: number | bigint | string, { includeSign }?: FormatUsdAmountOptions): string;
+export declare function trimExtraDecimals(value: string, maxDecimals?: number): string;
+export {};

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

@@ -1,8 +1,17 @@
-import { ConfigTheme } 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: ConfigTheme;
-};
-export declare const themes: Theme[];
+    theme: Theme;
+    type: ThemeType;
+}
+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/esm/types/core/utils.d.ts

@@ -1,4 +1,5 @@
-import { ClassValue } from 'clsx';
+import { type ClassValue } from "clsx";
+import { type ComponentProps, type ElementType } from "react";
 /**
  * Combines multiple class names into a single string
  *
@@ -8,3 +9,60 @@ import { ClassValue } from 'clsx';
  * @returns The combined class names as a string.
  */
 export declare const cn: (...inputs: ClassValue[]) => string;
+type AnyFunction = (...args: any[]) => any;
+interface DebouncedFunction<F extends AnyFunction> {
+    (...args: Parameters<F>): void;
+    cancel: () => void;
+}
+export declare function debounce<F extends AnyFunction>(func: F, delay: number): DebouncedFunction<F>;
+export declare const formatDuration: (elapsedTime: number) => string;
+export declare const formatTime: (timestampSeconds: number) => string;
+export declare const formatRelativeTime: (timestampSeconds: number) => string;
+export declare const formatRelativeDate: (timestampSeconds: number) => string;
+export declare function capitalize(text: string): string;
+type Falsy = false | null | undefined | 0 | "";
+export declare function truthy<T>(value: T): value is Exclude<T, Falsy>;
+export declare function truncateHash(hash: string): string;
+export declare const styled: <Tag extends keyof JSX.IntrinsicElements>(tag: Tag, className: string) => import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<ComponentProps<Tag>> & import("react").RefAttributes<ElementType<Tag>>>;
+export declare const mergeProps: <Tag extends keyof JSX.IntrinsicElements = any>(a: ComponentProps<Tag>, b: ComponentProps<Tag>) => ComponentProps<Tag>;
+export declare const calcLerp: (a: string, b: string, t: string | number) => string;
+/**
+ * Returns an array including the first `count` unique values of the array
+ * If not enough unique values are found, the array is returned as is, up to `count` items
+ * @param arr - The array to filter
+ * @param key - The key to use for uniqueness
+ * @param count - The number of unique values to return
+ * @returns The filtered array
+ */
+export declare const getFirstUniques: <T>(array: T[], key: keyof T, count: number) => T[];
+interface FlattenOptions {
+    prefix?: string;
+}
+/**
+ * Flattens an object into a record of kebab-cased keys and values.
+ * @example
+ * { a: { b: { c: 1 } } } -> { 'a-b-c': 1 }
+ * @param obj - The object to flatten
+ * @param options.prefix - The prefix to add to the keys
+ * @returns The flattened object
+ */
+export declare function flatten<T extends Record<string, any>>(obj: T, options?: FlattenOptions): Record<string, string>;
+interface ReplaceKeysOptions {
+    keysToReplace: Array<[string, string]>;
+}
+/**
+ * Replaces keys in an object with new keys.
+ * @example
+ * replaceKeys({ oldKey: "oldValue" }, { keysToReplace: [["oldKey", "newKey"]] }) -> { newKey: "oldValue" }
+ * @param obj - The object to replace keys in
+ * @param options - The options for replacing keys
+ * @returns The replaced object
+ */
+export declare function replaceKeys(obj: Record<string, any>, options: ReplaceKeysOptions): Record<string, any>;
+/**
+ * Maps theme keys to css variables
+ * @example
+ * mapToCssVariables({ "accent-gold": { cssVariable: "--accent-gold" } }) -> { "accent-gold": "var(--accent-gold)" }
+ */
+export declare function mapToCssVariables<T extends Record<string, any>>(obj: T): Record<keyof T & string, string>;
+export {};

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

@@ -0,0 +1,7 @@
+export * from "./useDropdownMenu";
+export * from "./useMediaQuery";
+export * from "./useCollapsibleMenu";
+export * from "./useRect";
+export * from "./useVersion";
+export * from "./useTimer";
+export * from "./useUserTheme";

package/dist/esm/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/esm/types/hooks/useDropdownMenu.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+export type DropdownPosition = "top" | "bottom" | "center";
+export type DropdownStyles = {
+    position: DropdownPosition;
+    maxHeight: number | null;
+};
+interface UseDropdownMenuParams {
+    initialIsModalOpen?: boolean;
+    itemsContainerRef?: React.RefObject<HTMLElement>;
+}
+export declare function useDropdownMenu(props?: UseDropdownMenuParams): {
+    isDropdownOpen: boolean;
+    openDropdown: () => void;
+    closeDropdown: () => void;
+    dropdownRef: React.RefObject<HTMLDivElement>;
+    openDropdownButtonRef: React.RefObject<HTMLButtonElement>;
+    dropdownStyles: DropdownStyles | null;
+    itemRef: React.RefObject<HTMLLIElement>;
+    menuRef: React.RefObject<HTMLDivElement>;
+};
+export {};

package/dist/esm/types/hooks/useMediaQuery.d.ts

@@ -0,0 +1,26 @@
+type UseMediaQueryOptions = {
+    /**
+     * The default value to return if the hook is being run on the server.
+     * @default false
+     */
+    defaultValue?: boolean;
+    /**
+     * If `true` (default), the hook will initialize reading the media query. In SSR, you should set it to `false`, returning `options.defaultValue` or `false` initially.
+     * @default true
+     */
+    initializeWithValue?: boolean;
+};
+/**
+ * Custom hook that tracks the state of a media query using the [`Match Media API`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia).
+ * @param {string} query - The media query to track.
+ * @param {?UseMediaQueryOptions} [options] - The options for customizing the behavior of the hook (optional).
+ * @returns {boolean} The current state of the media query (true if the query matches, false otherwise).
+ * @public
+ * @example
+ * ```tsx
+ * const isSmallScreen = useMediaQuery('(max-width: 600px)');
+ * // Use `isSmallScreen` to conditionally apply styles or logic based on the screen size.
+ * ```
+ */
+export declare function useMediaQuery(query: string, { defaultValue, initializeWithValue, }?: UseMediaQueryOptions): boolean;
+export {};

package/dist/esm/types/hooks/useRect.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function useOnResize(ref: React.RefObject<HTMLElement>, callback: (rect: DOMRectReadOnly) => void): void;
+export declare function useRect(ref: React.RefObject<HTMLElement>): DOMRectReadOnly;

package/dist/esm/types/hooks/useTimer.d.ts

@@ -0,0 +1,7 @@
+export declare const useTimer: ({ immediateStart, }: {
+    immediateStart?: boolean;
+}) => {
+    timer: string;
+    stopTimer: () => void;
+    startTimer: () => void;
+};

package/dist/esm/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/esm/types/hooks/useVersion.d.ts

@@ -0,0 +1 @@
+export declare function useVersion<T>(value: T, equal?: (a: T, b: T) => boolean): number;

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

@@ -1 +1,5 @@
-export * from './components';
+export * from "./components";
+export * from "./providers";
+export * from "./hooks";
+export * from "./types";
+export * from "./core";

package/dist/esm/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/esm/types/providers/index.d.ts

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

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

@@ -1,33 +1,15 @@
-import { ConfigTheme } from '../../types/config';
+import { type Theme } from "../../types/config";
 /**
- * Converts Hex color to HSL
- * Because the current daisy theme only accepts HSL css variables
- * @param hex
- * @returns HSL string
- */
-export declare const toHSL: (hex: string) => string;
-export declare const generateForegroundColorFrom: (input: string, percentage?: number) => string;
-export declare const generateFocusColorFrom: (input: string) => string;
-/**
- * Parsing the user readable config to css variables with HSL values
+ * Parses the user readable config to css variables
+ * and adds the material-* variants
  * @param style
  */
-export declare const getParsedStyle: (style?: ConfigTheme) => {
-    [key: string]: string | undefined;
-} | undefined;
-export declare const isColorDark: (colorHEX: string | undefined) => boolean;
-export declare const getListItemHoverClassName: ({ transparentWidget }: {
-    transparentWidget?: boolean | undefined;
-}) => string;
-export declare function getDominantColor({ imageUrl, sampleSize, }: {
-    imageUrl: string;
-    sampleSize?: number;
-}): Promise<number[]>;
+export declare const parseSquidTheme: (userTheme?: Theme) => Record<string, string | undefined> | undefined;
 export declare function getContrastColor({ r, g, b, }: {
     r: number;
     g: number;
     b: number;
-}): "#000" | "#fff";
+}): "#fff" | "#000";
 /**
  * Returns a hexadecimal color with opacity based on the given color and opacity percentage.
  *
@@ -38,3 +20,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/esm/types/stores/container.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface ContainerStore {
+    containerRef: React.RefObject<HTMLDivElement> | undefined;
+}
+export declare const useContainerStore: import("zustand").UseBoundStore<import("zustand").StoreApi<ContainerStore>>;
+export {};

package/dist/esm/types/stories/badges/BadgeImage.stories.d.ts

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { BadgeImage } from "../../components/badges/BadgeImage";
+declare const meta: Meta<typeof BadgeImage>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const ImageOnly: Story;
+export declare const BadgeAndImage: Story;
+export declare const ExtraMarginForBadge: Story;
+export declare const Rounded: Story;
+export declare const SizeMedium: Story;
+export declare const SizeSmall: Story;
+export declare const CustomPlaceholderForBrokenImage: Story;
+export declare const CustomPlaceholderForLoadingImage: Story;
+export declare const CustomPlaceholderForBrokenBadgeImage: Story;
+export declare const CustomPlaceholderForLoadingBadgeImage: Story;

package/dist/esm/types/stories/badges/IconLabel.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { IconLabel } from "../../components/badges/IconLabel";
+declare const meta: Meta<typeof IconLabel>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Square: Story;
+export declare const Round: Story;

package/dist/esm/types/stories/badges/ImageIcon.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Image } from "../../components/badges/Image";
+declare const meta: Meta<typeof Image>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Square: Story;
+export declare const Round: Story;

package/dist/esm/types/stories/badges/Loader.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Loader } from "../../components/icons/Loader";
+declare const meta: Meta<typeof Loader>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Normal: Story;
+export declare const StrokeThin: Story;
+export declare const StrokeThick: Story;