@0xsquid/ui 0.27.6 → 0.27.8-beta.0

package/dist/esm/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;
@@ -15,6 +15,7 @@ interface AssetsButtonProps {
     variant?: AssetsButtonVariant;
     isLoading?: boolean;
     tooltip?: Omit<TooltipProps, "children">;
+    emptyTokenLabel?: string;
 }
-export declare function AssetsButton({ chain, token, onClick, variant, isLoading, tooltip, }: AssetsButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function AssetsButton({ chain, token, onClick, variant, isLoading, tooltip, emptyTokenLabel, }: AssetsButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/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/esm/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/esm/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/esm/types/components/icons/Generic.d.ts

@@ -54,3 +54,31 @@ 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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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,34 @@ 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;
+}
+/**
+ * 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

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

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

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

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

@@ -1,26 +1,10 @@
-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
  * and adds the material-* variants
- * example user theme:
- * {
- *   'content-100': '#000',
- *   'content-200': '#000',
- *   'accent-400': '#000',
- * }
- * Resulting in:
- * {
- *   'grey-100': '#000',
- *   'grey-200': '#000',
- *   'royal-400': '#000',
- *   'material-light-thin': '#000'
- * }
  * @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 +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/stories/buttons/AssetsButton.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { type Meta, type StoryObj } from "@storybook/react";
 import { AssetsButton } from "../../components/buttons/AssetsButton";
 declare const meta: Meta<typeof AssetsButton>;
 export default meta;

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

@@ -1,33 +1,35 @@
+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;
+}
 /**
- * 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;
+  Public theme, excluding some colors that are generated internally
+*/
+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/esm/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";