@0xsquid/ui 0.10.1 → 0.11.0

package/dist/index.css

@@ -649,6 +649,10 @@ video {
   bottom: 0.5rem;
 }
 
+.tw-bottom-4 {
+  bottom: 1rem;
+}
+
 .tw-bottom-7 {
   bottom: 1.75rem;
 }
@@ -685,6 +689,10 @@ video {
   left: calc(50% - 1.5px);
 }
 
+.tw-left-squid-l {
+  left: 1.875rem;
+}
+
 .tw-left-squid-xs {
   left: 0.625rem;
 }
@@ -936,6 +944,14 @@ video {
   height: 60px;
 }
 
+.tw-h-\[660px\] {
+  height: 660px;
+}
+
+.tw-h-\[94px\] {
+  height: 94px;
+}
+
 .tw-h-\[95px\] {
   height: 95px;
 }
@@ -1008,10 +1024,6 @@ video {
   max-height: 60px;
 }
 
-.tw-max-h-\[660px\] {
-  max-height: 660px;
-}
-
 .tw-max-h-\[80px\] {
   max-height: 80px;
 }
@@ -1096,6 +1108,14 @@ video {
   width: 1.5px;
 }
 
+.tw-w-\[1260px\] {
+  width: 1260px;
+}
+
+.tw-w-\[135px\] {
+  width: 135px;
+}
+
 .tw-w-\[140px\] {
   width: 140px;
 }
@@ -1112,6 +1132,10 @@ video {
   width: 190px;
 }
 
+.tw-w-\[22px\] {
+  width: 22px;
+}
+
 .tw-w-\[299px\] {
   width: 299px;
 }
@@ -1176,14 +1200,14 @@ video {
   width: 72px;
 }
 
-.tw-w-\[76px\] {
-  width: 76px;
-}
-
 .tw-w-\[80px\] {
   width: 80px;
 }
 
+.tw-w-\[84px\] {
+  width: 84px;
+}
+
 .tw-w-\[90px\] {
   width: 90px;
 }
@@ -1325,11 +1349,6 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.-tw-translate-x-\[2px\] {
-  --tw-translate-x: -2px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .-tw-translate-x-full {
   --tw-translate-x: -100%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1458,6 +1477,20 @@ video {
   animation: tw-loading-gradient 1s ease-in-out both infinite;
 }
 
+@keyframes tw-move-loading-cover-to-right {
+  0% {
+    transform: translateX(-64%);
+  }
+
+  100% {
+    transform: translateX(0%);
+  }
+}
+
+.tw-animate-move-loading-cover-to-right {
+  animation: tw-move-loading-cover-to-right 1.4s linear infinite;
+}
+
 @keyframes tw-slide-to-bottom {
   0% {
     transform: translateY(0);
@@ -1698,10 +1731,6 @@ video {
   border-radius: 0.75rem;
 }
 
-.tw-rounded-bl-full {
-  border-bottom-left-radius: 9999px;
-}
-
 .tw-rounded-bl-squid-l {
   border-bottom-left-radius: 1.875rem;
 }
@@ -1718,10 +1747,6 @@ video {
   border-top-left-radius: 25px;
 }
 
-.tw-rounded-tl-full {
-  border-top-left-radius: 9999px;
-}
-
 .tw-rounded-tl-squid-l {
   border-top-left-radius: 1.875rem;
 }
@@ -1815,13 +1840,12 @@ video {
   background-color: var(--squid-theme-grey-600) !important;
 }
 
-.\!tw-bg-royal-400 {
-  background-color: var(--squid-theme-royal-400) !important;
+.\!tw-bg-grey-800 {
+  background-color: var(--squid-theme-grey-800) !important;
 }
 
-.tw-bg-\[\#FBFBFD\] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(251 251 253 / var(--tw-bg-opacity));
+.\!tw-bg-royal-400 {
+  background-color: var(--squid-theme-royal-400) !important;
 }
 
 .tw-bg-blue-950 {
@@ -1891,6 +1915,10 @@ video {
   background-color: rgb(2 6 23 / var(--tw-bg-opacity));
 }
 
+.tw-bg-status-negative {
+  background-color: var(--squid-theme-status-negative);
+}
+
 .tw-bg-status-positive {
   background-color: var(--squid-theme-status-positive);
 }
@@ -1899,6 +1927,10 @@ video {
   background-color: transparent;
 }
 
+.tw-bg-dark-cover {
+  background-image: linear-gradient(90deg, var(--squid-theme-material-dark-thick) 45.4%, transparent 50.85%, var(--squid-theme-material-dark-thick) 55.61%);
+}
+
 .tw-bg-gradient-to-b {
   background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
 }
@@ -2374,6 +2406,10 @@ video {
   letter-spacing: -1.05px;
 }
 
+.\!tw-text-grey-600 {
+  color: var(--squid-theme-grey-600) !important;
+}
+
 .tw-text-\[\#FBFBFD\] {
   --tw-text-opacity: 1;
   color: rgb(251 251 253 / var(--tw-text-opacity));
@@ -2444,6 +2480,10 @@ video {
   opacity: 0.33;
 }
 
+.tw-opacity-50 {
+  opacity: 0.5;
+}
+
 .tw-opacity-66 {
   opacity: 0.66;
 }
@@ -2632,6 +2672,10 @@ input[type='number'] {
   -moz-appearance: textfield;
 }
 
+:invalid {
+  outline-color: var(--squid-theme-status-negative);
+}
+
 .placeholder\:tw-text-grey-600::-moz-placeholder {
   color: var(--squid-theme-grey-600);
 }
@@ -2828,6 +2872,14 @@ input[type='number'] {
   left: calc(50% - 6px);
 }
 
+.tw-group[data-squid-theme-type=dark] .group-data-\[squid-theme-type\=dark\]\:tw-bg-grey-100 {
+  background-color: var(--squid-theme-grey-100);
+}
+
+.tw-group[data-squid-theme-type=light] .group-data-\[squid-theme-type\=light\]\:tw-bg-grey-900 {
+  background-color: var(--squid-theme-grey-900);
+}
+
 .tw-group[data-squid-theme-type='dark'] .group-data-\[squid-theme-type\=\'dark\'\]\:tw-bg-royal-dark {
   background-image: linear-gradient(180deg, #BF91F2 0%, #A577D8 100%);
 }
@@ -2840,10 +2892,34 @@ input[type='number'] {
   color: var(--squid-theme-grey-100);
 }
 
+.tw-group[data-squid-theme-type=dark] .group-data-\[squid-theme-type\=dark\]\:tw-text-material-light-average {
+  color: var(--squid-theme-material-light-average);
+}
+
+.tw-group[data-squid-theme-type=dark] .group-data-\[squid-theme-type\=dark\]\:tw-text-material-light-thick {
+  color: var(--squid-theme-material-light-thick);
+}
+
+.tw-group[data-squid-theme-type=dark] .group-data-\[squid-theme-type\=dark\]\:tw-text-material-light-thin {
+  color: var(--squid-theme-material-light-thin);
+}
+
 .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=light] .group-data-\[squid-theme-type\=light\]\:tw-text-material-dark-thick {
+  color: var(--squid-theme-material-dark-thick);
+}
+
+.tw-group[data-squid-theme-type=light] .group-data-\[squid-theme-type\=light\]\:tw-text-material-dark-thin {
+  color: var(--squid-theme-material-dark-thin);
+}
+
+.tw-group[data-squid-theme-type=light] .group-data-\[squid-theme-type\=light\]\:tw-text-transparent {
+  color: transparent;
+}
+
 .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

@@ -101,8 +101,9 @@ declare function FeeButton({ feeInUsd, chipLabel, className, ...props }: FeeButt
 interface SettingsButtonProps {
     label: string;
     isSelected?: boolean;
+    onClick?: () => void;
 }
-declare function SettingsButton({ label, isSelected, }: SettingsButtonProps): react_jsx_runtime.JSX.Element;
+declare function SettingsButton({ label, isSelected, onClick, }: SettingsButtonProps): react_jsx_runtime.JSX.Element;
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     placeholder?: string;
@@ -127,9 +128,12 @@ declare const NumericInput: ({ onParsedValueChanged, initialValue, forcedUpdateV
 interface SettingsSliderProps {
     value: number;
     type: 'percentage' | 'amount';
-    onChange?: (value: string) => void;
+    onChange?: (value: number) => void;
+    hasDecimals?: boolean;
+    min?: number;
+    max?: number;
 }
-declare function SettingsSlider({ value, type, onChange }: SettingsSliderProps): react_jsx_runtime.JSX.Element;
+declare function SettingsSlider({ value, type, onChange, hasDecimals, max, min, }: SettingsSliderProps): react_jsx_runtime.JSX.Element;
 
 interface SwitchProps {
     checked?: boolean;
@@ -196,20 +200,20 @@ interface DropdownMenuItemProps {
 }
 declare function DropdownMenuItem({ label, imageUrl, icon, labelClassName, onClick, }: DropdownMenuItemProps): react_jsx_runtime.JSX.Element;
 
+type HistoryItemStatus = 'completed' | 'pending' | 'failed';
 interface HistoryItemProps {
     firstImageUrl: string;
     secondImageUrl: string;
-    isPending?: boolean;
+    status: HistoryItemStatus;
     fromLabel: string;
     toLabel: string;
-    pendingLabel?: string;
     dateCompleted: string;
     fromAmount: string;
     toAmount: string;
     dropdownMenuItems?: DropdownMenuItemProps[];
     itemsContainerRef?: React.RefObject<HTMLElement>;
 }
-declare function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel, dropdownMenuItems, itemsContainerRef, }: HistoryItemProps): react_jsx_runtime.JSX.Element;
+declare function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, dropdownMenuItems, itemsContainerRef, status, }: HistoryItemProps): react_jsx_runtime.JSX.Element;
 
 interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     itemTitle: string | React.ReactNode;
@@ -253,22 +257,24 @@ type SettingsControl = {
     type: 'percentage';
     value: number;
     onChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    hasDecimals?: boolean;
     resetValueControl: {
         label: string;
         onSelect: () => void;
-        isSelected?: boolean;
+        value: number;
     };
 } | {
     type: 'amount';
+    value: number;
+    onChange: (value: number) => void;
     options: {
         value: number;
-        isSelected?: boolean;
-        onSelect?: () => void;
     }[];
     resetValueControl: {
         label: string;
-        onSelect: () => void;
-        isSelected?: boolean;
+        value: number;
     };
 } | {
     type: 'switch';
@@ -280,12 +286,12 @@ type SettingsControl = {
 interface SettingsItemProps {
     icon: React.ReactNode;
     label: string;
-    controls?: SettingsControl[];
+    control?: SettingsControl;
     link?: string;
     transparent?: boolean;
     helpTooltip?: Omit<TooltipProps, 'children'>;
 }
-declare function SettingsItem({ icon, label, controls, link, transparent, helpTooltip, }: SettingsItemProps): react_jsx_runtime.JSX.Element;
+declare function SettingsItem({ icon, label, control, link, transparent, helpTooltip, }: SettingsItemProps): react_jsx_runtime.JSX.Element;
 
 interface SwapDetailListItemProps {
     label: string;
@@ -372,6 +378,10 @@ interface NavigationBarProps {
 declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, onBackButtonClick, actions, }: NavigationBarProps): react_jsx_runtime.JSX.Element;
 
 declare function ProductCard({ children }: React.PropsWithChildren): react_jsx_runtime.JSX.Element;
+declare function BorderedContainer({ children, className, }: {
+    children: React.ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
 
 declare function ProfileHeaderBackground(): react_jsx_runtime.JSX.Element;
 
@@ -487,4 +497,4 @@ declare function useDropdownMenu(props?: {
     openDropdownButtonRef: React.RefObject<HTMLButtonElement>;
 };
 
-export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, ErrorMessage, FeeButton, HeadingText, HistoryItem, InfoBox, Input, ListItem, LoadingSkeleton, Menu, MenuItem, Modal, ModalContent, ModalContentDivider, NavigationBar, NumericInput, ProductCard, ProfileHeaderBackground, SectionTitle, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SquidConfigProvider, type SquidTheme, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, UsdAmount, useDropdownMenu };
+export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, BorderedContainer, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, ErrorMessage, FeeButton, HeadingText, HistoryItem, InfoBox, Input, ListItem, LoadingSkeleton, Menu, MenuItem, Modal, ModalContent, ModalContentDivider, NavigationBar, NumericInput, ProductCard, ProfileHeaderBackground, SectionTitle, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SquidConfigProvider, type SquidTheme, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, UsdAmount, useDropdownMenu };

package/package.json

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