feat: add sk-ui- prefix to widget's tailwindcss config, update @swapkit/ui to use prefixed classNames

bun.lock

@@ -1,6 +1,6 @@
 {
   "lockfileVersion": 1,
-  "configVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "swapkit-monorepo",
@@ -297,7 +297,7 @@
         "react": "19.1.1",
         "react-hook-form": "7.65.0",
         "sonner": "2.0.7",
-        "tailwind-merge": "3.3.1",
+        "tailwind-merge": "2.6.0",
         "tailwindcss": "3.4.18",
         "tailwindcss-animate": "1.0.7",
         "ts-pattern": "5.9.0",
@@ -312,6 +312,10 @@
         "@swapkit/helpers": "workspace:*",
       },
     },
+    "packages/wallet-extension": {
+      "name": "wallet-extension",
+      "version": "0.0.0",
+    },
     "packages/wallet-extensions": {
       "name": "@swapkit/wallet-extensions",
       "version": "4.1.1",
@@ -491,7 +495,7 @@
         "react": "19.1.1",
         "react-dom": "19.1.1",
         "react-hook-form": "7.65.0",
-        "tailwind-merge": "3.3.1",
+        "tailwind-merge": "2.6.0",
         "tailwindcss": "3.4.18",
         "tailwindcss-animate": "1.0.7",
         "zod": "3.25.74",
@@ -543,7 +547,7 @@
         "sonner": "2.0.7",
         "stream-browserify": "3.0.0",
         "stream-http": "3.2.0",
-        "tailwind-merge": "3.3.1",
+        "tailwind-merge": "2.6.0",
         "tailwindcss-animate": "1.0.7",
         "ts-pattern": "5.9.0",
         "url": "0.11.4",
@@ -592,6 +596,10 @@
         "vite-plugin-wasm": "3.5.0",
       },
     },
+    "playgrounds/vite-lite": {
+      "name": "vite-lite",
+      "version": "0.0.0",
+    },
     "tools/builder": {
       "name": "@internal/tools-builder",
       "version": "0.0.0",
@@ -4273,7 +4281,7 @@
 
     "table-layout": ["table-layout@1.0.2", "", { "dependencies": { "array-back": "^4.0.1", "deep-extend": "~0.6.0", "typical": "^5.2.0", "wordwrapjs": "^4.0.0" } }, "sha512-qd/R7n5rQTRFi+Zf2sk5XVVd9UQl6ZkduPFC3S7WEGJAmetDTjY3qPN50eSKzwuzEyQKy5TN2TiZdkIjos2L6A=="],
 
-    "tailwind-merge": ["tailwind-merge@3.3.1", "", {}, "sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g=="],
+    "tailwind-merge": ["tailwind-merge@2.6.0", "", {}, "sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA=="],
 
     "tailwindcss": ["tailwindcss@3.4.18", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "arg": "^5.0.2", "chokidar": "^3.6.0", "didyoumean": "^1.2.2", "dlv": "^1.1.3", "fast-glob": "^3.3.2", "glob-parent": "^6.0.2", "is-glob": "^4.0.3", "jiti": "^1.21.7", "lilconfig": "^3.1.3", "micromatch": "^4.0.8", "normalize-path": "^3.0.0", "object-hash": "^3.0.0", "picocolors": "^1.1.1", "postcss": "^8.4.47", "postcss-import": "^15.1.0", "postcss-js": "^4.0.1", "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0", "postcss-nested": "^6.2.0", "postcss-selector-parser": "^6.1.2", "resolve": "^1.22.8", "sucrase": "^3.35.0" }, "bin": { "tailwind": "lib/cli.js", "tailwindcss": "lib/cli.js" } }, "sha512-6A2rnmW5xZMdw11LYjhcI5846rt9pbLSabY5XPxo+XWdxwZaFEn47Go4NzFiHu9sNNmr/kXivP1vStfvMaK1GQ=="],
 
@@ -4535,6 +4543,8 @@
 
     "vite": ["vite@7.1.10", "", { "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", "rollup": "^4.43.0", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-CmuvUBzVJ/e3HGxhg6cYk88NGgTnBoOo7ogtfJJ0fefUWAxN/WDSUa50o+oVBxuIhO8FoEZW0j2eW7sfjs5EtA=="],
 
+    "vite-lite": ["vite-lite@workspace:playgrounds/vite-lite"],
+
     "vite-plugin-node-polyfills": ["vite-plugin-node-polyfills@0.24.0", "", { "dependencies": { "@rollup/plugin-inject": "^5.0.5", "node-stdlib-browser": "^1.2.0" }, "peerDependencies": { "vite": "^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" } }, "sha512-GA9QKLH+vIM8NPaGA+o2t8PDfFUl32J8rUp1zQfMKVJQiNkOX4unE51tR6ppl6iKw5yOrDAdSH7r/UIFLCVhLw=="],
 
     "vite-plugin-top-level-await": ["vite-plugin-top-level-await@1.6.0", "", { "dependencies": { "@rollup/plugin-virtual": "^3.0.2", "@swc/core": "^1.12.14", "@swc/wasm": "^1.12.14", "uuid": "10.0.0" }, "peerDependencies": { "vite": ">=2.8" } }, "sha512-bNhUreLamTIkoulCR9aDXbTbhLk6n1YE8NJUTTxl5RYskNRtzOR0ASzSjBVRtNdjIfngDXo11qOsybGLNsrdww=="],
@@ -4579,6 +4589,8 @@
 
     "vscode-uri": ["vscode-uri@3.1.0", "", {}, "sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ=="],
 
+    "wallet-extension": ["wallet-extension@workspace:packages/wallet-extension"],
+
     "watchpack": ["watchpack@2.4.4", "", { "dependencies": { "glob-to-regexp": "^0.4.1", "graceful-fs": "^4.1.2" } }, "sha512-c5EGNOiyxxV5qmTtAB7rbiXxi1ooX1pQKMLX/MIabJjRA0SJBQOjKF+KSVfHkr9U1cADPon0mRiVe/riyaiDUA=="],
 
     "web-encoding": ["web-encoding@1.1.5", "", { "dependencies": { "util": "^0.12.3" }, "optionalDependencies": { "@zxing/text-encoding": "0.9.0" } }, "sha512-HYLeVCdJ0+lBYV2FvNZmv3HJ2Nt0QYXqZojk3d9FJOLkwnuhzM9tmamh8d7HPM8QqjKH8DeHkFTx+CFlWpZZDA=="],
@@ -4855,8 +4867,6 @@
 
     "@meshsdk/bitcoin/bip32": ["bip32@4.0.0", "", { "dependencies": { "@noble/hashes": "^1.2.0", "@scure/base": "^1.1.1", "typeforce": "^1.11.5", "wif": "^2.0.6" } }, "sha512-aOGy88DDlVUhspIXJN+dVEtclhIsfAUppD43V0j40cPTld3pv/0X/MlrZSZ6jowIaQQzFwP8M6rFU2z2mVYjDQ=="],
 
-    "@meshsdk/react/tailwind-merge": ["tailwind-merge@2.6.0", "", {}, "sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA=="],
-
     "@meshsdk/web3-sdk/@meshsdk/bitcoin": ["@meshsdk/bitcoin@1.9.0-beta.68", "", { "dependencies": { "@bitcoin-js/tiny-secp256k1-asmjs": "^2.2.3", "bip174": "^3.0.0-rc.1", "bip32": "^4.0.0", "bip39": "^3.1.0", "bitcoinjs-lib": "^6.1.7", "ecpair": "^2.0.0" } }, "sha512-Ni050tWpSR9GABYVgoB/3tOtINJElg8+A4BWsqU0Ez/HK0AJBxLj+/gKAwzIAsOw0utcxd7mgADFUjXZU+oDlQ=="],
 
     "@meshsdk/web3-sdk/@meshsdk/common": ["@meshsdk/common@1.9.0-beta.68", "", { "dependencies": { "bech32": "^2.0.0", "bip39": "3.1.0", "blake2b": "^2.1.4", "blakejs": "^1.2.1" } }, "sha512-rmL2uZzSTEW52OYNCdRF1mBdL4pXLcMwjNZrK3Np/6E1zl2to0pArMfuc2bUl5urTIDfTqa2CsuWpgzZQ47N6Q=="],
@@ -5261,6 +5271,8 @@
 
     "@stacks/transactions/@noble/secp256k1": ["@noble/secp256k1@1.7.1", "", {}, "sha512-hOUk6AyBFmqVrv7k5WAw/LpszxVbj9gGN4JRkIX52fdFAj1UA61KXmZDvqVEm+pOyec3+fIeZB02LYa/pWOArw=="],
 
+    "@swapkit/wallet-hardware/@ledgerhq/hw-transport": ["@ledgerhq/hw-transport@6.31.13", "", { "dependencies": { "@ledgerhq/devices": "8.7.0", "@ledgerhq/errors": "^6.27.0", "@ledgerhq/logs": "^6.13.0", "events": "^3.3.0" } }, "sha512-MrJRDk74wY980ofiFPRpTHQBbRw1wDuKbdag1zqlO1xtJglymwwY03K2kvBNvkm1RTSCPUp/nAoNG+WThZuuew=="],
+
     "@swc/helpers/tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
 
     "@thaunknown/simple-websocket/ws": ["ws@8.18.3", "", { "peerDependencies": { "bufferutil": "^4.0.1", "utf-8-validate": ">=5.0.2" }, "optionalPeers": ["bufferutil", "utf-8-validate"] }, "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg=="],
@@ -6761,8 +6773,6 @@
 
     "@meshsdk/web3-sdk/@meshsdk/core/@meshsdk/react/@meshsdk/web3-sdk": ["@meshsdk/web3-sdk@0.0.37", "", { "dependencies": { "@meshsdk/bitcoin": "1.9.0-beta.53", "@meshsdk/common": "1.9.0-beta.53", "@meshsdk/core-cst": "1.9.0-beta.53", "@meshsdk/wallet": "1.9.0-beta.53", "@peculiar/webcrypto": "^1.5.0", "axios": "^1.8.3", "base32-encoding": "^1.0.0", "uuid": "^11.1.0" } }, "sha512-uRG0jLjsa83JbPZqnVkec3gjvi0LEMiu1E6ItUALEnKUTTuhDOe3Cx4Ov1PbPTsYVsGRq61DCgzCNHSh2bXy+Q=="],
 
-    "@meshsdk/web3-sdk/@meshsdk/core/@meshsdk/react/tailwind-merge": ["tailwind-merge@2.6.0", "", {}, "sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA=="],
-
     "@meteorwallet/sdk/@near-js/accounts/@near-js/utils/@scure/base": ["@scure/base@1.2.6", "", {}, "sha512-g/nm5FgUa//MCj1gV09zTJTaM6KBAHqLN907YVQqf7zC49+DcO4B1so4ZX07Ef10Twr6nuqYEH9GEggFXA4Fmg=="],
 
     "@meteorwallet/sdk/@near-js/crypto/@near-js/utils/@scure/base": ["@scure/base@1.2.6", "", {}, "sha512-g/nm5FgUa//MCj1gV09zTJTaM6KBAHqLN907YVQqf7zC49+DcO4B1so4ZX07Ef10Twr6nuqYEH9GEggFXA4Fmg=="],

packages/ui/package.json

@@ -26,7 +26,7 @@
     "react": "19.1.1",
     "react-hook-form": "7.65.0",
     "sonner": "2.0.7",
-    "tailwind-merge": "3.3.1",
+    "tailwind-merge": "2.6.0",
     "tailwindcss": "3.4.18",
     "tailwindcss-animate": "1.0.7",
     "ts-pattern": "5.9.0",

packages/ui/src/lib/utils.ts

@@ -1,8 +1,11 @@
 import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { extendTailwindMerge } from "tailwind-merge";
+import tailwindConfig from "../../tailwind.config";
+
+const twMergeWithPrefix = extendTailwindMerge({ prefix: tailwindConfig.prefix });
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
+  return twMergeWithPrefix(clsx(inputs));
 }
 
 export function formatCurrency(amount: number | null) {

packages/ui/src/react/components/asset-icon.tsx

@@ -20,10 +20,10 @@ export function AssetIcon({ asset, className }: AssetIconProps) {
   const assetValue = AssetValue.from({ asset });
 
   return (
-    <div className={cn("relative size-10", className)}>
+    <div className={cn("sk-ui-relative sk-ui-size-10", className)}>
       <img
         alt={assetValue?.ticker}
-        className={"size-full overflow-hidden rounded-full"}
+        className={"sk-ui-size-full sk-ui-overflow-hidden sk-ui-rounded-full"}
         height={40}
         src={`${temp_host}/images/${assetValue?.chain?.toLowerCase()}.${assetValue?.symbol?.toLowerCase()}.png`}
         width={40}
@@ -32,7 +32,7 @@ export function AssetIcon({ asset, className }: AssetIconProps) {
       {assetValue?.type !== "Native" && (
         <img
           alt={assetValue?.chain}
-          className="-bottom-0.5 absolute right-0 size-[45%] rounded-full border-2 border-secondary bg-secondary"
+          className="sk-ui--bottom-0.5 sk-ui-absolute sk-ui-right-0 sk-ui-size-[45%] sk-ui-rounded-full sk-ui-border-2 sk-ui-border-secondary sk-ui-bg-secondary"
           height={24}
           src={`${temp_host}/images/${assetValue?.chain?.toLowerCase()}.${assetValue?.chainId?.toLowerCase()}.png`}
           width={24}

packages/ui/src/react/components/chain-icon.tsx

@@ -16,13 +16,13 @@ export function ChainIcon({ chain, className }: ChainIconProps) {
 
   if (!iconUrl) {
     return (
-      <div className={cn("flex items-center justify-center rounded-full bg-card font-medium text-xs", className)}>
+      <div className={cn("sk-ui-flex sk-ui-items-center sk-ui-justify-center sk-ui-rounded-full sk-ui-bg-card sk-ui-font-medium sk-ui-text-xs", className)}>
         {chain?.slice(0, 2)}
       </div>
     );
   }
 
   return (
-    <img alt={chain} className={cn("rounded-full object-contain", className)} height={24} src={iconUrl} width={24} />
+    <img alt={chain} className={cn("sk-ui-rounded-full sk-ui-object-contain", className)} height={24} src={iconUrl} width={24} />
   );
 }

packages/ui/src/react/components/composable/swap-amount-input.tsx

@@ -18,20 +18,20 @@ export function SwapAmountInput({
   setAmount?: (amount: string) => void;
 }) {
   return (
-    <div className={cn("flex flex-col items-end", className)}>
+    <div className={cn("sk-ui-flex sk-ui-flex-col sk-ui-items-end", className)}>
       <Input
-        className="-mr-3 !shadow-none !border-0 !ring-0 !ring-offset-0 bg-transparent text-end font-medium text-2xl"
+        className="sk-ui--mr-3 !sk-ui-shadow-none !sk-ui-border-0 !sk-ui-ring-0 !sk-ui-ring-offset-0 sk-ui-bg-transparent sk-ui-text-end sk-ui-font-medium sk-ui-text-2xl"
         disabled={disabled}
         onChange={(e) => setAmount?.(e.target.value)}
         placeholder="0.00"
         type="text"
         value={amount ?? "0.00"}
       />
 
-      <div className="flex items-center gap-1">
-        {isLoading && <Loader2Icon className="size-3.5 animate-spin" />}
+      <div className="sk-ui-flex sk-ui-items-center sk-ui-gap-1">
+        {isLoading && <Loader2Icon className="sk-ui-size-3.5 sk-ui-animate-spin" />}
 
-        <span className="text-muted-foreground text-sm">{formattedAmountUSD}</span>
+        <span className="sk-ui-text-muted-foreground sk-ui-text-sm">{formattedAmountUSD}</span>
       </div>
     </div>
   );

packages/ui/src/react/components/composable/swap-asset-item.tsx

@@ -9,13 +9,13 @@ export function SwapAssetItem({ asset }: { asset: string | null | undefined }) {
   const assetValue = AssetValue.from({ asset });
 
   return (
-    <div className="flex min-w-0 items-center gap-3">
+    <div className="sk-ui-flex sk-ui-min-w-0 sk-ui-items-center sk-ui-gap-3">
       <AssetIcon asset={asset} />
 
-      <div className="flex min-w-0 flex-col items-start">
-        <span className="max-w-full truncate font-medium text-base text-foreground">{assetValue?.ticker}</span>
+      <div className="sk-ui-flex sk-ui-min-w-0 sk-ui-flex-col sk-ui-items-start">
+        <span className="sk-ui-max-w-full sk-ui-truncate sk-ui-font-medium sk-ui-text-base sk-ui-text-foreground">{assetValue?.ticker}</span>
 
-        <span className="-mt-0.5 text-muted-foreground text-sm">{assetValue?.chain}</span>
+        <span className="sk-ui--mt-0.5 sk-ui-text-muted-foreground sk-ui-text-sm">{assetValue?.chain}</span>
       </div>
     </div>
   );