@hot-labs/kit 1.6.1 → 1.6.2

package/src/ui/toast/index.tsx

@@ -177,6 +177,7 @@ const Root = styled.div`
   flex-direction: column;
   gap: 12px;
   z-index: 1000000000;
+  pointer-events: none;
 `;
 
 const ToastContent = styled.div`
@@ -202,6 +203,7 @@ const Container = styled.div<{ $type: "success" | "failed" | "pending" }>`
   box-shadow: -6px 6px 16px 0 rgba(0, 0, 0, 0.6);
   overflow: hidden;
   position: relative;
+  pointer-events: all;
 
   cursor: pointer;
   width: 320px;

package/src/ui/uikit/animationts.ts

@@ -0,0 +1,20 @@
+import { useState } from "react";
+
+let isInitialized = false;
+const animations = {
+  success: "https://hex.exchange/success.json",
+  failed: "https://hex.exchange/error.json",
+  loading: "https://hex.exchange/loading.json",
+};
+
+export const useAnimations = () => {
+  useState(() => {
+    if (isInitialized) return;
+    isInitialized = true;
+    fetch(animations.loading);
+    fetch(animations.success);
+    fetch(animations.failed);
+  });
+
+  return animations;
+};

package/src/ui/uikit/badge.tsx

@@ -0,0 +1,24 @@
+import styled from "styled-components";
+import { WarningIcon } from "../icons/warning";
+import { PSmall } from "./text";
+
+export const WarningBox = ({ style, children, type = "warning" }: { style?: React.CSSProperties; children: React.ReactNode; type?: "warning" | "error" }) => {
+  return (
+    <WarningBadge $type={type} style={style}>
+      <WarningIcon color={type === "warning" ? "#F3AE47" : "#FF453A"} style={{ flexShrink: 0 }} />
+      <PSmall style={{ color: type === "warning" ? "#F3AE47" : "#FF453A", fontWeight: "bold" }}>{children}</PSmall>
+    </WarningBadge>
+  );
+};
+
+const WarningBadge = styled.div<{ $type: "warning" | "error" }>`
+  border-radius: 8px;
+  width: 100%;
+  border: 1px solid ${(p) => (p.$type === "warning" ? "#f3ae47" : "#FF453A")};
+  background: ${(p) => (p.$type === "warning" ? "#3f311d" : "#1c1c1c")};
+  align-items: center;
+  padding: 8px;
+  display: flex;
+  gap: 8px;
+  text-align: left;
+`;

package/src/ui/uikit/tabs.tsx

@@ -1,25 +1,35 @@
 import styled from "styled-components";
+import { PSmall, PTiny } from "./text";
+import { Button } from "./button";
 
 interface SegmentedControlProps {
-  options: { label: string; value: string; color?: string; background?: string }[];
-  value: string;
+  options: { label: string; value: string; color?: string; background?: string; badge?: string }[];
   onChange: (value: string) => void;
+  value: string;
 }
 
 const SegmentedControl = ({ options, value, onChange }: SegmentedControlProps) => {
   return (
     <Tabs>
+      <div
+        style={{
+          position: "absolute",
+          transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+          left: `${(100 / options.length) * options.findIndex((option) => option.value === value)}%`,
+          background: options.find((option) => option.value === value)?.background || "#1f1f1f",
+          width: `calc(${100 / options.length}% - 4px)`,
+          height: "calc(100% - 4px)",
+          borderRadius: 10,
+          margin: "2px",
+          zIndex: 0,
+          top: 0,
+        }}
+      />
+
       {options.map((option) => (
-        <Tab
-          key={option.value}
-          onClick={() => onChange(option.value)}
-          $active={option.value === value}
-          style={{
-            background: option.value === value ? option.background || "#1D1F20" : "transparent",
-            color: option.value === value ? option.color : "#6b6661",
-          }}
-        >
-          {option.label}
+        <Tab key={option.value} onClick={() => onChange(option.value)} $active={option.value === value}>
+          <PSmall style={{ transition: "color 0.2s", color: option.value === value ? option.color : "var(--text-text-secondary, #BFBFBF)" }}>{option.label}</PSmall>
+          {option.badge && <PTiny style={{ minWidth: 16, textAlign: "center", fontSize: 9, color: "#b2b2b2", fontWeight: "bold", background: "#262729", padding: "0 4px", borderRadius: "8px" }}>{option.badge}</PTiny>}
         </Tab>
       ))}
     </Tabs>
@@ -28,29 +38,33 @@ const SegmentedControl = ({ options, value, onChange }: SegmentedControlProps) =
 
 const Tabs = styled.div`
   display: flex;
-  border-radius: 16px;
-  border: 1px solid var(--border-lowest-solid, #242627);
-  padding: 0;
   flex-shrink: 0;
   height: 40px;
-  padding: 2px;
   width: 100%;
+  padding: 0;
+
+  border-radius: var(--border-radius-12, 12px);
+  border: 1px solid var(--border-border-default, #323232);
+  position: relative;
 `;
 
-const Tab = styled.button<{ $active?: boolean }>`
+const Tab = styled(Button)<{ $active?: boolean }>`
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   justify-content: center;
   align-items: center;
-  border-radius: 14px;
-  height: 100%;
-  border: none;
+  gap: 4px;
+
   outline: none;
   cursor: pointer;
-  transition: 0.2s background-color;
+  transition: 0.2s background-color, 0.2s opacity;
+  z-index: 1;
   flex: 1;
-  font-size: 14px;
-  font-weight: 500;
+  white-space: nowrap;
+
+  p {
+    color: ${(p) => (p.$active ? "var(--text-text-primary, #fff)" : "var(--text-text-secondary, #BFBFBF)")};
+  }
 `;
 
 export default SegmentedControl;