@deframe-sdk/components 0.1.57 → 0.1.58

package/dist/index.d.mts

@@ -1594,10 +1594,11 @@ interface SwapAdvancedSettingsViewProps {
     title: string;
     isOpen: boolean;
     onOpenChange: (open: boolean) => void;
-    slippageBps: number;
-    onSlippageSelect: (bps: number) => void;
-    formatPercentage: (bps: number) => string;
-    slippageOptions: number[];
+    slippageBps: number | undefined;
+    onSlippageSelect: (bps: number | undefined) => void;
+    formatPercentage: (bps: number | undefined) => string;
+    slippageOptions: (number | undefined)[];
+    slippageLabel: string;
     percentageOptions: number[];
     onPercentageClick: (pct: number) => void;
     slippageFormatted: string;

package/dist/index.d.ts

@@ -1594,10 +1594,11 @@ interface SwapAdvancedSettingsViewProps {
     title: string;
     isOpen: boolean;
     onOpenChange: (open: boolean) => void;
-    slippageBps: number;
-    onSlippageSelect: (bps: number) => void;
-    formatPercentage: (bps: number) => string;
-    slippageOptions: number[];
+    slippageBps: number | undefined;
+    onSlippageSelect: (bps: number | undefined) => void;
+    formatPercentage: (bps: number | undefined) => string;
+    slippageOptions: (number | undefined)[];
+    slippageLabel: string;
     percentageOptions: number[];
     onPercentageClick: (pct: number) => void;
     slippageFormatted: string;

package/dist/index.js

@@ -6072,7 +6072,7 @@ var SwapToCardView = ({
   ] }) });
 };
 var baseClasses = [
-  "inline-flex items-center justify-center",
+  "flex-1 inline-flex items-center justify-center",
   "py-[3px] px-[10px]",
   "rounded-[var(--deframe-widget-size-radius-full)]",
   "cursor-pointer text-[12px] transition-all duration-150 outline-none",
@@ -6097,7 +6097,7 @@ var stateClasses = {
 };
 function SlippageChip({
   options = [],
-  selected = null,
+  selected = void 0,
   onSelect,
   formatLabel,
   className
@@ -6107,7 +6107,7 @@ function SlippageChip({
     {
       "data-test-id": "slippage-chips",
       "data-slot": "slippage-chips",
-      className: tailwindMerge.twMerge("flex gap-[6px] items-center", className),
+      className: tailwindMerge.twMerge("flex w-full gap-sm", className),
       children: options.map((bps) => /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
@@ -6118,7 +6118,7 @@ function SlippageChip({
           className: tailwindMerge.twMerge(baseClasses, stateClasses[bps === selected ? "active" : "default"]),
           children: formatLabel(bps)
         },
-        bps
+        String(bps)
       ))
     }
   );
@@ -6131,6 +6131,7 @@ var SwapAdvancedSettingsView = ({
   onSlippageSelect,
   formatPercentage,
   slippageOptions,
+  slippageLabel,
   percentageOptions,
   onPercentageClick,
   slippageFormatted,
@@ -6148,15 +6149,6 @@ var SwapAdvancedSettingsView = ({
       collapseText,
       expandText,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col gap-sm", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          SlippageChip,
-          {
-            options: slippageOptions,
-            selected: slippageBps,
-            onSelect: onSlippageSelect,
-            formatLabel: formatPercentage
-          }
-        ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full gap-sm", children: percentageOptions.map((pct, index) => {
           const isMax = index === percentageOptions.length - 1;
           const label = isMax ? maxLabel : `${pct / 100}%`;
@@ -6169,7 +6161,19 @@ var SwapAdvancedSettingsView = ({
             },
             pct
           );
-        }) })
+        }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-xs w-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)] text-[color:var(--deframe-widget-color-text-secondary)] font-[var(--deframe-widget-font-family)]", children: slippageLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SlippageChip,
+            {
+              options: slippageOptions,
+              selected: slippageBps,
+              onSelect: onSlippageSelect,
+              formatLabel: formatPercentage
+            }
+          )
+        ] })
       ] })
     }
   ) }) });
@@ -7772,13 +7776,13 @@ function SlippageDetailRow({ label, options, selected, onSelect: handleSelect, f
     "div",
     {
       "data-test-id": "swap-form-simple-slippage-row",
-      className: "flex justify-between items-center py-[10px] gap-[var(--deframe-widget-size-gap-sm)]",
+      className: "flex flex-col py-[10px] gap-[var(--deframe-widget-size-gap-sm)]",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
             "data-test-id": "swap-form-simple-detail-row-label",
-            className: "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)] uppercase tracking-[0.07em] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)] flex-shrink-0",
+            className: "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)] uppercase tracking-[0.07em] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
             children: label
           }
         ),
@@ -7789,7 +7793,7 @@ function SlippageDetailRow({ label, options, selected, onSelect: handleSelect, f
             selected,
             onSelect: handleSelect,
             formatLabel,
-            className: "gap-[4px] [&_button]:py-[2px] [&_button]:px-[7px] [&_button]:text-[11px]"
+            className: "w-full gap-[4px] [&_button]:py-[2px] [&_button]:px-[7px] [&_button]:text-[11px]"
           }
         )
       ]