@0xsquid/ui 0.9.4 → 0.10.0

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/stories/buttons/BoostButton.stories.d.ts

@@ -6,3 +6,4 @@ type Story = StoryObj<typeof meta>;
 export declare const Normal: Story;
 export declare const Boost: Story;
 export declare const Disabled: Story;
+export declare const DisabledWithDelayedTooltip: Story;

package/dist/esm/types/stories/buttons/Button.stories.d.ts

@@ -19,3 +19,5 @@ export declare const LargePrimary: Story;
 export declare const LargeSecondary: Story;
 export declare const LargeTertiary: Story;
 export declare const LargeDisabled: Story;
+export declare const LargeAndLink: Story;
+export declare const LargeAndLinkDisabled: Story;

package/dist/esm/types/stories/layout/Boost.stories.d.ts

@@ -6,3 +6,4 @@ type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Boosted: Story;
 export declare const Disabled: Story;
+export declare const DisabledWithDelayedTooltip: Story;

package/dist/esm/types/stories/layout/DetailsToolbar.stories.d.ts

@@ -9,3 +9,4 @@ export declare const Empty: Story;
 export declare const Error: Story;
 export declare const ErrorHelpButton: Story;
 export declare const BoostDisabled: Story;
+export declare const BoostDisabledWithDelayedTooltip: Story;

package/dist/esm/types/stories/lists/ListItem.stories.d.ts

@@ -5,6 +5,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Large: Story;
 export declare const LargeWithLongTitle: Story;
+export declare const LargeWithLongTitleAndSubtitle: Story;
 export declare const LargeRoundedFull: Story;
 export declare const LargeWithSubtitle: Story;
 export declare const LargeWithDetail: Story;

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

@@ -788,10 +788,6 @@ video {
   margin-left: -0.25rem;
 }
 
-.-tw-ml-\[5px\] {
-  margin-left: -5px;
-}
-
 .-tw-ml-squid-xs {
   margin-left: -0.625rem;
 }
@@ -888,10 +884,6 @@ video {
   height: 195px;
 }
 
-.tw-h-\[200px\] {
-  height: 200px;
-}
-
 .tw-h-\[205px\] {
   height: 205px;
 }
@@ -900,10 +892,6 @@ video {
   height: 21px;
 }
 
-.tw-h-\[22px\] {
-  height: 22px;
-}
-
 .tw-h-\[240px\] {
   height: 240px;
 }
@@ -948,10 +936,6 @@ video {
   height: 60px;
 }
 
-.tw-h-\[90px\] {
-  height: 90px;
-}
-
 .tw-h-\[95px\] {
   height: 95px;
 }
@@ -1760,10 +1744,6 @@ video {
   border-width: 1px;
 }
 
-.tw-border-\[5px\] {
-  border-width: 5px;
-}
-
 .tw-border-b {
   border-bottom-width: 1px;
 }
@@ -1792,10 +1772,6 @@ video {
   border-color: var(--squid-theme-grey-900);
 }
 
-.tw-border-material-dark-average {
-  border-color: var(--squid-theme-material-dark-average);
-}
-
 .tw-border-material-light-thick {
   border-color: var(--squid-theme-material-light-thick);
 }
@@ -1989,10 +1965,6 @@ video {
   padding: 0.625rem;
 }
 
-.tw-p-squid-xxs {
-  padding: 0.3125rem;
-}
-
 .\!tw-px-squid-m {
   padding-left: 1.25rem !important;
   padding-right: 1.25rem !important;
@@ -2296,10 +2268,18 @@ video {
   line-height: 10px !important;
 }
 
+.\!tw-leading-\[11px\] {
+  line-height: 11px !important;
+}
+
 .\!tw-leading-\[13px\] {
   line-height: 13px !important;
 }
 
+.\!tw-leading-\[14px\] {
+  line-height: 14px !important;
+}
+
 .\!tw-leading-\[18px\] {
   line-height: 18px !important;
 }
@@ -2542,6 +2522,10 @@ video {
   transition-duration: 150ms;
 }
 
+.tw-duration-100 {
+  transition-duration: 100ms;
+}
+
 .tw-duration-200 {
   transition-duration: 200ms;
 }
@@ -2550,6 +2534,10 @@ video {
   transition-duration: 300ms;
 }
 
+.tw-duration-\[50ms\] {
+  transition-duration: 50ms;
+}
+
 .tw-ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -2603,13 +2591,15 @@ li {
 }
 
 button,
-input {
+input,
+a {
   outline: 2px solid transparent;
   outline-offset: -1px;
 }
 
 button:focus,
-input:focus {
+input:focus,
+a:focus {
   outline-width: 2px;
   outline-color: var(--squid-theme-royal-500);
 }
@@ -2648,8 +2638,26 @@ input[type='number'] {
   outline-color: var(--squid-theme-status-negative);
 }
 
-.hover\:tw-block:hover {
-  display: block;
+@keyframes tw-display-delayed {
+  0%, 90% {
+    display: none;
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  100% {
+    display: block;
+    visibility: visible;
+    opacity: 1;
+  }
+}
+
+.hover\:tw-animate-display-delayed:hover {
+  animation: tw-display-delayed var(--squid-animation-display-delayed-duration) ease-out forwards;
+}
+
+.hover\:tw-bg-grey-700:hover {
+  background-color: var(--squid-theme-grey-700);
 }
 
 .hover\:tw-bg-material-light-thin:hover {
@@ -2660,6 +2668,10 @@ input[type='number'] {
   color: var(--squid-theme-grey-400);
 }
 
+.hover\:tw-opacity-100:hover {
+  opacity: 1;
+}
+
 .focus\:tw-bg-material-light-thin:focus {
   background-color: var(--squid-theme-material-light-thin);
 }
@@ -2693,14 +2705,16 @@ input[type='number'] {
   display: block;
 }
 
-.tw-group\/list-item:hover .group-hover\/list-item\:tw-flex {
-  display: flex;
-}
-
 .tw-group\/history-item:hover .group-hover\/history-item\:tw-hidden {
   display: none;
 }
 
+.tw-group\/swap-step-item-button:hover .group-hover\/swap-step-item-button\:tw-from-grey-700 {
+  --tw-gradient-from: var(--squid-theme-grey-700) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .tw-group\/history-item:hover .group-hover\/history-item\:tw-opacity-0 {
   opacity: 0;
 }
@@ -2709,13 +2723,35 @@ input[type='number'] {
   opacity: 1;
 }
 
+.tw-group\/list-item:hover .group-hover\/list-item\:tw-opacity-100 {
+  opacity: 1;
+}
+
+.tw-group\/list-item:focus .group-focus\/list-item\:tw-opacity-100 {
+  opacity: 1;
+}
+
 .tw-group:disabled .group-disabled\:tw-grayscale {
   --tw-grayscale: grayscale(100%);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
-.tw-peer:hover ~ .peer-hover\:tw-block {
-  display: block;
+@keyframes tw-display-delayed {
+  0%, 90% {
+    display: none;
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  100% {
+    display: block;
+    visibility: visible;
+    opacity: 1;
+  }
+}
+
+.tw-peer:hover ~ .peer-hover\:tw-animate-display-delayed {
+  animation: tw-display-delayed var(--squid-animation-display-delayed-duration) ease-out forwards;
 }
 
 .tw-peer:focus ~ .peer-focus\:tw-hidden {
@@ -2753,7 +2789,7 @@ input[type='number'] {
 }
 
 .data-\[boost-mode\=boost\]\:tw-animate-move-to-left-with-spring-bounce[data-boost-mode=boost] {
-  animation: tw-move-to-left-with-spring-bounce var(--boost-animation-duration, 0s) ease-out both;
+  animation: tw-move-to-left-with-spring-bounce var(--squid-animation-move-with-spring-bounce-duration, 0s) ease-out both;
 }
 
 @keyframes tw-move-to-right-with-spring-bounce {
@@ -2775,7 +2811,7 @@ input[type='number'] {
 }
 
 .data-\[boost-mode\=normal\]\:tw-animate-move-to-right-with-spring-bounce[data-boost-mode=normal] {
-  animation: tw-move-to-right-with-spring-bounce var(--boost-animation-duration, 0s) ease-out both;
+  animation: tw-move-to-right-with-spring-bounce var(--squid-animation-move-with-spring-bounce-duration, 0s) ease-out both;
 }
 
 .tw-group[data-boost-mode=boost] .group-data-\[boost-mode\=boost\]\:tw-left-\[calc\(50\%-2px\)\] {
@@ -2794,6 +2830,14 @@ input[type='number'] {
   background-image: linear-gradient(180deg, #A577D8 0%, #BF91F2 100%);
 }
 
+.tw-group[data-squid-theme-type=dark] .group-data-\[squid-theme-type\=dark\]\:tw-text-grey-100 {
+  color: var(--squid-theme-grey-100);
+}
+
+.tw-group[data-squid-theme-type=light] .group-data-\[squid-theme-type\=light\]\:tw-text-grey-900 {
+  color: var(--squid-theme-grey-900);
+}
+
 .tw-group[data-squid-theme-type=dark] .group-data-\[squid-theme-type\=dark\]\:tw-shadow-elevation-dark-2 {
   --tw-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.20), 0px 5px 20px -1px rgba(0, 0, 0, 0.33);
   --tw-shadow-colored: 0px 2px 5px 1px var(--tw-shadow-color), 0px 5px 20px -1px var(--tw-shadow-color);

package/dist/index.d.ts

@@ -72,8 +72,9 @@ interface BoostButtonProps {
         boostMode: BoostMode;
     }) => void;
     boostDisabledMessage?: string;
+    tooltipDisplayDelayMs?: number;
 }
-declare function BoostButton({ boostMode, onToggleBoostMode, canToggleBoostMode, boostDisabledMessage, }: BoostButtonProps): react_jsx_runtime.JSX.Element;
+declare function BoostButton({ boostMode, onToggleBoostMode, canToggleBoostMode, boostDisabledMessage, tooltipDisplayDelayMs, }: BoostButtonProps): react_jsx_runtime.JSX.Element;
 
 interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     label?: string;
@@ -81,8 +82,9 @@ interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     variant: ButtonVariant;
     size: ButtonSize;
     disabled?: boolean;
+    link?: string;
 }
-declare function Button({ label, disabled, size, variant, icon, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+declare function Button({ label, disabled, size, variant, icon, link, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 
 interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
     label?: string;
@@ -147,8 +149,9 @@ interface TooltipProps {
     containerClassName?: string;
     childrenClassName?: string;
     tooltipClassName?: string;
+    displayDelayMs?: number;
 }
-declare function Tooltip({ children, tooltipContent, tooltipWidth, threshold, containerClassName, childrenClassName, tooltipClassName, }: TooltipProps): react_jsx_runtime.JSX.Element;
+declare function Tooltip({ children, tooltipContent, tooltipWidth, threshold, containerClassName, childrenClassName, tooltipClassName, displayDelayMs, }: TooltipProps): react_jsx_runtime.JSX.Element;
 
 interface BoostProps {
     boostMode: BoostMode;
@@ -158,8 +161,9 @@ interface BoostProps {
     estimatedTime: string;
     boostDisabledMessage?: string;
     canToggleBoostMode?: boolean;
+    boostTooltipDisplayDelayMs?: number;
 }
-declare function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode, }: BoostProps): react_jsx_runtime.JSX.Element;
+declare function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode, boostTooltipDisplayDelayMs, }: BoostProps): react_jsx_runtime.JSX.Element;
 
 interface DetailsToolbarProps {
     errorMessage?: string;
@@ -179,8 +183,9 @@ interface DetailsToolbarProps {
         label: string;
         onClick: () => void;
     };
+    boostTooltipDisplayDelayMs?: number;
 }
-declare function DetailsToolbar({ errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, }: DetailsToolbarProps): react_jsx_runtime.JSX.Element;
+declare function DetailsToolbar({ errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, boostTooltipDisplayDelayMs, }: DetailsToolbarProps): react_jsx_runtime.JSX.Element;
 
 interface DropdownMenuItemProps {
     label: string;
@@ -206,7 +211,7 @@ interface HistoryItemProps {
 }
 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> {
+interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     itemTitle: string | React.ReactNode;
     mainImageUrl?: string;
     secondaryImageUrl?: string;
@@ -443,44 +448,30 @@ 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;
+    theme?: SquidTheme;
     children?: React.ReactNode;
     themeType?: ThemeType;
 }): react_jsx_runtime.JSX.Element;

package/package.json

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

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

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

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

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { ProfileView } from '../../components/views/ProfileView';
-declare const meta: Meta<typeof ProfileView>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;

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

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

package/dist/esm/types/stories/views/ProfileView.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { ProfileView } from '../../components/views/ProfileView';
-declare const meta: Meta<typeof ProfileView>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;