@0xsquid/ui 0.9.3 → 0.9.5

package/dist/cjs/index.js

@@ -2680,12 +2680,6 @@ const SQUID_THEME_CSS_VARIABLE_PREFIX = '--squid-theme-';
  * Mapping between readable variables name and css variables used TailwindCSS config
  */
 const themeTypesKeys = {
-    'accent-gold': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}accent-gold`,
-    },
-    'accent-salmon': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}accent-salmon`,
-    },
     'grey-100': {
         cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-100`,
     },
@@ -2731,54 +2725,18 @@ const themeTypesKeys = {
     'material-light-thin': {
         cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-thin`,
     },
-    'royal-100': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-100`,
-    },
-    'royal-200': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-200`,
-    },
-    'royal-300': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-300`,
-    },
     'royal-400': {
         cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-400`,
     },
     'royal-500': {
         cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-500`,
     },
-    'royal-600': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-600`,
-    },
-    'royal-700': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-700`,
-    },
-    'royal-800': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-800`,
-    },
     'status-negative': {
         cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-negative`,
     },
     'status-positive': {
         cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-positive`,
     },
-    'volt-300': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-300`,
-    },
-    'volt-400': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-400`,
-    },
-    'volt-600': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-600`,
-    },
-    'volt-700': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-700`,
-    },
-    'volt-800': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-800`,
-    },
-    'volt-900': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-900`,
-    },
 };
 
 function PlusIcon() {
@@ -3191,13 +3149,14 @@ const dropdownPositionClassMap = {
     bottom: 'tw-right-[calc(100%-10px)] tw-top-7',
     center: 'tw-right-[40px] -tw-top-[55px]',
 };
-function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel = 'Pending', dropdownMenuItems, }) {
+function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel = 'Pending', dropdownMenuItems, itemsContainerRef, }) {
     const { isDropdownOpen, dropdownRef, openDropdownButtonRef, openDropdown } = useDropdownMenu();
     const [dropdownPosition, setDropdownPosition] = react.useState(null);
     const itemRef = react.useRef(null);
     const menuRef = react.useRef(null);
     // Effect to find the best position for the dropdown menu, so it's always visible for the user
     react.useEffect(() => {
+        var _a;
         if (!isDropdownOpen) {
             // when the dropdown is closed, we want to reset its position
             // because user may scroll, and the old position may be out of view, so we'll need to recalculate it
@@ -3205,7 +3164,7 @@ function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted,
             return;
         }
         const item = itemRef.current;
-        const itemsContainer = item === null || item === void 0 ? void 0 : item.parentElement;
+        const itemsContainer = (_a = itemsContainerRef === null || itemsContainerRef === void 0 ? void 0 : itemsContainerRef.current) !== null && _a !== void 0 ? _a : item === null || item === void 0 ? void 0 : item.parentElement;
         const dropdownMenu = menuRef.current;
         if (!item || !dropdownRef.current || !itemsContainer || !dropdownMenu) {
             return;
@@ -3240,7 +3199,7 @@ function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted,
         }
     }, [isDropdownOpen, menuRef, dropdownPosition, itemRef]);
     return (jsxRuntime.jsx("li", { ref: itemRef, className: "tw-h-list-item-large tw-min-w-list-item-small tw-self-stretch tw-bg-grey-900 tw-px-squid-xs tw-text-grey-300", children: jsxRuntime.jsxs("div", { className: "tw-group/history-item tw-relative tw-flex tw-flex-shrink-0 tw-cursor-pointer tw-items-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin", children: [jsxRuntime.jsxs("div", { className: "tw-relative tw-h-10 tw-w-[60px]", children: [isPending ? (jsxRuntime.jsx("span", { className: "tw-absolute -tw-left-[5px] tw-bottom-0 tw-z-30 tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-grey-900 tw-bg-royal-400 tw-p-0.5", children: jsxRuntime.jsx(DotGrid1x3HorizontalIcon, {}) })) : null, jsxRuntime.jsx("img", { src: firstImageUrl, className: "tw-absolute tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" }), jsxRuntime.jsx("img", { src: secondImageUrl, className: "tw-absolute tw-left-5 tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-h-10 tw-flex-1 tw-flex-col tw-self-stretch", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-justify-between tw-text-grey-500", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center", children: [jsxRuntime.jsx(CaptionText, { children: fromLabel }), jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: jsxRuntime.jsx(ChevronRightSmallIcon, {}) }), jsxRuntime.jsx(CaptionText, { children: toLabel })] }), !!dropdownMenuItems && (jsxRuntime.jsx("button", { className: "tw-peer tw-absolute tw-right-squid-xxs tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-material-light-thin tw-p-2 tw-text-grey-300 tw-opacity-0 tw-transition-opacity focus:tw-opacity-100 group-hover/history-item:tw-opacity-100", onClick: openDropdown, ref: openDropdownButtonRef, children: jsxRuntime.jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })), jsxRuntime.jsx("div", { className: cn(!!dropdownMenuItems &&
-                                        'tw-transition-opacity group-hover/history-item:tw-opacity-0 peer-focus:tw-opacity-0'), children: isPending ? (jsxRuntime.jsx(CaptionText, { className: "tw-text-royal-400", children: pendingLabel })) : (jsxRuntime.jsx(CaptionText, { children: dateCompleted })) })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: [jsxRuntime.jsx(BodyText, { size: "small", children: fromAmount }), jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), jsxRuntime.jsx(BodyText, { size: "small", children: toAmount })] })] }), isDropdownOpen && !!dropdownMenuItems ? (jsxRuntime.jsx(DropdownMenu, { menuRef: menuRef, 
+                                        'tw-transition-opacity group-hover/history-item:tw-hidden group-hover/history-item:tw-opacity-0 peer-focus:tw-hidden peer-focus:tw-opacity-0'), children: isPending ? (jsxRuntime.jsx(CaptionText, { className: "tw-text-royal-400", children: pendingLabel })) : (jsxRuntime.jsx(CaptionText, { children: dateCompleted })) })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: [jsxRuntime.jsx(BodyText, { size: "small", children: fromAmount }), jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), jsxRuntime.jsx(BodyText, { size: "small", children: toAmount })] })] }), isDropdownOpen && !!dropdownMenuItems ? (jsxRuntime.jsx(DropdownMenu, { menuRef: menuRef, 
                     // only show dropdown menu if there is a position defined for it
                     isHidden: !dropdownPosition, className: cn(!!dropdownPosition && dropdownPositionClassMap[dropdownPosition]), dropdownRef: dropdownRef, items: dropdownMenuItems })) : null] }) }));
 }
@@ -3290,7 +3249,7 @@ function SettingsItem({ icon, label, controls = [], link, transparent = false, h
     return (jsxRuntime.jsx("li", { className: cn('tw-h-[50px] tw-self-stretch tw-px-squid-xs', transparent ? 'tw-bg-transparent' : 'tw-bg-grey-800'), children: jsxRuntime.jsxs(ContentTag, Object.assign({ className: cn('tw-flex tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xs tw-text-grey-300', link && 'hover:tw-bg-material-light-thin') }, contentTagProps, { children: [icon, jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-1 tw-items-center tw-gap-squid-xxs tw-self-stretch", children: [jsxRuntime.jsx(BodyText, { size: "small", children: label }), helpTooltip ? (jsxRuntime.jsx(Tooltip, Object.assign({}, helpTooltip, { children: helpIcon }))) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: helpIcon }))] }), jsxRuntime.jsx("div", { className: cn('tw-flex tw-h-squid-l tw-items-center tw-justify-center tw-rounded-squid-xs', showDetailsBorder &&
                         'tw-rounded-squid-xs tw-border tw-border-solid tw-border-material-light-thin tw-bg-material-dark-thin'), children: !!link ? (jsxRuntime.jsx(SquareArrowTopRight2Icon, { className: "tw-text-material-light-average" })) : (controls.map((control, index) => {
                         if (control.type === 'switch') {
-                            const switchControl = (jsxRuntime.jsx(Switch, { size: "large", checked: control.checked, onChange: control.onChange }, index));
+                            const switchControl = (jsxRuntime.jsx(Switch, { size: "large", checked: control.checked, onChange: control.onChange, disabled: control.disabled }, index));
                             if (control.tooltip) {
                                 return jsxRuntime.jsx(Tooltip, Object.assign({}, control.tooltip, { children: switchControl }));
                             }
@@ -3500,42 +3459,82 @@ function TokenPair({ firstToken, secondToken }) {
                 }, children: [jsxRuntime.jsx("img", { className: "tw-ml-[1px] tw-aspect-square tw-w-10", src: firstToken.imageUrl }), jsxRuntime.jsx("img", { className: "tw-mr-[1px] tw-aspect-square tw-w-10", src: secondToken.imageUrl })] })] }));
 }
 
+const themeKeysToReplace = [
+    {
+        userKey: 'content',
+        internalKey: 'grey',
+    },
+    {
+        userKey: 'accent',
+        internalKey: 'royal',
+    },
+    {
+        userKey: 'transparent',
+        internalKey: 'material',
+    },
+];
 /**
  * Parsing the user readable config to css variables
+ * Also maps the public theme variables to the internal theme variables
+ * example user theme:
+ * {
+ *   'content-100': '#000',
+ *   'content-200': '#000',
+ *   'accent-400': '#000',
+ *   'transparent-light-thin': '#000'
+ * }
+ * Resulting in:
+ * {
+ *   'grey-100': '#000',
+ *   'grey-200': '#000',
+ *   'royal-400': '#000',
+ *   'material-light-thin': '#000'
+ * }
  * @param style
  */
-const getParsedStyle = (style) => {
-    if (style) {
-        const styleKeys = Object.keys(themeTypesKeys);
-        const parsed = styleKeys.map((sk) => {
-            const themeItem = themeTypesKeys[sk];
-            let userValue = style[sk];
-            return {
-                [themeItem.cssVariable]: userValue,
-            };
-        });
-        // adds a variant with 0.05 opacity for each color
-        // will result in variables like this:
-        // var(--squid-theme-grey-100-005) --> grey-100 with 0.05 opacity
-        // styleKeys.forEach((sk) => {
-        //   const themeItem = themeTypesKeys[sk]
-        //   const valueWith005Opacity = getHexColorFromOpacityPercentage(
-        //     style[sk], // i.e "#ffffff"
-        //     0.05,
-        //   )
-        //   // { "--squid-theme-grey-100-005": "#ffffff80" }
-        //   parsed.push({
-        //     [`${themeItem.cssVariable}-005`]: valueWith005Opacity,
-        //   })
-        // })
-        parsed.push({
-            [`${themeTypesKeys['grey-100'].cssVariable}-005`]: getHexColorFromOpacityPercentage(style['grey-100'], 0.05),
-        });
-        return parsed.reduce((a, v) => {
-            const key = Object.keys(v)[0];
-            return Object.assign(Object.assign({}, a), { [key]: v[key] });
-        });
-    }
+const parseSquidTheme = (userTheme) => {
+    if (!userTheme)
+        return undefined;
+    const squidTheme = Object.entries(userTheme).reduce((internalKeys, [userKey, userValue]) => {
+        // content-* -> grey-*
+        // accent-* -> royal-*
+        // transparent-* -> material-*
+        const keyToReplace = themeKeysToReplace.find((k) => userKey.includes(k.userKey));
+        if (keyToReplace) {
+            const newKey = userKey.replace(keyToReplace.userKey, keyToReplace.internalKey);
+            internalKeys[newKey] = userValue;
+        }
+        return internalKeys;
+    }, {});
+    const styleKeys = Object.keys(themeTypesKeys);
+    const parsed = styleKeys.map((sk) => {
+        const themeItem = themeTypesKeys[sk];
+        let userValue = squidTheme[sk];
+        return {
+            [themeItem.cssVariable]: userValue,
+        };
+    });
+    // adds a variant with 0.05 opacity for each color
+    // will result in variables like this:
+    // var(--squid-theme-grey-100-005) --> grey-100 with 0.05 opacity
+    // styleKeys.forEach((sk) => {
+    //   const themeItem = themeTypesKeys[sk]
+    //   const valueWith005Opacity = getHexColorFromOpacityPercentage(
+    //     style[sk], // i.e "#ffffff"
+    //     0.05,
+    //   )
+    //   // { "--squid-theme-grey-100-005": "#ffffff80" }
+    //   parsed.push({
+    //     [`${themeItem.cssVariable}-005`]: valueWith005Opacity,
+    //   })
+    // })
+    parsed.push({
+        [`${themeTypesKeys['grey-100'].cssVariable}-005`]: getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.05),
+    });
+    return parsed.reduce((a, v) => {
+        const key = Object.keys(v)[0];
+        return Object.assign(Object.assign({}, a), { [key]: v[key] });
+    });
 };
 /**
  * Returns a hexadecimal color with opacity based on the given color and opacity percentage.
@@ -3554,7 +3553,7 @@ function getHexColorFromOpacityPercentage(color, opacity) {
 }
 
 function SquidConfigProvider({ theme, children, themeType = 'light', }) {
-    const parsedStyle = getParsedStyle(theme);
+    const parsedStyle = parseSquidTheme(theme);
     return (jsxRuntime.jsx("div", { style: parsedStyle, "data-squid-theme-type": themeType, className: "tw-group tw-relative tw-font-geist", children: children }));
 }
 

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DropdownMenuItemProps } from './DropdownMenuItem';
 interface HistoryItemProps {
     firstImageUrl: string;
@@ -10,6 +11,7 @@ interface HistoryItemProps {
     fromAmount: string;
     toAmount: string;
     dropdownMenuItems?: DropdownMenuItemProps[];
+    itemsContainerRef?: React.RefObject<HTMLElement>;
 }
-export declare function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel, dropdownMenuItems, }: HistoryItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel, dropdownMenuItems, itemsContainerRef, }: HistoryItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/components/lists/SettingsItem.d.ts

@@ -26,6 +26,7 @@ export type SettingsControl = {
     checked: boolean;
     onChange: (checked: boolean) => void;
     tooltip?: Omit<TooltipProps, 'children'>;
+    disabled?: boolean;
 };
 export interface SettingsItemProps {
     icon: React.ReactNode;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { SquidTheme } from '../types/config';
 import { ThemeType } from '../types/components';
+import { SquidTheme } from '../types/config';
 export declare function SquidConfigProvider({ theme, children, themeType, }: {
     theme: SquidTheme;
     children?: React.ReactNode;

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

@@ -1,9 +1,24 @@
 import { SquidTheme } from '../../types/config';
 /**
  * Parsing the user readable config to css variables
+ * Also maps the public theme variables to the internal theme variables
+ * example user theme:
+ * {
+ *   'content-100': '#000',
+ *   'content-200': '#000',
+ *   'accent-400': '#000',
+ *   'transparent-light-thin': '#000'
+ * }
+ * Resulting in:
+ * {
+ *   'grey-100': '#000',
+ *   'grey-200': '#000',
+ *   'royal-400': '#000',
+ *   'material-light-thin': '#000'
+ * }
  * @param style
  */
-export declare const getParsedStyle: (style?: SquidTheme) => {
+export declare const parseSquidTheme: (userTheme?: SquidTheme) => {
     [key: string]: string | undefined;
 } | undefined;
 export declare function getContrastColor({ r, g, b, }: {

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

@@ -2,7 +2,7 @@
  * The color format must be of type #FFFFFF
  */
 export type ColorType = `#${string}${string}${string}${string}${string}${string}`;
-export interface SquidTheme {
+export interface InternalSquidTheme {
     'grey-100': string;
     'grey-200': string;
     'grey-300': string;
@@ -12,14 +12,8 @@ export interface SquidTheme {
     'grey-700': string;
     'grey-800': string;
     'grey-900': string;
-    'royal-100': string;
-    'royal-200': string;
-    'royal-300': string;
     'royal-400': string;
     'royal-500': string;
-    'royal-600': string;
-    'royal-700': string;
-    'royal-800': string;
     'status-positive': string;
     'status-negative': string;
     'material-light-thin': string;
@@ -28,19 +22,32 @@ export interface SquidTheme {
     'material-dark-thin': string;
     'material-dark-average': string;
     'material-dark-thick': string;
-    'volt-300': string;
-    'volt-400': string;
-    'volt-600': string;
-    'volt-700': string;
-    'volt-800': string;
-    'volt-900': string;
-    'accent-salmon': string;
-    'accent-gold': 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-400': string;
+    'accent-500': string;
+    'status-positive': string;
+    'status-negative': string;
+    'transparent-light-thin': string;
+    'transparent-light-average': string;
+    'transparent-light-thick': string;
+    'transparent-dark-thin': string;
+    'transparent-dark-average': string;
+    'transparent-dark-thick': string;
+};
 export declare const SQUID_THEME_CSS_VARIABLE_PREFIX = "--squid-theme-";
 /**
  * Mapping between readable variables name and css variables used TailwindCSS config
  */
-export declare const themeTypesKeys: Record<keyof SquidTheme, {
+export declare const themeTypesKeys: Record<keyof InternalSquidTheme, {
     cssVariable: string;
 }>;

package/dist/esm/index.js

@@ -2678,12 +2678,6 @@ const SQUID_THEME_CSS_VARIABLE_PREFIX = '--squid-theme-';
  * Mapping between readable variables name and css variables used TailwindCSS config
  */
 const themeTypesKeys = {
-    'accent-gold': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}accent-gold`,
-    },
-    'accent-salmon': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}accent-salmon`,
-    },
     'grey-100': {
         cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-100`,
     },
@@ -2729,54 +2723,18 @@ const themeTypesKeys = {
     'material-light-thin': {
         cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-thin`,
     },
-    'royal-100': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-100`,
-    },
-    'royal-200': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-200`,
-    },
-    'royal-300': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-300`,
-    },
     'royal-400': {
         cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-400`,
     },
     'royal-500': {
         cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-500`,
     },
-    'royal-600': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-600`,
-    },
-    'royal-700': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-700`,
-    },
-    'royal-800': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-800`,
-    },
     'status-negative': {
         cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-negative`,
     },
     'status-positive': {
         cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-positive`,
     },
-    'volt-300': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-300`,
-    },
-    'volt-400': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-400`,
-    },
-    'volt-600': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-600`,
-    },
-    'volt-700': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-700`,
-    },
-    'volt-800': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-800`,
-    },
-    'volt-900': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-900`,
-    },
 };
 
 function PlusIcon() {
@@ -3189,13 +3147,14 @@ const dropdownPositionClassMap = {
     bottom: 'tw-right-[calc(100%-10px)] tw-top-7',
     center: 'tw-right-[40px] -tw-top-[55px]',
 };
-function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel = 'Pending', dropdownMenuItems, }) {
+function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel = 'Pending', dropdownMenuItems, itemsContainerRef, }) {
     const { isDropdownOpen, dropdownRef, openDropdownButtonRef, openDropdown } = useDropdownMenu();
     const [dropdownPosition, setDropdownPosition] = useState(null);
     const itemRef = useRef(null);
     const menuRef = useRef(null);
     // Effect to find the best position for the dropdown menu, so it's always visible for the user
     useEffect(() => {
+        var _a;
         if (!isDropdownOpen) {
             // when the dropdown is closed, we want to reset its position
             // because user may scroll, and the old position may be out of view, so we'll need to recalculate it
@@ -3203,7 +3162,7 @@ function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted,
             return;
         }
         const item = itemRef.current;
-        const itemsContainer = item === null || item === void 0 ? void 0 : item.parentElement;
+        const itemsContainer = (_a = itemsContainerRef === null || itemsContainerRef === void 0 ? void 0 : itemsContainerRef.current) !== null && _a !== void 0 ? _a : item === null || item === void 0 ? void 0 : item.parentElement;
         const dropdownMenu = menuRef.current;
         if (!item || !dropdownRef.current || !itemsContainer || !dropdownMenu) {
             return;
@@ -3238,7 +3197,7 @@ function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted,
         }
     }, [isDropdownOpen, menuRef, dropdownPosition, itemRef]);
     return (jsx("li", { ref: itemRef, className: "tw-h-list-item-large tw-min-w-list-item-small tw-self-stretch tw-bg-grey-900 tw-px-squid-xs tw-text-grey-300", children: jsxs("div", { className: "tw-group/history-item tw-relative tw-flex tw-flex-shrink-0 tw-cursor-pointer tw-items-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin", children: [jsxs("div", { className: "tw-relative tw-h-10 tw-w-[60px]", children: [isPending ? (jsx("span", { className: "tw-absolute -tw-left-[5px] tw-bottom-0 tw-z-30 tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-grey-900 tw-bg-royal-400 tw-p-0.5", children: jsx(DotGrid1x3HorizontalIcon, {}) })) : null, jsx("img", { src: firstImageUrl, className: "tw-absolute tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" }), jsx("img", { src: secondImageUrl, className: "tw-absolute tw-left-5 tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" })] }), jsxs("div", { className: "tw-flex tw-h-10 tw-flex-1 tw-flex-col tw-self-stretch", children: [jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-justify-between tw-text-grey-500", children: [jsxs("div", { className: "tw-flex tw-items-center", children: [jsx(CaptionText, { children: fromLabel }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronRightSmallIcon, {}) }), jsx(CaptionText, { children: toLabel })] }), !!dropdownMenuItems && (jsx("button", { className: "tw-peer tw-absolute tw-right-squid-xxs tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-material-light-thin tw-p-2 tw-text-grey-300 tw-opacity-0 tw-transition-opacity focus:tw-opacity-100 group-hover/history-item:tw-opacity-100", onClick: openDropdown, ref: openDropdownButtonRef, children: jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })), jsx("div", { className: cn(!!dropdownMenuItems &&
-                                        'tw-transition-opacity group-hover/history-item:tw-opacity-0 peer-focus:tw-opacity-0'), children: isPending ? (jsx(CaptionText, { className: "tw-text-royal-400", children: pendingLabel })) : (jsx(CaptionText, { children: dateCompleted })) })] }), jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: [jsx(BodyText, { size: "small", children: fromAmount }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronLargeRightIcon, {}) }), jsx(BodyText, { size: "small", children: toAmount })] })] }), isDropdownOpen && !!dropdownMenuItems ? (jsx(DropdownMenu, { menuRef: menuRef, 
+                                        'tw-transition-opacity group-hover/history-item:tw-hidden group-hover/history-item:tw-opacity-0 peer-focus:tw-hidden peer-focus:tw-opacity-0'), children: isPending ? (jsx(CaptionText, { className: "tw-text-royal-400", children: pendingLabel })) : (jsx(CaptionText, { children: dateCompleted })) })] }), jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: [jsx(BodyText, { size: "small", children: fromAmount }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronLargeRightIcon, {}) }), jsx(BodyText, { size: "small", children: toAmount })] })] }), isDropdownOpen && !!dropdownMenuItems ? (jsx(DropdownMenu, { menuRef: menuRef, 
                     // only show dropdown menu if there is a position defined for it
                     isHidden: !dropdownPosition, className: cn(!!dropdownPosition && dropdownPositionClassMap[dropdownPosition]), dropdownRef: dropdownRef, items: dropdownMenuItems })) : null] }) }));
 }
@@ -3288,7 +3247,7 @@ function SettingsItem({ icon, label, controls = [], link, transparent = false, h
     return (jsx("li", { className: cn('tw-h-[50px] tw-self-stretch tw-px-squid-xs', transparent ? 'tw-bg-transparent' : 'tw-bg-grey-800'), children: jsxs(ContentTag, Object.assign({ className: cn('tw-flex tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xs tw-text-grey-300', link && 'hover:tw-bg-material-light-thin') }, contentTagProps, { children: [icon, jsxs("div", { className: "tw-flex tw-flex-1 tw-items-center tw-gap-squid-xxs tw-self-stretch", children: [jsx(BodyText, { size: "small", children: label }), helpTooltip ? (jsx(Tooltip, Object.assign({}, helpTooltip, { children: helpIcon }))) : (jsx(Fragment, { children: helpIcon }))] }), jsx("div", { className: cn('tw-flex tw-h-squid-l tw-items-center tw-justify-center tw-rounded-squid-xs', showDetailsBorder &&
                         'tw-rounded-squid-xs tw-border tw-border-solid tw-border-material-light-thin tw-bg-material-dark-thin'), children: !!link ? (jsx(SquareArrowTopRight2Icon, { className: "tw-text-material-light-average" })) : (controls.map((control, index) => {
                         if (control.type === 'switch') {
-                            const switchControl = (jsx(Switch, { size: "large", checked: control.checked, onChange: control.onChange }, index));
+                            const switchControl = (jsx(Switch, { size: "large", checked: control.checked, onChange: control.onChange, disabled: control.disabled }, index));
                             if (control.tooltip) {
                                 return jsx(Tooltip, Object.assign({}, control.tooltip, { children: switchControl }));
                             }
@@ -3498,42 +3457,82 @@ function TokenPair({ firstToken, secondToken }) {
                 }, children: [jsx("img", { className: "tw-ml-[1px] tw-aspect-square tw-w-10", src: firstToken.imageUrl }), jsx("img", { className: "tw-mr-[1px] tw-aspect-square tw-w-10", src: secondToken.imageUrl })] })] }));
 }
 
+const themeKeysToReplace = [
+    {
+        userKey: 'content',
+        internalKey: 'grey',
+    },
+    {
+        userKey: 'accent',
+        internalKey: 'royal',
+    },
+    {
+        userKey: 'transparent',
+        internalKey: 'material',
+    },
+];
 /**
  * Parsing the user readable config to css variables
+ * Also maps the public theme variables to the internal theme variables
+ * example user theme:
+ * {
+ *   'content-100': '#000',
+ *   'content-200': '#000',
+ *   'accent-400': '#000',
+ *   'transparent-light-thin': '#000'
+ * }
+ * Resulting in:
+ * {
+ *   'grey-100': '#000',
+ *   'grey-200': '#000',
+ *   'royal-400': '#000',
+ *   'material-light-thin': '#000'
+ * }
  * @param style
  */
-const getParsedStyle = (style) => {
-    if (style) {
-        const styleKeys = Object.keys(themeTypesKeys);
-        const parsed = styleKeys.map((sk) => {
-            const themeItem = themeTypesKeys[sk];
-            let userValue = style[sk];
-            return {
-                [themeItem.cssVariable]: userValue,
-            };
-        });
-        // adds a variant with 0.05 opacity for each color
-        // will result in variables like this:
-        // var(--squid-theme-grey-100-005) --> grey-100 with 0.05 opacity
-        // styleKeys.forEach((sk) => {
-        //   const themeItem = themeTypesKeys[sk]
-        //   const valueWith005Opacity = getHexColorFromOpacityPercentage(
-        //     style[sk], // i.e "#ffffff"
-        //     0.05,
-        //   )
-        //   // { "--squid-theme-grey-100-005": "#ffffff80" }
-        //   parsed.push({
-        //     [`${themeItem.cssVariable}-005`]: valueWith005Opacity,
-        //   })
-        // })
-        parsed.push({
-            [`${themeTypesKeys['grey-100'].cssVariable}-005`]: getHexColorFromOpacityPercentage(style['grey-100'], 0.05),
-        });
-        return parsed.reduce((a, v) => {
-            const key = Object.keys(v)[0];
-            return Object.assign(Object.assign({}, a), { [key]: v[key] });
-        });
-    }
+const parseSquidTheme = (userTheme) => {
+    if (!userTheme)
+        return undefined;
+    const squidTheme = Object.entries(userTheme).reduce((internalKeys, [userKey, userValue]) => {
+        // content-* -> grey-*
+        // accent-* -> royal-*
+        // transparent-* -> material-*
+        const keyToReplace = themeKeysToReplace.find((k) => userKey.includes(k.userKey));
+        if (keyToReplace) {
+            const newKey = userKey.replace(keyToReplace.userKey, keyToReplace.internalKey);
+            internalKeys[newKey] = userValue;
+        }
+        return internalKeys;
+    }, {});
+    const styleKeys = Object.keys(themeTypesKeys);
+    const parsed = styleKeys.map((sk) => {
+        const themeItem = themeTypesKeys[sk];
+        let userValue = squidTheme[sk];
+        return {
+            [themeItem.cssVariable]: userValue,
+        };
+    });
+    // adds a variant with 0.05 opacity for each color
+    // will result in variables like this:
+    // var(--squid-theme-grey-100-005) --> grey-100 with 0.05 opacity
+    // styleKeys.forEach((sk) => {
+    //   const themeItem = themeTypesKeys[sk]
+    //   const valueWith005Opacity = getHexColorFromOpacityPercentage(
+    //     style[sk], // i.e "#ffffff"
+    //     0.05,
+    //   )
+    //   // { "--squid-theme-grey-100-005": "#ffffff80" }
+    //   parsed.push({
+    //     [`${themeItem.cssVariable}-005`]: valueWith005Opacity,
+    //   })
+    // })
+    parsed.push({
+        [`${themeTypesKeys['grey-100'].cssVariable}-005`]: getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.05),
+    });
+    return parsed.reduce((a, v) => {
+        const key = Object.keys(v)[0];
+        return Object.assign(Object.assign({}, a), { [key]: v[key] });
+    });
 };
 /**
  * Returns a hexadecimal color with opacity based on the given color and opacity percentage.
@@ -3552,7 +3551,7 @@ function getHexColorFromOpacityPercentage(color, opacity) {
 }
 
 function SquidConfigProvider({ theme, children, themeType = 'light', }) {
-    const parsedStyle = getParsedStyle(theme);
+    const parsedStyle = parseSquidTheme(theme);
     return (jsx("div", { style: parsedStyle, "data-squid-theme-type": themeType, className: "tw-group tw-relative tw-font-geist", children: children }));
 }
 

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DropdownMenuItemProps } from './DropdownMenuItem';
 interface HistoryItemProps {
     firstImageUrl: string;
@@ -10,6 +11,7 @@ interface HistoryItemProps {
     fromAmount: string;
     toAmount: string;
     dropdownMenuItems?: DropdownMenuItemProps[];
+    itemsContainerRef?: React.RefObject<HTMLElement>;
 }
-export declare function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel, dropdownMenuItems, }: HistoryItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel, dropdownMenuItems, itemsContainerRef, }: HistoryItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/components/lists/SettingsItem.d.ts

@@ -26,6 +26,7 @@ export type SettingsControl = {
     checked: boolean;
     onChange: (checked: boolean) => void;
     tooltip?: Omit<TooltipProps, 'children'>;
+    disabled?: boolean;
 };
 export interface SettingsItemProps {
     icon: React.ReactNode;

package/dist/esm/types/providers/SquidConfigProvider.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { SquidTheme } from '../types/config';
 import { ThemeType } from '../types/components';
+import { SquidTheme } from '../types/config';
 export declare function SquidConfigProvider({ theme, children, themeType, }: {
     theme: SquidTheme;
     children?: React.ReactNode;

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

@@ -1,9 +1,24 @@
 import { SquidTheme } from '../../types/config';
 /**
  * Parsing the user readable config to css variables
+ * Also maps the public theme variables to the internal theme variables
+ * example user theme:
+ * {
+ *   'content-100': '#000',
+ *   'content-200': '#000',
+ *   'accent-400': '#000',
+ *   'transparent-light-thin': '#000'
+ * }
+ * Resulting in:
+ * {
+ *   'grey-100': '#000',
+ *   'grey-200': '#000',
+ *   'royal-400': '#000',
+ *   'material-light-thin': '#000'
+ * }
  * @param style
  */
-export declare const getParsedStyle: (style?: SquidTheme) => {
+export declare const parseSquidTheme: (userTheme?: SquidTheme) => {
     [key: string]: string | undefined;
 } | undefined;
 export declare function getContrastColor({ r, g, b, }: {

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

@@ -2,7 +2,7 @@
  * The color format must be of type #FFFFFF
  */
 export type ColorType = `#${string}${string}${string}${string}${string}${string}`;
-export interface SquidTheme {
+export interface InternalSquidTheme {
     'grey-100': string;
     'grey-200': string;
     'grey-300': string;
@@ -12,14 +12,8 @@ export interface SquidTheme {
     'grey-700': string;
     'grey-800': string;
     'grey-900': string;
-    'royal-100': string;
-    'royal-200': string;
-    'royal-300': string;
     'royal-400': string;
     'royal-500': string;
-    'royal-600': string;
-    'royal-700': string;
-    'royal-800': string;
     'status-positive': string;
     'status-negative': string;
     'material-light-thin': string;
@@ -28,19 +22,32 @@ export interface SquidTheme {
     'material-dark-thin': string;
     'material-dark-average': string;
     'material-dark-thick': string;
-    'volt-300': string;
-    'volt-400': string;
-    'volt-600': string;
-    'volt-700': string;
-    'volt-800': string;
-    'volt-900': string;
-    'accent-salmon': string;
-    'accent-gold': 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-400': string;
+    'accent-500': string;
+    'status-positive': string;
+    'status-negative': string;
+    'transparent-light-thin': string;
+    'transparent-light-average': string;
+    'transparent-light-thick': string;
+    'transparent-dark-thin': string;
+    'transparent-dark-average': string;
+    'transparent-dark-thick': string;
+};
 export declare const SQUID_THEME_CSS_VARIABLE_PREFIX = "--squid-theme-";
 /**
  * Mapping between readable variables name and css variables used TailwindCSS config
  */
-export declare const themeTypesKeys: Record<keyof SquidTheme, {
+export declare const themeTypesKeys: Record<keyof InternalSquidTheme, {
     cssVariable: string;
 }>;

package/dist/index.css

@@ -2697,6 +2697,10 @@ input[type='number'] {
   display: flex;
 }
 
+.tw-group\/history-item:hover .group-hover\/history-item\:tw-hidden {
+  display: none;
+}
+
 .tw-group\/history-item:hover .group-hover\/history-item\:tw-opacity-0 {
   opacity: 0;
 }
@@ -2714,6 +2718,10 @@ input[type='number'] {
   display: block;
 }
 
+.tw-peer:focus ~ .peer-focus\:tw-hidden {
+  display: none;
+}
+
 .tw-peer:focus ~ .peer-focus\:tw-opacity-0 {
   opacity: 0;
 }

package/dist/index.d.ts

@@ -202,8 +202,9 @@ interface HistoryItemProps {
     fromAmount: string;
     toAmount: string;
     dropdownMenuItems?: DropdownMenuItemProps[];
+    itemsContainerRef?: React.RefObject<HTMLElement>;
 }
-declare function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel, dropdownMenuItems, }: HistoryItemProps): react_jsx_runtime.JSX.Element;
+declare function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel, dropdownMenuItems, itemsContainerRef, }: HistoryItemProps): react_jsx_runtime.JSX.Element;
 
 interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
     itemTitle: string | React.ReactNode;
@@ -269,6 +270,7 @@ type SettingsControl = {
     checked: boolean;
     onChange: (checked: boolean) => void;
     tooltip?: Omit<TooltipProps, 'children'>;
+    disabled?: boolean;
 };
 interface SettingsItemProps {
     icon: React.ReactNode;
@@ -441,41 +443,27 @@ interface HeadingTextProps {
 }
 declare function HeadingText({ children, bold, size }: HeadingTextProps): react_jsx_runtime.JSX.Element;
 
-interface SquidTheme {
-    'grey-100': string;
-    'grey-200': string;
-    'grey-300': string;
-    'grey-400': string;
-    'grey-500': string;
-    'grey-600': string;
-    'grey-700': string;
-    'grey-800': string;
-    'grey-900': string;
-    'royal-100': string;
-    'royal-200': string;
-    'royal-300': string;
-    'royal-400': string;
-    'royal-500': string;
-    'royal-600': string;
-    'royal-700': string;
-    'royal-800': string;
+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-400': string;
+    'accent-500': string;
     'status-positive': string;
     'status-negative': string;
-    'material-light-thin': string;
-    'material-light-average': string;
-    'material-light-thick': string;
-    'material-dark-thin': string;
-    'material-dark-average': string;
-    'material-dark-thick': string;
-    'volt-300': string;
-    'volt-400': string;
-    'volt-600': string;
-    'volt-700': string;
-    'volt-800': string;
-    'volt-900': string;
-    'accent-salmon': string;
-    'accent-gold': string;
-}
+    'transparent-light-thin': string;
+    'transparent-light-average': string;
+    'transparent-light-thick': string;
+    'transparent-dark-thin': string;
+    'transparent-dark-average': string;
+    'transparent-dark-thick': string;
+};
 
 declare function SquidConfigProvider({ theme, children, themeType, }: {
     theme: SquidTheme;

package/package.json

@@ -5,7 +5,7 @@
     "url": "git+https://github.com/0xsquid/squid-ui.git"
   },
   "description": "Squid's UI components",
-  "version": "0.9.3",
+  "version": "0.9.5",
   "author": "",
   "license": "MIT",
   "scripts": {