@0xsquid/ui 2.0.5 → 2.2.0

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

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

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

@@ -1,14 +1,14 @@
 /// <reference types="react" />
-import { TooltipProps } from "../controls";
+import { type TooltipProps } from "../controls";
 export interface StopsProps extends React.ComponentProps<"button"> {
     stopsCount?: string | number;
     estimatedTime?: string;
     tooltip?: Omit<TooltipProps, "children">;
     providers: Provider[];
 }
-export declare function StopsButton({ stopsCount, estimatedTime, tooltip, providers, ...props }: StopsProps): import("react/jsx-runtime").JSX.Element;
-type Provider = {
+export declare function StopsButton({ stopsCount, estimatedTime, tooltip, disabled, providers, ...props }: StopsProps): import("react/jsx-runtime").JSX.Element;
+interface Provider {
     logoUrl: string;
     key: string;
-};
+}
 export {};

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

@@ -1,8 +1,6 @@
 /// <reference types="react" />
-interface Props {
-    lottieJsonFile: object;
-    animReplacement?: JSX.Element;
-    hideAnimations?: boolean;
+import { Player } from "@lottiefiles/react-lottie-player";
+interface Props extends React.ComponentProps<typeof Player> {
 }
-export declare const AnimationWrapper: ({ lottieJsonFile, animReplacement, hideAnimations, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const AnimationWrapper: (playerProps: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,13 +1,13 @@
 /// <reference types="react" />
-import { ChipProps } from "../buttons";
-import { TooltipProps } from "../controls";
-export type ActionButton = {
+import { type ChipProps } from "../buttons";
+import { type TooltipProps } from "../controls";
+export interface ActionButton {
     labelOrIcon: string | React.ReactNode;
     onClick?: () => void;
     id: React.Key;
     tooltip?: Omit<TooltipProps, "children">;
     chip?: ChipProps;
-};
+}
 interface NavigationBarProps extends React.ComponentProps<"nav"> {
     title?: string;
     displayBackButton?: boolean;

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

@@ -1,14 +1,14 @@
-import { SwapState, SwapStep } from "../../types/components";
-import { SwapStepsCollapsedFooterButton } from "../layout/SwapStepsCollapsed";
-type ChainData = {
+import { SwapState, type SwapStep } from "../../types/components";
+import { type SwapStepsCollapsedFooterButton } from "../layout/SwapStepsCollapsed";
+interface ChainData {
     networkName: string;
     logoUrl: string;
-};
-type Token = {
+}
+interface 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;

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

@@ -8,4 +8,12 @@ export declare const spacing: {
     "squid-xl": string;
     "squid-xxl": string;
 };
+export declare const boxShadow: {
+    "elevation-dark-3": string;
+    "elevation-light-3": string;
+    "elevation-dark-2": string;
+    "elevation-light-1": string;
+    "elevation-light-2": string;
+    "inset-royal": string;
+};
 export declare const baseTailwindConfig: Config;

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

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

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

@@ -1,5 +1,5 @@
 import { type ThemeType } from "../types/components";
-import { type Theme } from "../types/config";
+import { type PublicTheme, type Theme } from "../types/config";
 export interface ThemeConfig {
     name: string;
     themeImgPath: string;
@@ -7,11 +7,10 @@ export interface ThemeConfig {
     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 defaultFontSize: PublicTheme["fontSize"];
+export declare const defaultFontWeight: PublicTheme["fontWeight"];
+export declare const defaultFontFamily: PublicTheme["fontFamily"];
+export declare const defaultBorderRadius: PublicTheme["borderRadius"];
+export declare const lightTheme: PublicTheme;
+export declare const darkTheme: PublicTheme;
 export declare const themes: ThemeConfig[];

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

@@ -7,7 +7,7 @@ export declare enum ThemePreference {
 export declare function useUserTheme(): {
     themePreference: ThemePreference;
     themeType: ThemeType;
-    theme: import("../types").Theme;
+    theme: import("../types").PublicTheme;
     setThemeManually: (theme: ThemePreference) => void;
     isDarkMode: boolean;
 };

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

@@ -4,3 +4,4 @@ export * from "./hooks";
 export * from "./types";
 export * from "./core";
 export * from "./services";
+export * from "./assets";

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

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

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

@@ -1,10 +1,11 @@
 import { type Theme } from "../../types/config";
+import { type ThemeType } from "../../types";
 /**
  * Parses the user readable config to css variables
  * and adds the material-* variants
  * @param style
  */
-export declare const parseSquidTheme: (userTheme?: Theme) => Record<string, string | undefined> | undefined;
+export declare const parseSquidTheme: (userTheme: Theme, themeType: ThemeType) => Record<string, string | undefined> | undefined;
 export declare const remToPx: (rem: string | number, baseFontSize?: number) => number;
 export declare const pxToRem: (px: string | number, baseFontSize?: number) => number;
 export declare function getContrastColor({ r, g, b, }: {

package/dist/cjs/types/stores/settings.d.ts

@@ -0,0 +1,2 @@
+import { type Settings } from "../types";
+export declare const useSettingsStore: import("zustand").UseBoundStore<import("zustand").StoreApi<Settings>>;

package/dist/cjs/types/stories/buttons/StopsButton.stories.d.ts

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

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

@@ -1,26 +1,45 @@
-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"];
+import { type DeepPartial } from "./utils";
+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", "highlight-700", "status-positive", "status-negative", "status-partial", "button-lg-primary-bg", "button-lg-primary-text", "button-lg-secondary-bg", "button-lg-secondary-text", "button-lg-tertiary-bg", "button-lg-tertiary-text", "button-md-primary-bg", "button-md-primary-text", "button-md-secondary-bg", "button-md-secondary-text", "button-md-tertiary-bg", "button-md-tertiary-text", "input-placeholder", "input-text", "input-selection", "input-bg", "animation-bg", "animation-text", "modal-backdrop", "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"];
+declare const THEME_BORDER_RADIUS_KEYS: readonly ["button-lg-primary", "button-lg-secondary", "button-lg-tertiary", "button-md-primary", "button-md-secondary", "button-md-tertiary", "container", "input", "tooltip-sm", "tooltip-lg", "modal"];
 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"];
+declare const THEME_BOX_SHADOW_KEYS: readonly ["container"];
 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>;
+type ThemeBoxShadow = Record<(typeof THEME_BOX_SHADOW_KEYS)[number], string>;
+/**
+ * Full theme, includes internal colors.
+ */
 export interface InternalTheme {
     color: ThemeColors;
     fontSize: ThemeFontSize;
     fontWeight: ThemeFontWeight;
     borderRadius: ThemeBorderRadius;
     fontFamily: ThemeFontFamily;
+    boxShadow: ThemeBoxShadow;
 }
 /**
-  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">;
+ * All the button variant colors are optional
+ * and will be generated internally using the base colors if not provided
+ */
+type OptionalColorsKeys = "button-lg-primary-bg" | "button-lg-primary-text" | "button-lg-secondary-bg" | "button-lg-secondary-text" | "button-lg-tertiary-bg" | "button-lg-tertiary-text" | "button-md-primary-bg" | "button-md-primary-text" | "button-md-secondary-bg" | "button-md-secondary-text" | "button-md-tertiary-bg" | "button-md-tertiary-text" | "input-placeholder" | "input-text" | "input-selection" | "input-bg" | "animation-bg" | "animation-text" | "modal-backdrop";
+/**
+ * These transparent colors are generated internally using the base colors
+ */
+type HiddenColorsKeys = "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";
+/**
+ * Public theme, excluding some colors that are generated internally
+ * and making some colors optional.
+ */
+export interface PublicTheme extends Omit<InternalTheme, "color"> {
+    color: // Remove the hidden colors and the optional colors
+    Omit<InternalTheme["color"], HiddenColorsKeys | OptionalColorsKeys> & Partial<Pick<InternalTheme["color"], OptionalColorsKeys>>;
 }
+export type Theme = DeepPartial<PublicTheme>;
 interface CssVariable {
     cssVariable: string;
 }
@@ -32,4 +51,8 @@ type ThemeCssVariables = {
  */
 export declare const THEME_CSS_VARIABLE_PREFIX = "--st-";
 export declare const themeKeysToCssVariables: ThemeCssVariables;
+export interface Settings {
+    showProgressAnimation: boolean;
+    showModalBackdrop: boolean;
+}
 export {};

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

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

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

@@ -9,3 +9,6 @@
 export type AllOrNone<T> = T | {
     [K in keyof T]?: never;
 };
+export type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};